【单页应用】一起来单页应用吧，实现简单微博功能！（上）

前言

北上是大城市，魔都这里的节奏确实比成都快得多，在成都老夫一般走的最晚，7点多才撤退，这边居然8点走了还会有一点点罪恶感！！！

这边加班就不叫加班啦，几个同事都是10点左右才走，而且累计工作时长最长的是我们老大！

工作第一周到周三了才把电脑这些事情搞好，期间又要找房子，搬家，所以第一周没干神马事情就结束了，老大也没有分配任务。

第二周一开始就给分配了任务，在新框架上开发，自己也不是很熟悉，所以边做边学，第二周就草草的结束了。

周末时候花了两天时间阅读同事写的框架，基本流程算是明白了，明天再请教下同事应该对框架便不陌生了。

在此我心境发生了很大变化，还要感谢之前的经历以及师傅的教导（http://www.cnblogs.com/aaronjs/）

之前我是不太喜欢人家写的代码的，想的最多的就是你能写，我肯定也能写，于是便写了。。。。

师傅却说要真正的成为高手需要阅读大量代码，理解别人的思路，这才是王道，所以建议我去读jquery源码。

PS：据说师傅没用多少时间就把司徒写的框架搞懂了，看来我们差距很大啊

于是，这周先是使用了下同事写的框架，发现很好用的说，团队有高手就是好！！！

近期阅读了其框架所以我们也来试试单页应用吧，此次的主题是写一个网页版的微博功能（因为微博接口完善了），其主要功能：

① 登录

② 微博广场内容（列表展示、分页功能）

③ 微博详情

----------------也许会出现（测试性目的看工作量）-----------------

④ 发表微博

⑤ 转播等

博客是一边思考写代码、一边做文字描述的，有点乱请见谅

整体思路

我们先来构思下整个框架的构成（这里参照了同事的框架）：

依赖库

① requireJS

② jquery

③ underscore.js

PS：本来还想用backbone的，想下还是算了，研究性目的，不要搞的过于复杂吧

程序流程

基本结构我是这么思考的：

① 我们在网页中输入URL后便进入Index，以requireJS加载主框架APP

② APP.js做一些初始化操作，其主要功能便是观察hash变化（URL变化）

若是改变（初始化进入、或者想去其他页面），便根据规则获取URL相关信息，初始化新的VIEW，进行显示，并将URL压人HASH。

③ 实现VIEW类，其具有基本几个事件（onCreate、onLoad、onRender、onHide）

一个VIEW可以对应其HTML模板（可以0个或者多个）

④ 事件操作使用jquery的吧

PS：暂时这个样子吧，我们边写边改，看最后能做到什么样子，这里还是画个图

 

于是，我们开始辛苦的基础实现吧，毕竟我们现在还神马都米有！！！

基础实现之继承

其实，我们是面向对象的，若是不面向对象应该会被喷吧，于是我们来一起完成一个基础的继承类吧：

 1 var b = {};//base 2 var slice = [].slice; 3  4 b.Class = function (supClass, childAttr) { 5     //若是传了第一个类，便继承之；否则实现新类 6     if (typeof supClass === 'object') { 7         childAttr = supClass; 8         supClass = function () { }; 9     }10 11     //定义我们创建的类
12     var newClass = function () {13         this._propertys_();14         this.init.apply(this, arguments);15     };16     newClass.prototype = new supClass();17 18     var supInit = newClass.prototype.init || function () { };19     var childInit = childAttr.init || function () { };20     var _supAttr = newClass.prototype._propertys_ || function () { };21     var _childAttr = childAttr._propertys_ || function () { };22 23     for (var k in childAttr) {24         //_propertys_中作为私有属性25         childAttr.hasOwnProperty(k) && (newClass.prototype[k] = childAttr[k]);26     }27 28     //继承的属性有可能重写init方法29     if (arguments.length && arguments[0].prototype && arguments[0].prototype.init === supInit) {30         //重写新建类，初始化方法，传入其继承类的init方法31         newClass.prototype.init = function () {32             var scope = this;33             var args = [function () {34                 supInit.apply(scope, arguments);35             } ];36             childInit.apply(scope, args.concat(slice.call(arguments)));37         };38     }39 40     //内部属性赋值41     newClass.prototype._propertys_ = function () {42         _supAttr.call(this);43         _childAttr.call(this);44     };45 46     //成员属性47     for (var k in supClass) {48         supClass.hasOwnProperty(k) && (newClass[k] = supClass[k]);49     }50     return newClass;51 };

代码还是很好理解的：

PS：我们这个框架建立的所有类，都会经过他！！！

可以传递两个两个参数：需要继承的类，新建类的一些参数，这里我们来稍微走一下这个流程：

一个参数

① 我们先初始化一个新的类newClass，并且实例化他，他就会调用本身的两个方法：

this._propertys_() 用于实例化本身属性
this.init.apply(this, arguments) init为我们定义的，每个类都会调用的初始化方法

② 让我们新建的类（newClass）继承自我们传入的类

③ 初始化四个变量，显然这种情况他们都是空函数

④ 将传入的子属性的值给予新建类（newClass），这里只有一个参数便忽略吧

⑤ 29行，由于我们的类继承自supClass，所以这里是满足条件的，我们看看他里面干了些什么：

他重新定义了，我们创建类的init函数（我们说过他在自身属性初始化完毕后会执行）。

这里我们为他的参数新增了一个方法，也就是父类的init方法，只不过其this指向为子类。

newClass.prototype.init = function () {    var scope = this;    var args = [function () {        supInit.apply(scope, arguments);    } ];    childInit.apply(scope, args.concat(slice.call(arguments)));};

⑥ 41行，大家注意_propertys_这个函数，他是用于我们为自身属性赋值的，等下我们举个例子

⑦ 最后将父类的成员对象赋给子类（因为我们知道成员是不会被继承的）

⑧ 返回新建类，流程结束

情况我这里不多做介绍，我们再说下两个参数的情况就好。

两个参数

我们这种场景用的也很多，第一个参数为要继承的类，第二个参数为新建类的一些初始化信息，我们来走一次流程吧：

① 传入两个参数，要继承的类；新建类的一些属性和原型方法

② 12行同样初始化我们的新类，我们实例化时，首先会执行_propertys_方法为自身赋值，然后执行初始化方法（可以传递参数哦，参数是new时候传递的）：

var newClass = function () {        this._propertys_();        this.init.apply(this, arguments);//此处的参数请注意 };

③ 让新类继承自传入的类，此时我们的newClass.prototype其实就拥有很多方法了，包括init与_propertys_

④ 18-21行，初始化四个后面会用到的函数，各位自己注意其意图

⑤ 23-26行，将将传入的子属性对象，赋予newClass，_propertys_也作为原型对象了

⑥ 29-38行，将父类的init作为参数传递给子类的init，由子类决定是不是要执行

⑦ 最后的就不多说了

好了，到此各位应该了解他的作用了，我们来一个简单的例子吧：

简单例子

实现一个父类Bird（鸟类），及其子类Chicken（鸡）Duck（鸭）

首先，我们来看鸟类都能呼吸，都有名字与年龄，所以我们这么干：

 1 var Bird = new b.Class({ 2     //作为自身属性将被调用，里面必须采用this.XX的方式书写 3     _propertys_: function () { 4         this.name = '鸟类'; 5         this.age = 0; 6     }, 7     //一定会被执行的初始化方法 8     init: function () { 9         alert('一定会执行');10     },11     //原型方法12     breathe: function () {13         alert('我能呼吸');14     }15 });16 17 var b = new Bird({des: '测试init方法是否能捕获参数'});18 19 var s = '';

这里我们的init自动执行了，并且，其会用到传入的参数！！！

这是我们得到的鸟类实例。

好了，我们来实例化一个鸡的类，并且他拥有嚎叫打鸣的本领，与性别的特征

 1 var Chicken = new b.Class(Bird, { 2     _propertys_: function () { 3         this.sex = '公'; 4     }, 5     //一定会被执行的初始化方法 6     init: function () { 7         alert('我是一只鸡'); 8     }, 9     //原型方法10     howl: function () {11         alert('我能打鸣');12     }13 });

这里，父类的init会执行，子类的init会执行，而且，子类的init函数会默认带上父类的init方法

init: function (superInit) {    alert('我是一只鸡');},

PS:虽说父类一定会执行，但是若是在此调用父类的superInit方法的话，this指向是子类哦！！！

好了，这个家伙结束，我们进入下一个核心VIEW

基础实现之视图

视图（View）是我们框架的第二个核心，我们来看看到底可能会有哪些view呢？

① 核心之，页面VIEW

这是最重要的view，他应该包含整个页面的逻辑，从初始化到最后的展示，事件绑定等应该一应俱全

② 各个级别组件，弹出层，提示层，遮盖层......

这些都应该是view，但是，先不管那么多，我们来实现我们的核心吧！！！

思考过程

此处使用backbone的视图到变得简单了，我们来简单思考下我们页面视图形成的流程吧：

① 用户第一次进入界面，访问index，由main导向app，app获得url，获取其相关参数（list）

② app根据list实例化view，view调用自身init方法，慢慢开始构建页面，并会触发各个流程

PS：在此我认为每个页面view应该统一继承一个父类，于是我们来尝试性试试吧

第一版

  1 b.AbstractView = b.Class({  2     //基本view应该具有的属性  3     _propertys_: function () {  4         this.id = (new Date()).getTime(); //唯一pageID  5         this.rootBox = $('body'); //视图容器  6         this.root = $('<div/>'); //视图的根元素，可进行设置  7         this.header = null;  8         this.footer = null;  9         this.template = '';//可能的模板 10         this.isCreated = false;//是否创建完毕 11         this.status = b.AbstractView.STATE_NOTCREATE;//当前状态 12     }, 13     init: function () { 14     }, 15     //定义将要用到的事件，其中元素选取都会以root为标准，所以使用内部提供函数吧 16     events: { 17         'selector,eventType': 'func' 18     }, 19     //默认属性 20     attrs: { 21     }, 22     //获取视图元素 23     find: function (selector) { 24         return this.root.find(selector); 25     },  26     //创建dom 27     create: function (opts) { 28         if(!this.isCreated && this.status != b.AbstractView.STATE_ONCREATE) { 29             var attr = opts && opts.attr; 30             var html = this.createHtml(); 31             this.initRoot(attr);//初始化root 32             this.hide(); 33             this.rootBox.append(this.root); 34             this.root.html(html); 35             this.trigger('onCreate');//触发正在创建事件，其实这里都创建完了 36             this.status = b.AbstractView.STATE_ONCREATE; 37             this.isCreated = true; 38             this.bindEvent(); 39         } 40     }, 41     //呈现/渲染视图 42     show: function (callback) { 43         if(this.status == b.AbstractView.STATE_ONSHOW) { 44             return; 45         } 46         this.create(); 47         this.root.show(); 48         this.trigger('onShow'); 49         this.status = b.AbstractView.STATE_ONSHOW 50         callback && (typeof callback == 'function') && callback.call(this); 51         this.trigger('onLoad'); 52     }, 53     //隐藏dom 54     hide: function (callback) { 55         if(!this.root || this.status == b.AbstractView.STATE_ONHIDE) { 56             return; 57         } 58         this.root.hide(); 59         this.trigger('onHide'); 60         this.status = b.AbstractView.STATE_ONHIDE; 61         callback && (typeof callback == 'function') && callback(); 62     }, 63     //事件绑定 64     bindEvent: function () { 65         var events = this.events; 66         for(var k in events) { 67             var sec_type = k.replace(/\s/i, '').split(','); 68             var func = events[k]; 69             if(sec_type &&sec_type.length == 2 && typeof func == 'function') { 70                 var selector = sec_type[0]; 71                 var type = sec_type[1]; 72                 var scope = this; 73                 this.find(selector).on(type, function () { 74                     func.call(scope, $(this)); 75                 }) 76             } 77         } 78     }, 79     //此处可以配合模板与相关参数组成html 80     //解析模板也放到此处 81     createHtml: function () { 82         throw new Error('请重新定义createHtml方法'); 83     }, 84     initRoot: function () { 85         var attr = this.attrs; 86         if(!attr) { 87             return; 88         } 89         for(var k in attr) { 90             if(k == 'className') { 91                 this.root.attr('class', attr[k]); 92             }else { 93                 this.root.attr(k, attr[k]); 94             } 95         } 96        this.root.attr('id', this.id); 97     }, 98     //触发事件 99     trigger: function (k, args) {100         var event = this[k];101         args = args || [];102         if(event && typeof event == 'function') {103             event.apply(this, args)104         }105     },106     setRootBox: function (dom) {107         this.rootBox = dom;108     },109     setAttr: function (k, v) {110         this.root.attr(k, v);111     },112     getAttr: function (k) {113         return this.root.attr(k);114     },115     setCss: function (k, v) {116         this.root.css(k, v);117     },118     getCss: function (k) {119         return this.root.css(k);120     },121     //dom创建后执行122     onCreate: function () {123 124     },125     //dom创建后数据加载时执行，用于加载后执行我们的逻辑126     onLoad: function () {127 128     },129     //dom创建后，未显示130     onShow: function () {131 132     },133     //dom隐藏前134     onHide: function () {135 136     }137 });138 139 //组件状态,未创建140 b.AbstractView.STATE_NOTCREATE = 'notCreate';141 //组件状态,已创建但未显示142 b.AbstractView.STATE_ONCREATE = 'onCreate';143 //组件状态,已显示144 b.AbstractView.STATE_ONSHOW = 'onShow';145 //组件状态,已隐藏146 b.AbstractView.STATE_ONHIDE = 'onHide';

代码注释写的很详细了，我这里就不多说了，我们来用一个例子试一试：

 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4     <meta charset="utf-8" /> 5     <title></title> 6     <script src="res/libs/jquery.js" type="text/javascript"></script> 7     <script src="res/test/c.base.js" type="text/javascript"></script> 8 </head> 9 <body>10 11 </body>12 <script type="text/javascript">13     var PageView = b.Class(b.AbstractView, {14         _propertys_: function () {15             this.template = '我是叶小钗';16         },17         init: function (superInit) {18             console.log(superInit);19             console.log('init');20         },21         createHtml: function () {22             var htm = [23             '<header>标题</header>',24             '<div class="main">',25                 '<input type="text" id="txt" />',26                 '<input type="button" id="bt" value="点击我" />',27                 this.template,28             '</div>',29             '<footer>页尾</footer>'30             ].join('');31             return htm;32         },33         attrs: {34             'data-id': 'test',35             className: 'yexiaoc'36         },37         events: {38             '#bt,click': function (el) {39                 var txt = this.find('#txt');40                 alert(txt.val())41             }42         },43         onCreate: function () {44             console.log('onCreate');45         },46         //dom创建后数据加载时执行，用于加载后执行我们的逻辑47         onLoad: function () {48             console.log('onLoad');49         },50         //dom创建后，未显示51         onShow: function () {52             console.log('onShow');53         },54         //dom隐藏前55         onHide: function () {56             console.log('onHide');57         }58     });59     var view = new PageView();60     view.show();61     var s = '';62 </script>63 </html>

初步实现我们的期望

结语

好了，今天暂时到这里，我们明天继续，希望明天能做完！