首页部分
这里暂且不管css和img部分，因为这里非常好处理，随便给css设置点东西，作为调试使用，接下来，开始正式的编写——
首先，将各种第三方插件全部加载进去，即
<script src="js/zepto.js"></script>
<script src="js/director.js"></script>
然后将下面的东西加载上去
<script src="js/module/baseModule.js"></script> ——基本模版
<script src="js/module/home.js"></script> ——子模块特化home网页部分
<script src="js/module/rank.js"></script> ——子模块特化rank网页部分
<script src="js/module/login.js"></script> ——子模块特化login网页部分
<script src="js/route.js"></script> 路由调整用的js
<script src="js/init.js"></script> 中转站用的js
当然，里面的东西都是空。
杂七杂八的东西加进去之后，就是这个样子的——
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>busDemo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><!-- 只要是移动端页面，必须加上 --> <link rel="stylesheet" href="css/common.css"> <!-- 加载公用css代码 --> <link rel="stylesheet" href="css/home.css"> <!-- 加载首页css代码 --> <link rel="stylesheet" href="css/rank.css"> <!-- 加载排名页css代码 --> <link rel="stylesheet" href="css/login.css"> </head> <body> <section id="home" style="display:block" class="home"></section> <section id="rank" style="display:block" class="rank"></section> <section id="login" style="display:block" class="login"></section> <section id="form_bus" style="display:block" class="form_bus"></section> <section id="citylist" style="display:block" class="citylist"></section> <script src="js/zepto.js"></script> <script src="js/director.js"></script> <script src="js/module/baseModule.js"></script> <script src="js/module/home.js"></script> <script src="js/module/rank.js"></script> <script src="js/module/login.js"></script> <script src="js/route.js"></script> <script src="js/init.js"></script> </body> </html>
然后，我们第一个书写baseModule部分。
我们会将多个网页的代码写在一个html中，通过display将其控制，显示或者隐藏，达到类似快速跳转的作用。而大部分的子页面中都存在重复东西，或者需要一个模板，所以我们专门建立这个网页共通模(mú)板。
作为一个高级前端工程师（可能是），我们决不能直接jquery的q到结尾，这样不仅后期维护非常困难（当每个页面的同一部分需要修改的时候就是灾难，想想看为成百上千个页面换一个广告壁纸的工作量吧.....），而且显得很low，所以我们要使用面向对象的方式写js。
基础代码如下：
1 window.baseModule = { 2 el: null, 3 init: function(){ 4 this.render(); //-->渲染自己特有页面的方法 5 this.bindEvent(); 6 }, 7 render: function(){ 8 this.renderContent(); 9 }, 10 bindEvent: function(){ 11 12 }, 13 renderContent: function(){ 14 //每个模块的renderContent都不一样 15 }, 16 enter: function(){ 17 //进入该模块页 18 this.el.show(); 19 }, 20 leave: function(){ 21 //离开该模块页 22 this.el.hide(); 23 } 24 }
这就是一个通用模版对象了，第一行表示自动加载这个对象。
对象中有el，这个值对应着各个子页面的名称，如home，rank等等。
init方法：init是初始化的意思，即，加载了这个方法会初始化这个模块，简单来说就是启动这个模块，具体来说就是启动里面的方法，第一个render方法代表渲染，表示这个页面里所有的渲染效果，第二个方法bindevent表示绑定事件，点击事件等等都写在这里，这样，配合css基本上一个页面就可以展示出来了。
于是，接下来就是书写render方法和bindevent方法
renderContent方法：上面写的都是公有的方法，但是每个页面都还有自己独特的事件和方法，这部分就写在这里，当然，这个方法在这里本身是空白的，是为了让其他对象继承用的，子页面需要特殊渲染的时候，直接继承并重写就好了。
enter方法和leave方法：页面的切换，即各个子页面的显示和隐藏的控制，调用这个方法就会显示页面或隐藏页面。
【接下来我们以首页部分的js为例子继续讲解】
1 window.homeModule = Object.create(baseModule); 513 (function(){ 14 15 //利用自执行函数，对我们变量进行保护，不随意污 16 //染全局环境，否则会导致变量冲突。 17 var selfModule = { 18 19 el: $('#home'), 20 renderContent: function(){ 21 this.el.html('我是首页的模块') 22 console.log('我是首页的模块'); 23 }, 24 bindEvent: function(){ 25 this.el.click(function(){ 26 //hash值 是url中#后面的内容 27 location.href = "#/rank"; 28 }) 29 } 30 } 31 $.extend(homeModule,selfModule) //两个对象之间的合并 32 })();
看起来意外的简单是不是？
当然不是，就功能上来讲，只写了一个切换而已，还有好多好多没写呢，当然，这个问题以后再说——
结合上面的代码，可以看到，这个代码首先【这个对象是包裹在自执行函数，也就是闭包当中的】，这是为了防止全局变量的污染，而且请注意这个对象的名字是selfModel，这个名字也是其他子页面对象的名字，如果直接放在外面就会被反复重写。
回到代码，第一句自然就是继承，将基础模板继承给homeModel，然后就是一个自执行函数。函数中有一个对象，对比公共模板可以发现：
el有值了，获得的$('#home');就是它的值；
然后rendercontent和bindevent也有了内容了，通过继承了模板之后，再重写这两个方法，整个模块就完成了。
基本的运作方式是，通过执行init函数，将需要的各个函数一起启动，因为函数进行了重写，所以对应的对象中会启动独有的函数，达到不同的效果。于此，正常来讲，页面应该完成了——
但是，前面说了，移动端的网页全放在一起，仅仅是这样还不够，需要有判断条件决定什么时候跳转什么页面，且这个页面不会因为刷新而蹦到首页上去。