首页部分
这里暂且不管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函数,将需要的各个函数一起启动,因为函数进行了重写,所以对应的对象中会启动独有的函数,达到不同的效果。于此,正常来讲,页面应该完成了——
但是,前面说了,移动端的网页全放在一起,仅仅是这样还不够,需要有判断条件决定什么时候跳转什么页面,且这个页面不会因为刷新而蹦到首页上去。