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

前言

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

待续......

结语

写了几个小时了，有点累，休息下，我们晚上在继续