实现简单微博功能！（上）

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

前言

北上是大城市，魔都这里的节奏确实比成都快得多，在成都老夫一般走的最晚，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：暂时这个样子吧，我们边写边改，看最后能做到什么样子，这里还是画个图

 

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

基础实现之继承

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

var b = {};//base
var slice = [].slice;

b.Class = function (supClass, childAttr) {
    //若是传了第一个类，便继承之；否则实现新类
    if (typeof supClass === 'object') {
        childAttr = supClass;
        supClass = function () { };
    }

    //定义我们创建的类
    var newClass = function () {
        this._propertys_();
        this.init.apply(this, arguments);
    };
    newClass.prototype = new supClass();

    var supInit = newClass.prototype.init || function () { };
    var childInit = childAttr.init || function () { };
    var _supAttr = newClass.prototype._propertys_ || function () { };
    var _childAttr = childAttr._propertys_ || function () { };

    for (var k in childAttr) {
        //_propertys_中作为私有属性
        childAttr.hasOwnProperty(k) && (newClass.prototype[k] = childAttr[k]);
    }

    //继承的属性有可能重写init方法
    if (arguments.length && arguments[0].prototype && arguments[0].prototype.init === supInit) {
        //重写新建类，初始化方法，传入其继承类的init方法
        newClass.prototype.init = function () {
            var scope = this;
            var args = [function () {
                supInit.apply(scope, arguments);
            } ];
            childInit.apply(scope, args.concat(slice.call(arguments)));
        };
    }

    //内部属性赋值
    newClass.prototype._propertys_ = function () {
        _supAttr.call(this);
        _childAttr.call(this);
    };

    //成员属性
    for (var k in supClass) {
        supClass.hasOwnProperty(k) && (newClass[k] = supClass[k]);
    }
    return newClass;
};

代码还是很好理解的：

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（鸭）

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

var Bird = new b.Class({
    //作为自身属性将被调用，里面必须采用this.XX的方式书写
    _propertys_: function () {
        this.name = '鸟类';
        this.age = 0;
    },
    //一定会被执行的初始化方法
    init: function () {
        alert('一定会执行');
    },
    //原型方法
    breathe: function () {
        alert('我能呼吸');
    }
});

var b = new Bird({des: '测试init方法是否能捕获参数'});

var s = '';

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

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

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

var Chicken = new b.Class(Bird, {
    _propertys_: function () {
        this.sex = '公';
    },
    //一定会被执行的初始化方法
    init: function () {
        alert('我是一只鸡');
    },
    //原型方法
    howl: function () {
        alert('我能打鸣');
    }
});

这里，父类的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应该统一继承一个父类，于是我们来尝试性试试吧

第一版

b.AbstractView = b.Class({
    //基本view应该具有的属性
    _propertys_: function () {
        this.id = (new Date()).getTime(); //唯一pageID
        this.rootBox = $('body'); //视图容器
        this.root = $('<div/>'); //视图的根元素，可进行设置
        this.header = null;
        this.footer = null;
        this.template = '';//可能的模板
        this.isCreated = false;//是否创建完毕
        this.status = b.AbstractView.STATE_NOTCREATE;//当前状态
    },
    init: function () {
    },
    //定义将要用到的事件，其中元素选取都会以root为标准，所以使用内部提供函数吧
    events: {
        'selector,eventType': 'func'
    },
    //默认属性
    attrs: {
    },
    //获取视图元素
    find: function (selector) {
        return this.root.find(selector);
    }, 
    //创建dom
    create: function (opts) {
        if(!this.isCreated && this.status != b.AbstractView.STATE_ONCREATE) {
            var attr = opts && opts.attr;
            var html = this.createHtml();
            this.initRoot(attr);//初始化root
            this.hide();
            this.rootBox.append(this.root);
            this.root.html(html);
            this.trigger('onCreate');//触发正在创建事件，其实这里都创建完了
            this.status = b.AbstractView.STATE_ONCREATE;
            this.isCreated = true;
            this.bindEvent();
        }
    },
    //呈现/渲染视图
    show: function (callback) {
        if(this.status == b.AbstractView.STATE_ONSHOW) {
            return;
        }
        this.create();
        this.root.show();
        this.trigger('onShow');
        this.status = b.AbstractView.STATE_ONSHOW
        callback && (typeof callback == 'function') && callback.call(this);
        this.trigger('onLoad');
    },
    //隐藏dom
    hide: function (callback) {
        if(!this.root || this.status == b.AbstractView.STATE_ONHIDE) {
            return;
        }
        this.root.hide();
        this.trigger('onHide');
        this.status = b.AbstractView.STATE_ONHIDE;
        callback && (typeof callback == 'function') && callback();
    },
    //事件绑定
    bindEvent: function () {
        var events = this.events;
        for(var k in events) {
            var sec_type = k.replace(/s/i, '').split(',');
            var func = events[k];
            if(sec_type &&sec_type.length == 2 && typeof func == 'function') {
                var selector = sec_type[0];
                var type = sec_type[1];
                var scope = this;
                this.find(selector).on(type, function () {
                    func.call(scope, $(this));
                })
            }
        }
    },
    //此处可以配合模板与相关参数组成html
    //解析模板也放到此处
    createHtml: function () {
        throw new Error('请重新定义createHtml方法');
    },
    initRoot: function () {
        var attr = this.attrs;
        if(!attr) {
            return;
        }
        for(var k in attr) {
            if(k == 'className') {
                this.root.attr('class', attr[k]);
            }else {
                this.root.attr(k, attr[k]);
            }
        }
       this.root.attr('id', this.id);
    },
    //触发事件
    trigger: function (k, args) {
        var event = this[k];
        args = args || [];
        if(event && typeof event == 'function') {
            event.apply(this, args)
        }
    },
    setRootBox: function (dom) {
        this.rootBox = dom;
    },
    setAttr: function (k, v) {
        this.root.attr(k, v);
    },
    getAttr: function (k) {
        return this.root.attr(k);
    },
    setCss: function (k, v) {
        this.root.css(k, v);
    },
    getCss: function (k) {
        return this.root.css(k);
    },
    //dom创建后执行
    onCreate: function () {

    },
    //dom创建后数据加载时执行，用于加载后执行我们的逻辑
    onLoad: function () {

    },
    //dom创建后，未显示
    onShow: function () {

    },
    //dom隐藏前
    onHide: function () {

    }
});

//组件状态,未创建
b.AbstractView.STATE_NOTCREATE = 'notCreate';
//组件状态,已创建但未显示
b.AbstractView.STATE_ONCREATE = 'onCreate';
//组件状态,已显示
b.AbstractView.STATE_ONSHOW = 'onShow';
//组件状态,已隐藏
b.AbstractView.STATE_ONHIDE = 'onHide';

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="res/libs/jquery.js" type="text/javascript"></script>
    <script src="res/test/c.base.js" type="text/javascript"></script>
</head>
<body>

</body>
<script type="text/javascript">
    var PageView = b.Class(b.AbstractView, {
        _propertys_: function () {
            this.template = '我是叶小钗';
        },
        init: function (superInit) {
            console.log(superInit);
            console.log('init');
        },
        createHtml: function () {
            var htm = [
            '<header>标题</header>',
            '<div class="main">',
                '<input type="text" id="txt" />',
                '<input type="button" id="bt" value="点击我" />',
                this.template,
            '</div>',
            '<footer>页尾</footer>'
            ].join('');
            return htm;
        },
        attrs: {
            'data-id': 'test',
            className: 'yexiaoc'
        },
        events: {
            '#bt,click': function (el) {
                var txt = this.find('#txt');
                alert(txt.val())
            }
        },
        onCreate: function () {
            console.log('onCreate');
        },
        //dom创建后数据加载时执行，用于加载后执行我们的逻辑
        onLoad: function () {
            console.log('onLoad');
        },
        //dom创建后，未显示
        onShow: function () {
            console.log('onShow');
        },
        //dom隐藏前
        onHide: function () {
            console.log('onHide');
        }
    });
    var view = new PageView();
    view.show();
    var s = '';
</script>
</html>

初步实现我们的期望

结语

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

 

分类: javascript, 移动开发

 

标签: 单页应用