【單頁應用】一起來單頁應用吧，實現簡單微博功能！（上）

前言

北上是大城市，魔都這里的節奏確實比成都快得多，在成都老夫一般走的最晚，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>

初步實現我們的期望

結語

好了，今天暫時到這里，我們明天繼續，希望明天能做完！