首先要说的是移动 Web App 的特殊性, 就是要尽量模仿成 Native App, 让用户用起来相当爽, 达到以假乱真的目的.

这主要是因为当下多是 Native App 为主, 用户一般都习惯了那种流畅的操作感觉, 如果你一上来就草草地将你的 Web 网站通过 PhoneGap 打包成 Hybrid App, 那就等着被用户K.O.吧: 你丫这是拿WAP网站来忽悠我呢?
其中最大的问题就是, 传统 Web 网站页面之间的跳转, 会产生一个比较大的空白时间, 让用户感觉很不爽, 整个 Hybrid App 就像一盘散沙, 缺乏连贯性, 没有像 Native App 那种页面切换时衔接的效果. 还有重要的一点就是需要保存页面的状态, 在用户不停地切换页面后返回来, 又必须恢复到最初用户选择的那种状态和所处的位置.

这就是为什么我们要选择以单页面(Single Page Application)来开发移动 Web App 的原因, 关键是方便实现切换"页面"时的过渡效果以及"保存"页面上的状态. 但单页面的开发模块必然增大开发难度, 也徒增了其他问题, 因此很有必要引入前端MVC的概念, 让它来统一组织前端的代码结构. 这就是为什么我们选用Backbone的原因. 它可以说就是为SPA而生的, 简洁明了, 没有太多硬性规定来干预你的开发, 也没有任何魔法绕得你晕头转向. 你所要做的仅仅是转变思维, 将界面元素拆分成一个个独立的View, 仅此而已, 别无其他.

如果真有其他的话, 那一定就是前端模块与前端模板的渲染问题, 考虑到团队的因素, 我们直接使用了Backbone依赖的Underscore.js来做模块渲染. 其实模块真心不难, 想想你以前怎么写JSP就是了, 其实JSP就是一个模板引擎而已.

都说了是要开发移动 Web App, JavaScript 肯定跑不了, 那么接下来我们就说说 JavaScript 开发过程中最最黑暗的领域 -- 全局变量, 作用域, 原型(prototype), this, 闭包(closure), 嗯...讲完了, 大家懂了吗?

再有就是我们为了在开发复杂程序时让 JavaScript 更适合团队开发, 引入了模块化概念, 引入了RequireJS. 因此很有必要回顾下 JavaScript 模块化开发的历史, 主要是为了弥补 JavaScript 语言中最最缺乏的一块 -- 封装模块, 让别人知道你的代码提供了哪些功能, 以及如何使用, 还有依赖管理避免混乱.

1. 全局function
   function log() {}
2. 命名空间(package), 模拟其他语言中包的概念, 或许是你最接受的方式
   var myUtil = {
       log: function() {}
   };
3. 匿名闭包(Anonymous Closures), 代表作大家再熟悉不过了
   var myUtil = (function() {
       var privateVar = 0;
       return {
           log: function() {}
       };
   })();
4. Module规范(CommonJS, AMD), 模块化风格趋向于ruby, 模块就是模块没有包/文件夹的束缚, 想想java中的包名与类名纠缠的关系
   define(function(require, exports, module) {
       var privateVar = 0;
       return {
           log: function() {}
       };
   });

如果上面的东西你一个个都认识, 那么恭喜你, 你已经老了.
如果上面的东西你都不认识, 那么同样也恭喜你, 你可以站在巨人的肩膀上看得更远, 不必走弯路了. 但请不要忘记历史的教训, 无古不成今, 你需要了解历史的真相.

想想你以前是怎么写的JavaScript, 各种script标签乱飞, 各种依赖关系剪不断理还乱.
当你看见我们使用RequireJS来做的JavaScript模块, 是不是觉得各种毁三观啊, 你质疑过, 你彷徨过, 这还是JavaScript了, 莫非你们使用了某种外星科技? 请将一切的烦恼抛之脑后, 你不懂就对了, 我早就跟你说了前端好难, 你又不信.
看看我们现在是如何写JavaScript的, 定义模块我们用define, 引入模块我们用require, 其他什么依赖加载统统不用管了, 那是相当happy啊.
define(function(require, exports, module) {
    // 引入模块
    var $ = require('jquery');
    // 导出我们编写的这个模块的功能
    // 其他模块要使用这个模块, 也只需 require 即可
    return {
        cool: function() {}
    };
});
所以你还在羡慕别的语言中方便的import功能吗? 痛苦吗? 懊恼吗? 从此妈妈再也不用担心我乱写乱放JavaScript了.

到目前为止, 如何通过 JavaScript 来开发移动Web App的架子已经搭得差不多了, 接下来我们看看如何实现 移动Web App的UI组件. 想必没有人愿意一切从头开始吧, 所有什么基础样式, 通用的组件全部都自己来实现, 先不说这有没有难度, 时间上允不允许, 真心觉得没有必要把生命浪费在这上面. 因此我们使用了 Bootstrap 来提供基础样式和组件, 还有就是使用了 Font Awesome 做为图标字体避免图片图标需在各种移动设备上适配. 因此编写CSS时请重(chong)用它们, 重(zhong)用它们, 学习它们绝对让你受益匪浅, 请相信我, 我真心推荐你们好好的学一学, 不要因一时的麻烦而心生抗拒, 虽然你开始放慢了节奏, 但决定不会因此而减慢你达到终点的速度.

还有就是写每一行HTML和CSS都要小心冲突的问题, 因为我们最终所有的东西都只在一个页面上运行, 各种情况都有可能发生, 不要因为你HTML中ID的命名或全局CSS定义而影响了大家, 千万千万要记住. 另外就是移动设备和PC上一样, 同样存在浏览器兼容性问题, 大家小心就是了. 再有我们的Web App最终会通过PhoneGap来打包成真正的App, 不出意外的话, 你也需要了解个大概, 紧接着也有可能需要了解下Android的开发还有Java(如果你完全不懂的话), 还有J2EE的一些东西。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！