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

前言

PS：回家發現代碼沒拷貝回來，明天繼續吧。。。

開始之前先扯點其它的，我上午去理發，居然才7元，但是那個阿媽給我搞成和尚的造型了，我想說點什么，但轉念一想節約點洗頭水也好！！！

PS：其實主要原因是我掉頭發。。。。。。

好了，接昨天的內容：【單頁應用】一起來單頁應用吧，實現簡單微博功能！（上）

昨天我們一起准備了兩大核心，繼承與view，雖說有問題，而且必定有問題，但是我們暫時不管他。

我們先繼續先往下面寫，到最后整體流程拉通后再一起優化就好，現在去糾結也不一定有結果，於是我們開始吧。

繼承之實現APP

我們這里APP要干的事情，與其說擔任MVC中控制器的角色，不如說他就是充當了一下路由選擇的角色，根據不同的URL導向不同的view，並且會管理hash。

由於我們會處理request請求，壓入hash以達到后退功能有效，所以這里先來實現一個hash類吧

實現Hash對象

先來一個輔助函數，用於計算某個字符在數組的位置：

var indexOf = function (k, arr) {
    if (!arr) {
        return -1;
    }
    //若是對象本身便居然indexof，便使用自身的，比如字符串
    if (arr.indexOf) {
        return arr.indexOf(k);
    }
    for (var i = 0, len = arr.length; i < len; i++) {
        if (arr[i] == k) {
            return i;
        }
    }
    return -1;
};

PS：這個hash的實現不算太好，后面也許會改動

b.Hash = b.Class({
    _propertys_: function () {
        this.keys = [];
        this.values = [];
    },
    init: function (obj) {
        (typeof obj == 'object') || (obj = {}); //???
        for (var k in obj) {
            if (obj.hasOwnProperty(k)) {
                this.keys.push(k);
                this.values.push(obj[k]);
            }
        }
    },
    length: function () {
        return this.keys.length;
    },
    getItem: function (k) {
        var index = indexOf(k, this.keys);
        if (index < 0) {
            return null;
        }
        return this.keys[index];
    },
    getKey: function (i) {
        return this.keys[i];
    },
    getValue: function (i) {
        return this.values[i];
    },
    add: function (k, v) {
        return this.push(k, v);
    },
    del: function (k) {
        var index = indexOf(k, this.keys);
        return this.delByIndex(index);
    },
    delByIndex: function (index) {
        if (index < 0) return this;
        this.keys.splice(index, 1);
        this.vaules.splice(index, 1);
        return this;
    },
    //移除棧頂hash，並返回
    pop: function () {
        if (!this.keys.length) return null;
        this.keys.pop();
        return this.values.pop();
    },
    push: function (k, v, order) {
        if (typeof k == 'object' && !v) {
            for (var i in k) {
                if (k.hasOwnProperty(i)) {
                    this.push(i, k[i], order);
                }
            }
        } else {
            var index = indexOf(k, this.keys);
            if (index < 0 || order) {
                if (order) this.del(k);
                this.keys.push[k];
                this.values.push[v];
            } else {
                this.values[index] = v;
            }
        }
    },
    //查找hash表，返回key
    indexOf: function (v) {
        var index = indexOf(v, this.vaules);
        if (index >= 0) {
            return this.keys[index];
        }
        return -1;
    },
    each: function (handler) {
        if (typeof handler == 'function') {
            for (var i = 0, len = this.length(); i < len; i++) {
                handler.call(this, this.keys[i], this.vaules[i]);
            }
        }
    },
    getObj: function () {
        var obj = {};
        for (var i = 0, len = this.length(); i < len; i++) {
            obj[this.keys[i]] = this.values[i];
        }
        return obj;
    }
});

此hash對象基本就是數組的寫照，各位可以對照着看，於是我們繼續我們的app

app雛形

var Application = new b.Class({
    _propertys_: function () {
        var scope = this;
        this.webRoot = ''; //應用跟目錄
        this.head = $('head');
        this.body = $('body');
        this.viewRoot = 'views/'; //視圖所在目錄
        this.defaultView = 'index'; //默認加載視圖

        this.request; //請求對象
        this.viewPath; //當前請求視圖路徑，解析request得出
        this.mainFrame; //主框架
        this.viewPort; //視圖框架
        this.stateDom; //狀態欄

        this.views = new b.Hash(); //views保存瀏覽器存儲的hash
        this.curView; //當前視圖
        this.interface = {}; //提供給視圖訪問的接口，暫時不管
        this.history = []; //歷史記錄

        //        this.stopListening = false;//是否開啟監聽

        this.onHashChange = function () {
            scope.history.push(window.location.href);
            var url = decodeURIComponent(window.location.hash.replace(/^#+/i, '')).toLowerCase();
            scope._onHashChange(url);
        };

        this.lastHash = '';
        this.lastFullHash = '';
        this.isChangeHash = false; //hash是否發生變化
    },
    init: function (opts) {
        //為屬性賦值
        opts = opts || {};
        for (var k in opts) {
            this[k] = opts[k];
        }
        this.createViewPort();
        this.bindEvent(); //事件綁定
    },

    //創建app頁面基本框架，此處不能使用id，因為。。。
    createViewPort: function () {
        var htm = [
            '<div class="main-frame">',
                '<div class="main-viewport"></div>',
                '<div class="main-state"></div>',
            '</div>'
        ].join('');
        this.mainframe = $(htm);

        this.viewport = this.mainframe.find('.main-viewport');
        this.statedom = this.mainframe.find('.main-state');
        var body = $('body');
        body.html('');
        body.append(this.mainframe);
    },
    //！！！！！！非常重要哦！！！！！！
    bindEvent: function () {
        var scope = this;
        //暫時不使用requireJS
        //        requirejs.onError = function () {};
        $(window).bind('hashchange', this.onHashChange);
    },
    _onHashChange: function (url) {
        url = url.replace(/^#+/i, '');
        var req = this.parseHash(url);

        this.request = req;
        this.viewPath = this.viewPath || this.defaultView;
        this.loadView(this.viewPath); //！！！重要的視圖加載
    },
    //該方法慢慢看吧。。。
    parseHash: function (hash) {
        var fullhash = hash,
                hash = hash.replace(/([^\|]*)(?:\|.*)?$/img, '$1'),
                h = /^([^?&|]*)(.*)?$/i.exec(hash),
                vp = h[1] ? h[1].split('!') : [],
                viewpath = (vp.shift() || '').replace(/(^\/+|\/+$)/i, ''),
                path = vp.length ? vp.join('!').replace(/(^\/+|\/+$)/i, '').split('/') : [],
                q = (h[2] || '').replace(/^\?*/i, '').split('&'),
                query = {}, y;
        this.isChangeHash = !!(!this.lastHash && fullhash === this.lashFullHash) || !!(this.lastHash && this.lastHash !== hash);
        if (q) {
            for (var i = 0; i < q.length; i++) {
                if (q[i]) {
                    y = q[i].split('=');
                    y[1] ? (query[y[0]] = y[1]) : (query[y[0]] = true);
                }
            }
        }

        this.lastHash = hash;
        this.lashFullHash = fullhash;
        return {
            viewpath: viewpath,
            path: path,
            query: query,
            root: location.pathname + location.search
        };
    },
    //!!!非常重要
    loadView: function (viewPath) {
        var id = viewPath;
        var scope = this;
        //此處本來應該判斷是否已經有該視圖，但是我們暫時不管，我們只要加載了相關視圖就算成功
        /*
        一些操作
        */

        //此處應該加載我們的js文件
        $.getScript(this.buildUrl(viewPath), function () {
            var view = new PageView();
            view.show();
            scope.viewport.append(curView.$el);
            var s = ''; 
        });
        //！！！暫時不使用requireJS
        //        var self = this;
        //        requirejs([this.buildUrl(path)], function (View) {
        //            callback && callback.call(self, View);
        //        });
    },
    buildUrl: function (path) {
        return this.viewRoot = path;
    }
});

好了，至此，我們粗制濫造版app結束，我們來試試先，再一並講解其主要流程。

簡單測試

html代碼：

<!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 src="res/test/app.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = new Application();

</script>
</html>

base代碼：

/// <reference path="../libs/underscore.js" />

/// <reference path="../libs/jquery.js" />

/// <reference path="../libs/require.js" />

/// <reference path="../libs/require.text.js" />




var b = {};//base
var slice = [].slice;
var indexOf = function (k, arr) {
    if (!arr) {
        return -1;
    }
    //若是對象本身便居然indexof，便使用自身的，比如字符串
    if (arr.indexOf) {
        return arr.indexOf(k);
    }
    for (var i = 0, len = arr.length; i < len; i++) {
        if (arr[i] == k) {
            return i;
        }
    }
    return -1;
};

b.Class = function (supClass, childAttr) {
    //若是傳了第一個類，便繼承之；否則實現新類
    if (typeof supClass === 'object') {
        childAttr = supClass;
        supClass = function () { };
    }

    //    var supProto = supClass.prototype;
    var newClass = function () {
        this._propertys_ && this._propertys_();
        this.init && 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;
};

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';

b.Hash = b.Class({
    _propertys_: function () {
        this.keys = [];
        this.values = [];
    },
    init: function (obj) {
        (typeof obj == 'object') || (obj = {}); //???
        for (var k in obj) {
            if (obj.hasOwnProperty(k)) {
                this.keys.push(k);
                this.values.push(obj[k]);
            }
        }
    },
    length: function () {
        return this.keys.length;
    },
    getItem: function (k) {
        var index = indexOf(k, this.keys);
        if (index < 0) {
            return null;
        }
        return this.keys[index];
    },
    getKey: function (i) {
        return this.keys[i];
    },
    getValue: function (i) {
        return this.values[i];
    },
    add: function (k, v) {
        return this.push(k, v);
    },
    del: function (k) {
        var index = indexOf(k, this.keys);
        return this.delByIndex(index);
    },
    delByIndex: function (index) {
        if (index < 0) return this;
        this.keys.splice(index, 1);
        this.vaules.splice(index, 1);
        return this;
    },
    //移除棧頂hash，並返回
    pop: function () {
        if (!this.keys.length) return null;
        this.keys.pop();
        return this.values.pop();
    },
    push: function (k, v, order) {
        if (typeof k == 'object' && !v) {
            for (var i in k) {
                if (k.hasOwnProperty(i)) {
                    this.push(i, k[i], order);
                }
            }
        } else {
            var index = indexOf(k, this.keys);
            if (index < 0 || order) {
                if (order) this.del(k);
                this.keys.push[k];
                this.values.push[v];
            } else {
                this.values[index] = v;
            }
        }
    },
    //查找hash表，返回key
    indexOf: function (v) {
        var index = indexOf(v, this.vaules);
        if (index >= 0) {
            return this.keys[index];
        }
        return -1;
    },
    each: function (handler) {
        if (typeof handler == 'function') {
            for (var i = 0, len = this.length(); i < len; i++) {
                handler.call(this, this.keys[i], this.vaules[i]);
            }
        }
    },
    getObj: function () {
        var obj = {};
        for (var i = 0, len = this.length(); i < len; i++) {
            obj[this.keys[i]] = this.values[i];
        }
        return obj;
    }
});

app代碼：

/// <reference path="../libs/underscore.js" />

/// <reference path="../libs/jquery.js" />

/// <reference path="../libs/require.js" />

/// <reference path="../libs/require.text.js" />



var Application = new b.Class({
    _propertys_: function () {
        var scope = this;
        this.webRoot = ''; //應用跟目錄
        this.head = $('head');
        this.body = $('body');
        this.viewRoot = 'res/test/'; //視圖所在目錄
        this.defaultView = 'index'; //默認加載視圖

        this.request; //請求對象
        this.viewPath; //當前請求視圖路徑，解析request得出
        this.mainFrame; //主框架
        this.viewPort; //視圖框架
        this.stateDom; //狀態欄

        this.views = new b.Hash(); //views保存瀏覽器存儲的hash
        this.curView; //當前視圖
        this.interface = {}; //提供給視圖訪問的接口，暫時不管
        this.history = []; //歷史記錄

        //        this.stopListening = false;//是否開啟監聽

        this.onHashChange = function () {
            scope.history.push(window.location.href);
            var url = decodeURIComponent(window.location.hash.replace(/^#+/i, '')).toLowerCase();
            scope._onHashChange(url);
        };

        this.lastHash = '';
        this.lastFullHash = '';
        this.isChangeHash = false; //hash是否發生變化
    },
    init: function (opts) {
        console.log('app init');
        //為屬性賦值
        opts = opts || {};
        for (var k in opts) {
            this[k] = opts[k];
        }
        this.createViewPort();
        this.bindEvent(); //事件綁定
    },

    //創建app頁面基本框架，此處不能使用id，因為。。。
    createViewPort: function () {
        var htm = [
            '<div class="main-frame">',
                '<div class="main-viewport"></div>',
                '<div class="main-state"></div>',
            '</div>'
        ].join('');
        this.mainframe = $(htm);
        this.viewport = this.mainframe.find('.main-viewport');
        this.statedom = this.mainframe.find('.main-state');
        var body = $('body');
        body.html('');
        body.append(this.mainframe);
    },
    //！！！！！！非常重要哦！！！！！！
    bindEvent: function () {
        var scope = this;
        //暫時不使用requireJS
        //        requirejs.onError = function () {};
        $(window).bind('hashchange', this.onHashChange);
    },
    _onHashChange: function (url) {
        url = url.replace(/^#+/i, '');
        var req = this.parseHash(url);

        this.request = req;
        this.viewPath = this.viewPath || this.defaultView;
        this.loadView(this.viewPath); //！！！重要的視圖加載
    },
    //該方法慢慢看吧。。。
    parseHash: function (hash) {
        var fullhash = hash,
                hash = hash.replace(/([^\|]*)(?:\|.*)?$/img, '$1'),
                h = /^([^?&|]*)(.*)?$/i.exec(hash),
                vp = h[1] ? h[1].split('!') : [],
                viewpath = (vp.shift() || '').replace(/(^\/+|\/+$)/i, ''),
                path = vp.length ? vp.join('!').replace(/(^\/+|\/+$)/i, '').split('/') : [],
                q = (h[2] || '').replace(/^\?*/i, '').split('&'),
                query = {}, y;
        this.isChangeHash = !!(!this.lastHash && fullhash === this.lashFullHash) || !!(this.lastHash && this.lastHash !== hash);
        if (q) {
            for (var i = 0; i < q.length; i++) {
                if (q[i]) {
                    y = q[i].split('=');
                    y[1] ? (query[y[0]] = y[1]) : (query[y[0]] = true);
                }
            }
        }

        this.lastHash = hash;
        this.lashFullHash = fullhash;
        return {
            viewpath: viewpath,
            path: path,
            query: query,
            root: location.pathname + location.search
        };
    },
    //!!!非常重要
    loadView: function (viewPath) {
        var id = viewPath;
        var scope = this;
        //此處本來應該判斷是否已經有該視圖，但是我們暫時不管，我們只要加載了相關視圖就算成功
        /*
        一些操作
        */

        var path = this.buildUrl(viewPath);

        //此處應該加載我們的js文件
        $.getScript(this.buildUrl(viewPath) + '.js', function () {
            var view = new PageView();
            view.show();
            scope.viewport.append(view.root);
            var s = '';
        });
        //！！！暫時不使用requireJS
        //        var self = this;
        //        requirejs([this.buildUrl(path)], function (View) {
        //            callback && callback.call(self, View);
        //        });
    },
    buildUrl: function (path) {
        return this.viewRoot + path;
    }
});

文件結構：

測試結果

我可恥的覺得自己成功了一半了。。。

基本流程講解

app是我們整個框架的核心，我們來簡單講解一下：

① 在整個_propertys_函數中，定義了我們app會用到的一些實例屬性、方法

② init方法（一定會執行，因為我們使用了c.base的方法創建類），他主要干了兩件事：

創建基本dom結構；

綁定事件，這個綁定事件就非常重要了

③ 59行開始，便是該文件的核心之一，這里為window綁定了hashchange事件，於是hash一旦改變（以#號方式），那么就會觸發onhashchange事件

④ 觸發hashchange事件后，會獲得請求url#后面的參數，根據約定，他就是我們請求的view的路徑，所以開始執行loadView方法，開始加載視圖

⑤ 102行，開始加載視圖，這里本應該使用requireJS，但是這里便於講解，便於各位理解，我們暫時沒有使用，於是動態加載我們的index文件，在成功后實例化view並且將view裝入我們的視口中。

⑥ 整體流程結束

於是我們的粗制濫造版本也結束了。

階段總結

好了，我們現在回過頭來看看我們整個框架現在變成什么樣了。

① 我們擁有實現類的通用b.class

② 我們有了我們的抽象視圖類

③ 我們有了我們的control application

假使以上流程都流程問題不大，那么我們整個功能其實就七七八八了，因為還差的model可以輕松補上。

但是明顯我們現在的APP是有缺陷的，而且缺陷比較大，比如我們的hash相關其實根本沒有用上，所以現在我們來完善他們吧！

RequireJS組織代碼

在這里，我們便開始使用我們的RequireJS了，然后將我們的整個邏輯慢慢鋪開，首先我將我們的文件目錄分開。

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

window.BASEURL = '';
require.config({
    baseUrl: BASEURL,
    shim: {
        $: {
            exports: 'jQuery'
        },
        _: {
            exports: '_'
        }
    },
    paths: {
        '$': 'res/libs/jquery',
        '_': 'res/libs/underscore',
        'text': 'res/libs/require.text',

        'c': 'res/common/c',
        'cBase': 'res/common/c.base',
        'cView': 'res/common/c.view',
        'app': 'res/app',


        's': 's'
    }
});

require(['app'], function (APP) {
    new APP();
});

define(['$', 'c'], function ($, c) {
    
    var Application = new c.base.Class({
        _propertys_: function () {
            var scope = this;
            this.webRoot = ''; //應用跟目錄
            this.head = $('head');
            this.body = $('body');
            this.viewRoot = 'views/'; //視圖所在目錄
            this.defaultView = 'index'; //默認加載視圖

            this.request; //請求對象
            this.viewPath; //當前請求視圖路徑，解析request得出
            this.mainFrame; //主框架
            this.viewPort; //視圖框架
            this.stateDom; //狀態欄

            this.views = new c.base.Hash(); //views保存瀏覽器存儲的hash
            this.curView; //當前視圖
            this.interface = {}; //提供給視圖訪問的接口，暫時不管
            this.history = []; //歷史記錄

            //        this.stopListening = false;//是否開啟監聽

            this.onHashChange = function () {
                scope.history.push(window.location.href);
                var url = decodeURIComponent(window.location.hash.replace(/^#+/i, '')).toLowerCase();
                scope._onHashChange(url);
            };

            this.lastHash = '';
            this.lastFullHash = '';
            this.isChangeHash = false; //hash是否發生變化
        },
        init: function (opts) {
            console.log('app init');
            //為屬性賦值
            opts = opts || {};
            for (var k in opts) {
                this[k] = opts[k];
            }
            this.createViewPort();
            this.bindEvent(); //事件綁定
        },

        //創建app頁面基本框架，此處不能使用id，因為。。。
        createViewPort: function () {
            var htm = [
            '<div class="main-frame">',
                '<div class="main-viewport"></div>',
                '<div class="main-state"></div>',
            '</div>'
        ].join('');
            this.mainframe = $(htm);
            this.viewport = this.mainframe.find('.main-viewport');
            this.statedom = this.mainframe.find('.main-state');
            var body = $('body');
            body.html('');
            body.append(this.mainframe);
        },
        //！！！！！！非常重要哦！！！！！！
        bindEvent: function () {
            var scope = this;
            requirejs.onError = function (e) {
                if (e && e.requireModules) {
                    for (var i = 0; i < e.requireModules.length; i++) {
                        console.error((e.requireModules[i] || '').replace(self.viewRootPath, '') + '頁面不存在!');
                    }
                }
            };

            $(window).bind('hashchange', this.onHashChange);
        },
        _onHashChange: function (url) {
            url = url.replace(/^#+/i, '');
            var req = this.parseHash(url);

            this.request = req;
            this.viewPath = this.viewPath || this.defaultView;
            this.loadView(this.viewPath); //！！！重要的視圖加載
        },
        //該方法慢慢看吧。。。
        parseHash: function (hash) {
            var fullhash = hash,
                hash = hash.replace(/([^\|]*)(?:\|.*)?$/img, '$1'),
                h = /^([^?&|]*)(.*)?$/i.exec(hash),
                vp = h[1] ? h[1].split('!') : [],
                viewpath = (vp.shift() || '').replace(/(^\/+|\/+$)/i, ''),
                path = vp.length ? vp.join('!').replace(/(^\/+|\/+$)/i, '').split('/') : [],
                q = (h[2] || '').replace(/^\?*/i, '').split('&'),
                query = {}, y;
            this.isChangeHash = !!(!this.lastHash && fullhash === this.lashFullHash) || !!(this.lastHash && this.lastHash !== hash);
            if (q) {
                for (var i = 0; i < q.length; i++) {
                    if (q[i]) {
                        y = q[i].split('=');
                        y[1] ? (query[y[0]] = y[1]) : (query[y[0]] = true);
                    }
                }
            }

            this.lastHash = hash;
            this.lashFullHash = fullhash;
            return {
                viewpath: viewpath,
                path: path,
                query: query,
                root: location.pathname + location.search
            };
        },
        //!!!非常重要
        loadView: function (viewPath) {
            var id = viewPath;
            var scope = this;
            var path = this.buildUrl(viewPath);

            requirejs([path], function (View) {
                var view = new View();
                view.show();
                scope.viewport.append(view.root);
                var s = '';
            });
        },
        buildUrl: function (path) {
            return this.viewRoot + path;
        }
    });

    return Application;
});

define(['cBase', 'cView'], function (base, view) {
    var c = {
        base: base,
        view: view
    };

    return c;
});

define([], function () {

    var base = {}; //base
    var slice = [].slice;
    var indexOf = function (k, arr) {
        if (!arr) {
            return -1;
        }
        //若是對象本身便居然indexof，便使用自身的，比如字符串
        if (arr.indexOf) {
            return arr.indexOf(k);
        }
        for (var i = 0, len = arr.length; i < len; i++) {
            if (arr[i] == k) {
                return i;
            }
        }
        return -1;
    };

    base.Class = function (supClass, childAttr) {
        //若是傳了第一個類，便繼承之；否則實現新類
        if (typeof supClass === 'object') {
            childAttr = supClass;
            supClass = function () { };
        }

        //    var supProto = supClass.prototype;
        var newClass = function () {
            this._propertys_ && this._propertys_();
            this.init && 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;
    };
    
    base.Hash = base.Class({
        _propertys_: function () {
            this.keys = [];
            this.values = [];
        },
        init: function (obj) {
            (typeof obj == 'object') || (obj = {}); //???
            for (var k in obj) {
                if (obj.hasOwnProperty(k)) {
                    this.keys.push(k);
                    this.values.push(obj[k]);
                }
            }
        },
        length: function () {
            return this.keys.length;
        },
        getItem: function (k) {
            var index = indexOf(k, this.keys);
            if (index < 0) {
                return null;
            }
            return this.keys[index];
        },
        getKey: function (i) {
            return this.keys[i];
        },
        getValue: function (i) {
            return this.values[i];
        },
        add: function (k, v) {
            return this.push(k, v);
        },
        del: function (k) {
            var index = indexOf(k, this.keys);
            return this.delByIndex(index);
        },
        delByIndex: function (index) {
            if (index < 0) return this;
            this.keys.splice(index, 1);
            this.vaules.splice(index, 1);
            return this;
        },
        //移除棧頂hash，並返回
        pop: function () {
            if (!this.keys.length) return null;
            this.keys.pop();
            return this.values.pop();
        },
        push: function (k, v, order) {
            if (typeof k == 'object' && !v) {
                for (var i in k) {
                    if (k.hasOwnProperty(i)) {
                        this.push(i, k[i], order);
                    }
                }
            } else {
                var index = indexOf(k, this.keys);
                if (index < 0 || order) {
                    if (order) this.del(k);
                    this.keys.push[k];
                    this.values.push[v];
                } else {
                    this.values[index] = v;
                }
            }
        },
        //查找hash表，返回key
        indexOf: function (v) {
            var index = indexOf(v, this.vaules);
            if (index >= 0) {
                return this.keys[index];
            }
            return -1;
        },
        each: function (handler) {
            if (typeof handler == 'function') {
                for (var i = 0, len = this.length(); i < len; i++) {
                    handler.call(this, this.keys[i], this.vaules[i]);
                }
            }
        },
        getObj: function () {
            var obj = {};
            for (var i = 0, len = this.length(); i < len; i++) {
                obj[this.keys[i]] = this.values[i];
            }
            return obj;
        }
    });

    return base;

});

define(['$', 'cBase'], function ($, b) {

    var 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 = 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 != 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 = AbstractView.STATE_ONCREATE;
                this.isCreated = true;
                this.bindEvent();
            }
        },
        //呈現/渲染視圖
        show: function (callback) {
            if (this.status == AbstractView.STATE_ONSHOW) {
                return;
            }
            this.create();
            this.root.show();
            this.trigger('onShow');
            this.status = AbstractView.STATE_ONSHOW
            callback && (typeof callback == 'function') && callback.call(this);
            this.trigger('onLoad');
        },
        //隱藏dom
        hide: function (callback) {
            if (!this.root || this.status == AbstractView.STATE_ONHIDE) {
                return;
            }
            this.root.hide();
            this.trigger('onHide');
            this.status = 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 () {

        }
    });

    //組件狀態,未創建
    AbstractView.STATE_NOTCREATE = 'notCreate';
    //組件狀態,已創建但未顯示
    AbstractView.STATE_ONCREATE = 'onCreate';
    //組件狀態,已顯示
    AbstractView.STATE_ONSHOW = 'onShow';
    //組件狀態,已隱藏
    AbstractView.STATE_ONHIDE = 'onHide';

    return AbstractView;

});

define(['$', 'cBase', 'cView'], function ($, b, AbstractView) {
    var View = b.Class(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');
        }
    });

    return View;
});

至此我們的代碼便完全分離開了，接下來我們來細化我們的app文件。

細化app

待續......

 

結語

寫了幾個小時了，有點累，休息下，我們晚上在繼續