前端

移动端SeeApp开发总结-1


暑假在See实习：See 一张图片找到全球同款。
进去之后接手的第一个项目是继续完成移动端版的App。
需求有：登录，发表心愿，同求等等，主要是把整个流程都完成。
年少无知的我以为只是重构点移动端页面，竟然说2天半可以完成（其实如果只是重构是真的够了）；然后Sheen一脸惊讶，拍拍肩膀：”你确定？”。最后给了我5天左右的时间。
好，不废话了。其实主要做的东西就是ajax和后台交互，移动端文件上传。

Fiddler

调试后台接口先介绍这个前端神器。

Fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。 Fiddler 要比其他的网络调试器要更加简单，因为它不仅仅暴露http通讯还提供了一个用户友好的格式。

刚开始的时候不知道这货能干什么。
从SVN拿到之前写了一半的H5（下面都这么叫）的代码后，直接打开index.html是没什么内容的，问了后台相关的人员，才知道是通过url上的参数来ajax提交获得数据再渲染到页面的。之前做的东西ajax都只是局部刷新，比如下拉菜单，搜索关键词提示；自己也有考虑过网页能不能不通过后台来渲染而直接是返回数据前端来填充呢？发现这不就是我想实现的前后端分离嘛~
加上参数后发现还是没有数据。有跨域问题：js请求的后台接口和当前的index.html并不在同一个域名。这时候就要祭出大杀器Fiddler了。

按我的理解，Fiddler能把所有的请求和响应都收集起来，从本机发出的请求都通过Fiddler，从外面进来的响应也都通过Fiddler。除此之外，Fiddler能随意修改这些请求和响应。这点就是他强大的地方了。

打开Fiddler和生产环境下的H5：http://m.seeapp.com/see/static/detail/index.html?tid=10222。在Fiddler里能看到他捕捉到了连接到这个网站的所有请求。现在选择一个请求，是他所需要的js文件：detail.js，在右边的AutoResponder里选择add Rule，制定一系列规则，就能让Fiddler修改返回的这个js的文件了，再次刷新页面，此时页面所引用的js文件就是Fiddler修改过的js文件。
那么这个规则是什么呢？就是指向我们本机的js文件。说白了就是开发环境的js。这样我们在本机的js文件里修改，马上就能反映在线上了。
回到前面的问题，为什么要这么麻烦用Fiddler呢，因为在线上api接口都对上了，没有跨域问题。当然跨域问题也可以在服务端加上：Access-Control-Allow-Origin: *。不过服务端那边不能修改，所以我这边只能自力更生了。
此外用Fiddler还有个好处，方便手机调试。具体方法如下：

  • 在Fiddler里设置好各种文件的对应规则后，打开Fiddler允许外部设备连接的功能，设置好端口号。
  • 让测试的手机端和PC端在同一个局域网下，设置手机端的HTTP代理服务器为PC端的IP地址，设置好端口号。
  • 这样一来，手机发送的请求也会通过Fiddler，接受的请求也会通过Fiddler，所以手机端浏览到的页面就和PC端一样了。不需要把修改好的文件放上服务器再在手机端刷新

可以再延伸一下，由于Fiddler也能知道手机端发送的请求，所以一些App调用的后台请求接口也可以知道了；也可以修改请求的各种文件，比如还是js文件，然后加点代码啥的→_→，这样一些游戏可以写个小外挂出来哈哈哈哈（感谢贤哥）；Fiddler还能直接修改HOST文件，不用在系统文件那里修改。

js结构

$(function (){...})
在jQuery中，这个代表当DOM加载完成后要执行的函数，等价于$(document).ready()。
每个不同的页面加载不同的js，每个js文件的结构大体如下：

1
2
3
4
5
6
7
8
$(function () {
    var reply = new (function () {...});
    var theme = new (function () {...});
    setTimeout(function () {
        reply.init();
        theme.init();
    },300)
})

这是前辈的写法，感觉很新颖：把每个功能模块都通过匿名函数用类来实现，在最后统一进行初始化。虽然之前我也是用了类似的写法，但是每个类都是一个对象，在对象里面定义方法和变量觉得有点拘束；而这种匿名函数的写法就很自然了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var reply = new (function () {
    var t = this;
    
    //公共变量
    t.user = '';
    t.avater = '';
    
    //私有变量
    var _user = '';
    
    t.init = function () {
        t.setUser(t.getUser());
    }
    
    t.setUser = function (user) {
        t.user = user;
    }
});

里面就很自由，定义私有变量/方法或者公共变量/方法都很方便。另外，虽然在整个运行的时候各个类可以互相调用，但是由于写在了DOM加载完成的匿名函数中，在执行外部（浏览器中）是访问不到这些变量的。要想暴露出来可以window.fun = fun。
当然啦，还是有其他的写法也能实现这样的效果，现在比较喜欢这种。

分享到