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

前言

本来是说周末研究一下单页应用来着，先是想发出来可以监督自己学习下去，结果谁知道这个水很深，我连着就赔了一个周末进去，到尽头还没搞完。。。

这次这个框架并不是我一个字写出来的，而是参考了同事的框架，我师傅（http://www.cnblogs.com/aaronjs/）说得好：

传承总比再造好，于是便有了这次的demo，其实就是吸收精华啊！！！

到今天有了一个大概的样子，可以拿出来看看了。其中的Model与localstorege相关也加上了，但是暂时没有用得到的场景。

这个代码后面点应该会持续更新，到我认为比较合适的阶段就会放出来了。。。。 于是我们继续吧！

整体思路

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

依赖库

① 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 () { };
    }

    //定义我们创建的类12     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>

初步实现我们的期望

继承之实现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文件。

细化/清晰结构

现在来看看我们最后形成的结构：

我们现在来一层层剥离他。

唯一的一个页面demo

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

入口函数main

window.BASEURL = '';
window.VIEWS_PATH = 'views/';

function getViewPath(path) {
    return 'text!' + VIEWS_PATH + path + '.html';
}

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

        'c': 'app/common/c',
        'cBase': 'app/common/c.base',
        'cStorage': 'app/common/c.storage',
        'cStore': 'app/common/c.store',

        'cView': 'app/common/c.view',
        'app': 'app/app',


        's': 's'
    }
});

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

核心base/view

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;
        }
    });

    base.Date = new base.Class({
        init: function (d) {
            d = d ? new Date(d) : new Date();
            this.date = d;
        },
        //添加小时等自己扩展
        addDay: function (d) {
            d = d || 0;
            this.date.setDate(this.date.getDate() + d);
        },
        addSeconds: function (n) {
            n = n || 0;
            this.date.setSeconds(this.date.getSeconds() + n);
            return this;
        },
        getDate: function () {
            return this.date;
        },
        format: function (format) {
            typeof format != 'string' && (format = '');
            for (var k in this.MAPS) {
                format = this.MAPS[k].call(this, format, this.date, k);
            }
            return format;
        },
        MAPS: {
            D: function (str, date, k) {
                var d = date.getDate().toString();
                d.length < 2 && (d = '0' + d);
                return str.replace(new RegExp(k, 'mg'), d);
            },
            d: function (str, date, k) {
                return str.replace(new RegExp(k, 'mg'), date.getDate());
            },
            M: function (str, date, k) {
                var d = (date.getMonth() + 1).toString();
                d.length < 2 && (d = '0' + d);
                return str.replace(new RegExp(k, 'mg'), d);
            },
            m: function (str, date, k) {
                return str.replace(new RegExp(k, 'mg'), (date.getMonth() + 1));
            },
            Y: function (str, date, k) {
                return str.replace(new RegExp(k, 'mg'), date.getFullYear());
            },
            y: function (str, date, k) {
                return str.replace(new RegExp(k, 'mg'), date.getYear());
            },
            H: function (str, date, k) {
                var d = date.getHours().toString();
                d.length < 2 && (d = '0' + d);
                return str.replace(new RegExp(k, 'mg'), d);
            },
            h: function (str, date, k) {
                return str.replace(new RegExp(k, 'mg'), date.getHours());
            },
            I: function (str, date, k) {
                var d = date.getMinutes().toString();
                d.length < 2 && (d = '0' + d);
                return str.replace(new RegExp(k, 'mg'), d);
            },
            i: function (str, date, k) {
                return str.replace(new RegExp(k, 'mg'), date.getMinutes());
            }, 
            S: function (str, date, k) {
                var d = date.getSeconds().toString();
                d.length < 2 && (d = '0' + d);
                return str.replace(new RegExp(k, 'mg'), d);
            },
            s: function (str, date, k) {
                return str.replace(new RegExp(k, 'mg'), date.getSeconds());
            }
        }
    });

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


    var PageView = b.Class(AbstractView, {
        //基本view应该具有的属性
        _propertys_: function () {
            this.interface = {}; //app传递过来的接口
            this.request = {}; //请求的request对象
        },
        init: function (superInit, request, interface) {
            //初始化自身时会执行一次
            if(request && interface) {
                this.request = request
                this.interface = interface;
                for (var k in interface) {
                    var v = interface[k];
                    if (v && typeof v == 'function') {
                        this[k] = v;
                    }
                }
            }
        },
    });

    return {
        AbstractView: AbstractView,
        PageView: PageView
    };

});

路由/Control 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 = {
                forward: function (url) {
                    scope.forward.call(scope, url);
                },
                back: function (url) {
                    scope.back.call(scope, url);
                },
                setTitle: function (title) {
                    scope.setTitle.call(scope, title);
                }

            }; //提供给视图访问的接口，暂时不管
            this.history = []; //历史记录

            this.lastHash = '';
            this.lastFullHash = '';
            this.isChangeHash = false; //hash是否发生变化
            this.stopListening = false; //是否停止监听url变化，用于跳转时，停止监听
        },
        init: function (opts) {
            console.log('app init');
            //为属性赋值
            opts = opts || {};
            for (var k in opts) {
                this[k] = opts[k];
            }
            this.createViewPort();
            this.bindEvent(); //事件绑定
            //将页面导向初始页
            this.forward(this.defaultView);
        },
        forward: function (url, replace) {
            var scope = this;
            url = url.toLowerCase();
            this.stopListen();
            if (replace) {
                window.location.replace(('#' + url).replace(/^#+/, '#'));
            } else {
                window.location.href = ('#' + url).replace(/^#+/, '#');
            }
            scope.stopListening = false;
            this.onHashChange(url);
        },
        back: function (url) {
            var referrer = this.lastUrl();
            if (url && (!referrer || referrer.indexOf(url) == -1)) {
                window.location.hash = url;
            } else {
                window.history.back(); //???
            }
        },
        setTitle: function (title) {
            document.title = title;
        },
        lastUrl: function () {
            if (this.history.length < 2) {
                return document.referrer;
            } else {
                return this.history[this.history.length - 2];
            }
        },
        //创建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', function () {
                scope.onHashChange.call(scope);
            });
        },
        onHashChange: function (url) {
            this.history.push(window.location.href);
            //有时候会停止监听
            if (!this.stopListening) {
                url = url || decodeURIComponent(window.location.hash.replace(/^#+/i, '')).toLowerCase();
                url = url.replace(/^#+/i, '');
                this.request = this.parseHash(url);
                this.viewPath = this.request.viewpath || this.defaultView;

                this.swichView(this.viewPath); //！！！重要的视图加载
            }
        },
        swichView: function (viewPath) {
            //获得当前请求视图，可能已经存在
            var view = this.views.getItem[viewPath];
            var lastView, curView;
            //第一次必定为空
            if (!view) {
                //直接加载视图，执行方法会返回加载好的视图
                this.loadView(viewPath, function (View) {
                    //第一步判断当前是否具有视图，具有则需要进行切换操作，
                    //不具有则直接加载（判断当前视图是否存在）
                    if (this.curView) {
                        //设置隐藏的是最好访问的view
                        lastView = this.curView;
                        //                        this.views.each(function (k, v) {
                        //                            v.hide();
                        //                        });
                        this.lastView = lastView;
                        this.lastView.hide();
                    }
                    //开始加载新的view
                    this.curView = new View(this.request, this.interface);
                    curView = this.curView;
                    //将当前视图压入hash
                    this.views.push(viewPath, curView);
                    //呈现当前视图，并会调用onCreate与onShow事件与onLoad
                    this.curView.show();
                    this.viewPort.append(this.curView.root);
                    this.goTop();
                });
            } else {//第二次加载，当前view以及被加载过
                //若是当前视图存在（话说必须存在！！！）
                if (this.curView && this.curView != view) {
                    lastView = this.curView;
                    lastView.hide();
                    this.curView = view;
                    //将当前视图装入hash，并删除之前的
                    this.views.push(viewPath, view, true);
                    this.curView.show();
                    //                    this.viewPort.append(this.curView.root);
                    this.goTop();
                } else {
                    //若是视图没变，但是后面参数有变化
                    if (this.isChangeHash) {
                        this.curView.show();
                        this.goTop();
                    }
                }
            }
        },
        //!!!非常重要
        loadView: function (viewPath, callback) {
            var scope = this;
            var path = this.buildUrl(viewPath);
            requirejs([path], function (View) {
                callback && callback.call(scope, View);
            });
        },
        buildUrl: function (path) {
            return this.viewRoot + path;
        },
        stopListen: function () {
            this.stopListening = true;
        },
        //回到顶部
        goTop: function (sec) {
            sec = sec || 10;
            $('body,html').animate({ scrollTop: 0 }, sec);
        },
        //该方法慢慢看吧。。。
        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
            };
        }
    });

    return Application;
});

基本应用，视图与视图模板

define(['$', '_', 'cBase', 'cView', getViewPath('index')], function ($, _, b, v, html) {
    var View = b.Class(v.PageView, {
        _propertys_: function () {
            this.template = html;
            this.url = 'http://wcf.open.cnblogs.com/blog/sitehome/recent/10'; //获取首页文章
        },
        init: function (superInit, request, interface) {
            superInit(request, interface);
            console.log('init');
        },
        createHtml: function () {
            return this.template;
        },
        attrs: {
            'data-id': 'test',
            className: 'yexiaoc'
        },
        events: {
        },
        onCreate: function () {
            console.log('onCreate');
        },
        //dom创建后数据加载时执行，用于加载后执行我们的逻辑
        onLoad: function () {
            console.log('onLoad');
            $.get(this.url, function (data) {

                var s = '';
            });
        },
        //dom创建后，未显示
        onShow: function () {
            console.log('onShow');
        },
        //dom隐藏前
        onHide: function () {
            console.log('onHide');
        }
    });

    return View;
});

<input class="login" type="button" value="点击登录" />
<header>
    <b class="icon_home i_bef" id="js_home"></b>
    <h1>
        博客园</h1>
    <i id="js_return" class="returnico"></i>
</header>
<section class="cont_wrap" style="margin: 17px 0 40px;">
    <ul class="pro_list" id="lstbox">
        <li class="arr_r">
            <figure class="pro_list_imgbox">
                <img src="http://images4.c-ctrip.com/target/hotel/49000/48952/70EB0AADE33644F2B410D4F3CCE9E298_130_130.Jpg" />
                <figcaption class="figcaption">
                    <i>上季热卖</i><span>已售2222份</span>
                </figcaption>
            </figure>
            <div class="pro_list_info">
                <h4 class="pro_list_tit">
                    上海西郊宾馆上海西郊宾馆上海西郊宾馆上海西郊宾馆上海西郊宾馆</h4>
                <p class="pro_list_rank">
                    <span class="font_blue"><i>3.5</i>分</span> 豪华酒店</p>
                <p class="pro_list_oldprice">
                    <del>原价&yen;130</del> 4.8折</p>
                <div class="pro_list_prv">
                    <p class="pro_list_price">
                        &yen;<i>130</i>-<em>30</em></p>
                    <i class="pro_list_prvicon">立减</i>
                </div>
            </div>
        </li>
    </ul>
</section>
<ul class="tab_search fix_bottom">
    <li class="tabcrt">登录</li>
    <li class="tab_hotel jsHotel">注册</li>
</ul>

整体代码如上，现在我们来利用他做一个简单的应用

小试牛刀

我们来重新定义下我们的index，用它看看能不能实现微博功能。

我们知道我们该操作inde.js的onload事件，以加载微博数据：

PS：微博接口好像有所变化，我原来的方法不能用啦。。。

define(['$', '_', 'cBase', 'cView', getViewPath('index')], function ($, _, b, v, html) {
    var View = b.Class(v.PageView, {
        _propertys_: function () {
            this.template = html;
            this.url = 'http://mat1.gtimg.com/app/vt/public/openjs/latest.js'; //获取首页文章
        },
        init: function (superInit, request, interface) {
            superInit(request, interface);
            console.log('init');
        },
        createHtml: function () {
            return this.template;
        },
        attrs: {
            'data-id': 'test',
            className: 'yexiaoc'
        },
        events: {
        },
        onCreate: function () {
            console.log('onCreate');
        },
        //dom创建后数据加载时执行，用于加载后执行我们的逻辑
        onLoad: function () {
            console.log('onLoad');
            $.getScript(this.url, function (data) {
                T.api("/statuses/home_timeline", null, "json", "GET")
                .success(function (addResponse, hometimelineResponse) {
                    // 获取主页时间线数据
                    var data = addResponse.data.info;
                    var $timeline = $("#timeline");
                    $.each(data, function (i, item) {
                        $timeline.append("<li>" + item.origtext + "</li>");
                    });
                }).error(function (code, message) {
                        alert("操作失败，" + message);
                });
            });
        },
        //dom创建后，未显示
        onShow: function () {
            console.log('onShow');
        },
        //dom隐藏前
        onHide: function () {
            console.log('onHide');
        }
    });

    return View;
});

onLoad: function () {
    console.log('onLoad');
    $.getScript(this.url, function (data) {
        T.api("/statuses/home_timeline", null, "json", "GET")
        .success(function (addResponse, hometimelineResponse) {
            // 获取主页时间线数据
            var data = addResponse.data.info;
            var $timeline = $("#timeline");
            $.each(data, function (i, item) {
                $timeline.append("<li>" + item.origtext + "</li>");
            });
        }).error(function (code, message) {
                alert("操作失败，" + message);
        });
    });
},

先不管其他的，我们来看看我们获得了什么：

PS：我这里直接用死数据，懒得去研究了。。。。。。确实熬不住了

最后的实例view模板代码：（相信我，你不会想点开的！！！）

<input class="login" type="button" value="点击登录" />
<header>
    <b class="icon_home i_bef" id="js_home"></b>
    <h1>
        博客园</h1>
    <i id="js_return" class="returnico"></i>
</header>
<section class="cont_wrap" style="margin: 17px 0 40px;">
    <div id="loginbar" style="cursor: pointer;">
        <!--默认显示的文字-->
    </div>
    <ul class="pro_list" id="lstbox">
        <li class="arr_r">
            <figure class="pro_list_imgbox">
                <img src="http://images4.c-ctrip.com/target/hotel/49000/48952/70EB0AADE33644F2B410D4F3CCE9E298_130_130.Jpg" />
                <figcaption class="figcaption">
                    <i>上季热卖</i><span>已售2222份</span>
                </figcaption>
            </figure>
            <div class="pro_list_info">
                <h4 class="pro_list_tit">
                    上海西郊宾馆上海西郊宾馆上海西郊宾馆上海西郊宾馆上海西郊宾馆</h4>
                <p class="pro_list_rank">
                    <span class="font_blue"><i>3.5</i>分</span> 豪华酒店</p>
                <p class="pro_list_oldprice">
                    <del>原价&yen;130</del> 4.8折</p>
                <div class="pro_list_prv">
                    <p class="pro_list_price">
                        &yen;<i>130</i>-<em>30</em></p>
                    <i class="pro_list_prvicon">立减</i>
                </div>
            </div>
        </li>
        <li from="1" rel="1376312599" id="223858132620730">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/223858132620730">详情</a></p>
                    <p>
                        <a title="不再显示“為伊消魂”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a title="不再显示来自“不得姐”的广播" class="shieldFrom" href="#">屏蔽该来源</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="lbj147123" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                    <img src="http://t1.qlogo.cn/mbloghead/2e30976c1b382859f2f0/50"></a></div>
            <div class="msgBox">
                <div rel="lbj147123" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="" href="http://t.qq.com/lbj147123"
                        card="1" ctype="2" rel="為伊消魂(@lbj147123)" titlename="為伊消魂(@lbj147123)">為伊消魂</a><a
                            class="tIcon ico_master_star" target="_blank" title="微博之星" href="http://p.t.qq.com/wbstar.php"></a></strong>&nbsp;</div>
                <div class="msgCnt">
                    献给所有在异地打拼的年轻人！！ 来自<em rel="@baisibudej8800"><a target="_blank" title="百思不得姐应用(@baisibudej8800)"
                        href="http://t.qq.com/baisibudej8800">百思不得姐应用</a></em> <a target="_blank" class="url"
                            href="http://url.cn/E9GEhb">http://url.cn/E9GEhb</a></div>
                <div class="mediaWrap">
                    <div class="picBox ">
                        <div class="tl_tools bor_bg picTools">
                            <a target="_blank" class="btnOriginal" href="http://t1.qpic.cn/mblogpic/38f4e0d911f8834f9364/2000">
                                <i class="ic ic_tool_zoomIn"></i>查看大图</a><a class="btnBack" href="#"><i class="ic ic_tool_rtl"></i>向左</a><a
                                    class="btnPrev" href="#"><i class="ic ic_tool_rtr"></i>向右</a><a target="_blank" class="btnMore"
                                        boss="btn_pic_getMore" href="http://t.qq.com/app/qzphoto/lbj147123?preview"><i class="ic ic_tool_album"></i>他的相册</a><a
                                            style="" class="btnMobile" codeurl="http://t1.qpic.cn/mblogpic/38f4e0d911f8834f9364/460"
                                            href="#"><i class="ic ic_tool_qrcode"></i>存到手机</a></div>
                        <a class="pic" target="_blank" href="http://t1.qpic.cn/mblogpic/38f4e0d911f8834f9364/460"
                            hidefocus="true">
                            <img crs="http://t1.qpic.cn/mblogpic/38f4e0d911f8834f9364/120" show="1" class=""
                                alt="[图片]" src="http://t1.qpic.cn/mblogpic/38f4e0d911f8834f9364/120" style="display: inline;
                                padding: 0px 25px;"><canvas id="1283444822738.055C"></canvas></a></div>
                </div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://www.budejie.com"><i title="其他来源"
                        class="sico ico_3rdApp"></i></a><span style="display: none"><a target="_blank" href="http://www.budejie.com"
                            class="f">来自不得姐</a> <a href="#" class="ico_shield">[屏蔽]</a></span><a from="1372781"
                                rel="1376312599" href="http://t.qq.com/p/t/223858132620730" target="_blank" class="time"
                                title="2013年8月12日 21:03">今天 21:03</a> <span title="该广播已被阅读17次" class="cNote">阅读(17)</span>
                    </span>
                    <div class="funBox">
                        <a title="赞" class="int_like" href="http://t.qq.com/p/t/223858132620730"><i class="ic ico_likeb">
                        </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                            href="http://t.qq.com/p/t/223858132620730" title="赞">(<span>0</span>)</a> <span>|</span><a
                                num="0" class="relay" href="http://t.qq.com/p/t/223858132620730">转播</a><span>|</span><a
                                    num="0" class="comt" href="http://t.qq.com/p/t/223858132620730">评论</a><span>|</span><a
                                        class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="1" rel="1376309812" id="226501030018492">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/226501030018492">详情</a></p>
                    <p>
                        <a title="不再显示“张远”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="lovzhy" title="张远(@lovzhy)" href="http://t.qq.com/lovzhy">
                    <img src="http://t3.qlogo.cn/mbloghead/9bc2822ccf582d56cd22/50"></a></div>
            <div class="msgBox">
                <div rel="lovzhy" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="张远(@lovzhy)" href="http://t.qq.com/lovzhy">
                        张远</a></strong>&nbsp;</div>
                <div class="msgCnt">
                    我刚参加<a target="_blank" href="http://k.t.qq.com/k/%E5%9B%9B%E5%B7%9D%E7%BD%91%E6%B0%91%E6%8C%87%E6%95%B0">#四川网民指数#</a>调查【7岁女童称有两个“老公”，怎么看】
                    ,选择了 童言无忌，没关系 截至08月12日一共有302人和我一样，你也来参与吧！<a target="_blank" class="url" href="http://url.cn/F9kzRq">http://url.cn/F9kzRq</a></div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://t.qq.com"><i title="腾讯微博"
                        class="sico ico_webmb"></i></a><span style="display: none"><a target="_blank" href="http://t.qq.com"
                            class="f">来自腾讯微博</a></span><a from="3" rel="1376309812" href="http://t.qq.com/p/t/226501030018492"
                                target="_blank" class="time" title="2013年8月12日 20:16">今天 20:16</a> <span title="该广播已被阅读8次"
                                    class="cNote">阅读(8)</span> </span>
                    <div class="funBox">
                        <a title="赞" class="int_like" href="http://t.qq.com/p/t/226501030018492"><i class="ic ico_likeb">
                        </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                            href="http://t.qq.com/p/t/226501030018492" title="赞">(<span>0</span>)</a> <span>|</span><a
                                num="0" class="relay" href="http://t.qq.com/p/t/226501030018492">转播</a><span>|</span><a
                                    num="0" class="comt" href="http://t.qq.com/p/t/226501030018492">评论</a><span>|</span><a
                                        class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="1" rel="1376302845" id="228001106487641">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/228001106487641">详情</a></p>
                    <p>
                        <a title="不再显示“為伊消魂”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a title="不再显示来自“QQ空间iPhone版”的广播" class="shieldFrom" href="#">屏蔽该来源</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="lbj147123" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                    <img src="http://t1.qlogo.cn/mbloghead/2e30976c1b382859f2f0/50"></a></div>
            <div class="msgBox">
                <div rel="lbj147123" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                        為伊消魂</a><a class="tIcon ico_master_star" target="_blank" title="微博之星" href="http://p.t.qq.com/wbstar.php"></a></strong>&nbsp;</div>
                <div class="msgCnt">
                    这周末一定要去逛街了，挡不住了！</div>
                <div class="areaInfo">
                    <em class="ico_area" title="地理位置"></em><a target="_blank" href="http://p.t.qq.com/map/lbs.php?lat=30.575755&amp;lng=104.062423&amp;addr=成都市武侯区民丰大道西段"
                        boss="btn_check_tweetNear" nopop="1">成都市武侯区民丰大道西段</a> - <a merchant="成都市奥克斯广场" pos="104.062423,30.575755"
                            address="成都市武侯区民丰大道西段" pano="1" href="#">街景地图</a><i class="ico_new_mini"></i></div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://mobile.qq.com/qzone/iphone/">
                        <i title="其他来源" class="sico ico_mobile"></i></a><span style="display: none"><a target="_blank"
                            href="http://mobile.qq.com/qzone/iphone/" class="f">来自QQ空间iPhone版</a> <a href="#"
                                class="ico_shield">[屏蔽]</a></span><a from="1699" rel="1376302845" href="http://t.qq.com/p/t/228001106487641"
                                    target="_blank" class="time" title="2013年8月12日 18:20">今天 18:20</a> <span title="该广播已被阅读23次"
                                        class="cNote">阅读(23)</span> </span>
                    <div class="funBox">
                        <a title="赞" class="int_like" href="http://t.qq.com/p/t/228001106487641"><i class="ic ico_likeb">
                        </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                            href="http://t.qq.com/p/t/228001106487641" title="赞">(<span>0</span>)</a> <span>|</span><a
                                num="0" class="relay" href="http://t.qq.com/p/t/228001106487641">转播</a><span>|</span><a
                                    num="0" class="comt" href="http://t.qq.com/p/t/228001106487641">评论</a><span>|</span><a
                                        class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="1" tv="2" rel="1376302845" id="278725121506685">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/278725121506685">详情</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="fanlifans" title="返利网(@fanlifans)" href="http://t.qq.com/fanlifans"
                    followbtn="1">
                    <img src="http://t3.qlogo.cn/mbloghead/9438d1c6872e180dd57c/50"></a><div user="fanlifans"
                        class="attentBoxWrap attentBox">
                        <input type="button" value="立即收听" class="addAttention" addevent="1"><a style="display: none"
                            class="delAttention" href="#">取消<i class="l"></i></a></div>
            </div>
            <div class="msgBox">
                <div rel="fanlifans" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="返利网(@fanlifans)" href="http://t.qq.com/fanlifans">
                        返利网</a><a class="tIcon ico_cvip" target="_blank" title="腾讯机构认证" href="http://zhaoren.t.qq.com/people.php?id=114"></a></strong>&nbsp;</div>
                <div class="msgCnt">
                    昨天朋友网上看中件衣服，刚要下单。我提醒她，可别二，淘宝上的商品，都有折扣。只要注册返利网，通过他们搜索再去淘宝购买，一般90元衣服，70元就能搞定，最高优惠35%。朋友试了下，省了十几块。今天刚到的T恤，感觉蛮好。经常用淘宝的姐妹，一定用得上。注册地址:<a
                        target="_blank" class="url" href="http://url.cn/H2Rg2M">http://url.cn/H2Rg2M</a></div>
                <div class="mediaWrap">
                    <div class="picBox ">
                        <div class="tl_tools bor_bg picTools">
                            <a target="_blank" class="btnOriginal" href="http://t3.qpic.cn/mblogpic/162bd747e6e750da089c/2000">
                                <i class="ic ic_tool_zoomIn"></i>查看大图</a><a class="btnBack" href="#"><i class="ic ic_tool_rtl"></i>向左</a><a
                                    class="btnPrev" href="#"><i class="ic ic_tool_rtr"></i>向右</a><a target="_blank" class="btnMore"
                                        boss="btn_pic_getMore" href="http://t.qq.com/app/qzphoto/fanlifans?preview"><i class="ic ic_tool_album"></i>他的相册</a><a
                                            style="" class="btnMobile" codeurl="http://t3.qpic.cn/mblogpic/162bd747e6e750da089c/460"
                                            href="#"><i class="ic ic_tool_qrcode"></i>存到手机</a></div>
                        <a class="pic" target="_blank" href="http://t3.qpic.cn/mblogpic/162bd747e6e750da089c/460">
                            <img crs="http://t3.qpic.cn/mblogpic/162bd747e6e750da089c/120" show="1" class=""
                                alt="[图片]" src="http://t3.qpic.cn/mblogpic/162bd747e6e750da089c/120" style="display: inline;"><canvas
                                    id="651911097039.8063C"></canvas></a></div>
                </div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><span class="f c_tx5">微博推广</span><a from="1735" rel="1375268400"
                        href="http://t.qq.com/p/t/278725121506685" target="_blank" style="display: none"
                        class="time" title="2013年7月31日 19:00">7月31日 19:00</a> <span title="该广播已被阅读11080830次"
                            class="cNote">阅读(1108万)</span> <a target="_blank" href="http://t.qq.com/p/t/278725121506685"
                                class="zfNum">全部转播和评论(<b class="relayNum">7783</b>)</a></span><div class="funBox">
                                    <a title="赞" class="int_like" href="http://t.qq.com/p/t/278725121506685"><i class="ic ico_likeb">
                                    </i><i class="like_plus">+1</i></a> <a class="int_like num_likeb" href="http://t.qq.com/p/t/278725121506685"
                                        title="赞">(<span>825</span>)</a> <span>|</span><a num="6273" class="relay" href="http://t.qq.com/p/t/278725121506685">转播</a><span>|</span><a
                                            num="1510" class="comt" href="http://t.qq.com/p/t/278725121506685">评论</a><span>|</span><a
                                                class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="2" rel="1376294191" id="241053070002170">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/241053070002170">详情</a></p>
                    <p>
                        <a title="不再显示“為伊消魂”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a target="_blank" tabindex="-1" boss="" account="lbj147123" title="為伊消魂(@lbj147123)"
                    href="http://t.qq.com/lbj147123">
                    <img src="http://t1.qlogo.cn/mbloghead/2e30976c1b382859f2f0/50"></a></div>
            <div class="msgBox">
                <div rel="lbj147123" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                        為伊消魂</a><a class="tIcon ico_master_star" target="_blank" title="微博之星" href="http://p.t.qq.com/wbstar.php"></a></strong></div>
                <div class="msgCnt">
                    <div>
                        遇到这样的队友也老火！</div>
                </div>
                <div class="replyBox">
                    <div class="msgBox">
                        <div class="msgCnt">
                            <strong><a target="_blank" gender="他" boss="" title="商业评论网(@商业评论网)" href="http://t.qq.com/ebusinessreview">
                                商业评论网</a><a class="tIcon ico_cvip" target="_blank" title="腾讯机构认证" href="http://zhaoren.t.qq.com/people.php?id=114"></a></strong>&nbsp;<div>
                                    <a target="_blank" href="http://k.t.qq.com/k/%E6%97%A0%E6%AD%A2%E5%A2%83%E7%9A%84%E6%8B%96%E5%BB%B6">
                                        #无止境的拖延#</a>问题在于，你的时间永远没有你想象中那么多。有一天当你醒来时会发现，你再没有时间去做那些你一直想做的事情了。那时你要么已经实现了自己的目标，要么为你没有实现的目标找一大堆理由。<a
                                            target="_blank" class="url" href="http://url.cn/GbswNm">http://url.cn/GbswNm</a></div>
                        </div>
                        <div class="pubInfo c_tx5">
                            <span class="left c_tx5"><a target="_blank" href="http://t.qq.com/"><i title="腾讯微博"
                                class="sico ico_webmb"></i></a><span style="display: none"><a target="_blank" href="http://t.qq.com/"
                                    class="f">来自腾讯微博</a></span><a from="1842" rel="1376293603" href="http://t.qq.com/p/t/305487062192264"
                                        target="_blank" class="time" title="2013年8月12日 15:46">今天 15:46</a> <span title="全部阅读次数15186次"
                                            class="cNote">阅读(1.5万)</span> <a target="_blank" href="http://t.qq.com/p/t/305487062192264"
                                                class="zfNum">全部转播和评论(<b class="relayNum">32</b>)</a></span></div>
                    </div>
                </div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://t.qq.com/client.php?t=iphone">
                        <i title="其他来源" class="sico ico_mobile"></i></a><span style="display: none"><a target="_blank"
                            href="http://t.qq.com/client.php?t=iphone" class="f">来自iPhone客户端</a></span><a from="6"
                                rel="1376294191" href="http://t.qq.com/p/t/241053070002170" target="_blank" class="time"
                                title="2013年8月12日 15:56">今天 15:56</a> <span title="该广播已被阅读57次" class="cNote">阅读(57)</span></span><div
                                    class="funBox">
                                    <a title="赞" class="int_like" href="http://t.qq.com/p/t/241053070002170"><i class="ic ico_likeb">
                                    </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                                        href="http://t.qq.com/p/t/241053070002170" title="赞">(<span>0</span>)</a> <span>|</span><a
                                            num="0" class="relay" href="http://t.qq.com/p/t/305487062192264">转播</a><span>|</span><a
                                                num="0" class="comt" href="http://t.qq.com/p/t/305487062192264">评论</a><span>|</span><a
                                                    class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <script class="talkListLi">            try { QosS.topSpan("t_my_index", 1); } catch (e) { }</script>
        <li from="1" rel="1376222417" id="307386069070479">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/307386069070479">详情</a></p>
                    <p>
                        <a title="不再显示“為伊消魂”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a title="不再显示来自“不得姐”的广播" class="shieldFrom" href="#">屏蔽该来源</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="lbj147123" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                    <img src="http://t1.qlogo.cn/mbloghead/2e30976c1b382859f2f0/50"></a></div>
            <div class="msgBox">
                <div rel="lbj147123" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                        為伊消魂</a><a class="tIcon ico_master_star" target="_blank" title="微博之星" href="http://p.t.qq.com/wbstar.php"></a></strong>&nbsp;</div>
                <div class="msgCnt">
                    女：你什么工作呢？ 男： 世界500强大型外企工作，单位配车，负责与客户洽谈后期交易业务 女：具体点儿呢？ 男： KFC送外卖 来自<em rel="@baisibudej8800"><a
                        target="_blank" title="百思不得姐应用(@baisibudej8800)" href="http://t.qq.com/baisibudej8800">百思不得姐应用</a></em>
                    <a target="_blank" class="url" href="http://url.cn/F6tLvA">http://url.cn/F6tLvA</a></div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://www.budejie.com"><i title="其他来源"
                        class="sico ico_3rdApp"></i></a><span style="display: none"><a target="_blank" href="http://www.budejie.com"
                            class="f">来自不得姐</a> <a href="#" class="ico_shield">[屏蔽]</a></span><a from="1372781"
                                rel="1376222417" href="http://t.qq.com/p/t/307386069070479" target="_blank" class="time"
                                title="2013年8月11日 20:00">昨天 20:00</a> <span title="该广播已被阅读67次" class="cNote">阅读(67)</span>
                    </span>
                    <div class="funBox">
                        <a title="赞" class="int_like" href="http://t.qq.com/p/t/307386069070479"><i class="ic ico_likeb">
                        </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                            href="http://t.qq.com/p/t/307386069070479" title="赞">(<span>0</span>)</a> <span>|</span><a
                                num="0" class="relay" href="http://t.qq.com/p/t/307386069070479">转播</a><span>|</span><a
                                    num="0" class="comt" href="http://t.qq.com/p/t/307386069070479">评论</a><span>|</span><a
                                        class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="1" rel="1376222022" id="287684118219657">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/287684118219657">详情</a></p>
                    <p>
                        <a title="不再显示“為伊消魂”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a title="不再显示来自“不得姐”的广播" class="shieldFrom" href="#">屏蔽该来源</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="lbj147123" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                    <img src="http://t1.qlogo.cn/mbloghead/2e30976c1b382859f2f0/50"></a></div>
            <div class="msgBox">
                <div rel="lbj147123" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                        為伊消魂</a><a class="tIcon ico_master_star" target="_blank" title="微博之星" href="http://p.t.qq.com/wbstar.php"></a></strong>&nbsp;</div>
                <div class="msgCnt">
                    你以后想要孩子么？敢要么？ 来自<em rel="@baisibudej8800"><a target="_blank" title="百思不得姐应用(@baisibudej8800)"
                        href="http://t.qq.com/baisibudej8800">百思不得姐应用</a></em> <a target="_blank" class="url"
                            href="http://url.cn/FgR1C5">http://url.cn/FgR1C5</a></div>
                <div class="mediaWrap">
                    <div class="picBox ">
                        <div class="tl_tools bor_bg picTools">
                            <a target="_blank" class="btnOriginal" href="http://t1.qpic.cn/mblogpic/68ef0e3057c5fe459c3e/2000">
                                <i class="ic ic_tool_zoomIn"></i>查看大图</a><a class="btnBack" href="#"><i class="ic ic_tool_rtl"></i>向左</a><a
                                    class="btnPrev" href="#"><i class="ic ic_tool_rtr"></i>向右</a><a target="_blank" class="btnMore"
                                        boss="btn_pic_getMore" href="http://t.qq.com/app/qzphoto/lbj147123?preview"><i class="ic ic_tool_album"></i>他的相册</a><a
                                            style="" class="btnMobile" codeurl="http://t1.qpic.cn/mblogpic/68ef0e3057c5fe459c3e/460"
                                            href="#"><i class="ic ic_tool_qrcode"></i>存到手机</a></div>
                        <a class="pic" target="_blank" href="http://t1.qpic.cn/mblogpic/68ef0e3057c5fe459c3e/460">
                            <img crs="http://t1.qpic.cn/mblogpic/68ef0e3057c5fe459c3e/120" show="1" class=""
                                alt="[图片]" src="http://t1.qpic.cn/mblogpic/68ef0e3057c5fe459c3e/120" style="display: inline;"><canvas
                                    id="691645601524.4619C"></canvas></a></div>
                </div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://www.budejie.com"><i title="其他来源"
                        class="sico ico_3rdApp"></i></a><span style="display: none"><a target="_blank" href="http://www.budejie.com"
                            class="f">来自不得姐</a> <a href="#" class="ico_shield">[屏蔽]</a></span><a from="1372781"
                                rel="1376222022" href="http://t.qq.com/p/t/287684118219657" target="_blank" class="time"
                                title="2013年8月11日 19:53">昨天 19:53</a> <span title="该广播已被阅读81次" class="cNote">阅读(81)</span>
                    </span>
                    <div class="funBox">
                        <a title="赞" class="int_like" href="http://t.qq.com/p/t/287684118219657"><i class="ic ico_likeb">
                        </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                            href="http://t.qq.com/p/t/287684118219657" title="赞">(<span>0</span>)</a> <span>|</span><a
                                num="0" class="relay" href="http://t.qq.com/p/t/287684118219657">转播</a><span>|</span><a
                                    num="0" class="comt" href="http://t.qq.com/p/t/287684118219657">评论</a><span>|</span><a
                                        class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="1" rel="1376221722" id="304275007431216">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/304275007431216">详情</a></p>
                    <p>
                        <a title="不再显示“為伊消魂”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a title="不再显示来自“不得姐”的广播" class="shieldFrom" href="#">屏蔽该来源</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="lbj147123" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                    <img src="http://t1.qlogo.cn/mbloghead/2e30976c1b382859f2f0/50"></a></div>
            <div class="msgBox">
                <div rel="lbj147123" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                        為伊消魂</a><a class="tIcon ico_master_star" target="_blank" title="微博之星" href="http://p.t.qq.com/wbstar.php"></a></strong>&nbsp;</div>
                <div class="msgCnt">
                    多么痛的领悟~( •́ㅿ•̀ ) 来自<em rel="@baisibudej8800"><a target="_blank" title="百思不得姐应用(@baisibudej8800)"
                        href="http://t.qq.com/baisibudej8800">百思不得姐应用</a></em> <a target="_blank" class="url"
                            href="http://url.cn/GBZduG">http://url.cn/GBZduG</a></div>
                <div class="mediaWrap">
                    <div class="picBox ">
                        <div class="tl_tools bor_bg picTools">
                            <a target="_blank" class="btnOriginal" href="http://t1.qpic.cn/mblogpic/6a730e3308eecfaa0d6e/2000">
                                <i class="ic ic_tool_zoomIn"></i>查看大图</a><a class="btnBack" href="#"><i class="ic ic_tool_rtl"></i>向左</a><a
                                    class="btnPrev" href="#"><i class="ic ic_tool_rtr"></i>向右</a><a target="_blank" class="btnMore"
                                        boss="btn_pic_getMore" href="http://t.qq.com/app/qzphoto/lbj147123?preview"><i class="ic ic_tool_album"></i>他的相册</a><a
                                            style="" class="btnMobile" codeurl="http://t1.qpic.cn/mblogpic/6a730e3308eecfaa0d6e/460"
                                            href="#"><i class="ic ic_tool_qrcode"></i>存到手机</a></div>
                        <a class="pic" target="_blank" href="http://t1.qpic.cn/mblogpic/6a730e3308eecfaa0d6e/460">
                            <img crs="http://t1.qpic.cn/mblogpic/6a730e3308eecfaa0d6e/120" show="1" class=""
                                alt="[图片]" src="http://t1.qpic.cn/mblogpic/6a730e3308eecfaa0d6e/120" style="display: inline;"><canvas
                                    id="586276264030.9236C"></canvas></a></div>
                </div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://www.budejie.com"><i title="其他来源"
                        class="sico ico_3rdApp"></i></a><span style="display: none"><a target="_blank" href="http://www.budejie.com"
                            class="f">来自不得姐</a> <a href="#" class="ico_shield">[屏蔽]</a></span><a from="1372781"
                                rel="1376221722" href="http://t.qq.com/p/t/304275007431216" target="_blank" class="time"
                                title="2013年8月11日 19:48">昨天 19:48</a> <span title="该广播已被阅读64次" class="cNote">阅读(64)</span>
                    </span>
                    <div class="funBox">
                        <a title="赞" class="int_like" href="http://t.qq.com/p/t/304275007431216"><i class="ic ico_likeb">
                        </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                            href="http://t.qq.com/p/t/304275007431216" title="赞">(<span>0</span>)</a> <span>|</span><a
                                num="0" class="relay" href="http://t.qq.com/p/t/304275007431216">转播</a><span>|</span><a
                                    num="0" class="comt" href="http://t.qq.com/p/t/304275007431216">评论</a><span>|</span><a
                                        class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="1" rel="1376198612" id="279441065758631">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/279441065758631">详情</a></p>
                    <p>
                        <a title="不再显示“為伊消魂”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="lbj147123" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                    <img src="http://t1.qlogo.cn/mbloghead/2e30976c1b382859f2f0/50"></a></div>
            <div class="msgBox">
                <div rel="lbj147123" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                        為伊消魂</a><a class="tIcon ico_master_star" target="_blank" title="微博之星" href="http://p.t.qq.com/wbstar.php"></a></strong>&nbsp;</div>
                <div class="msgCnt">
                    85后，呵呵！</div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a href="#"><i title="腾讯平台产品" class="sico ico_tencent"></i>
                    </a><span style="display: none"><span class="f">来自QQ签名</span></span><a from="1002"
                        rel="1376198612" href="http://t.qq.com/p/t/279441065758631" target="_blank" class="time"
                        title="2013年8月11日 13:23">昨天 13:23</a> <span title="该广播已被阅读154次" class="cNote">阅读(154)</span>
                    </span>
                    <div class="funBox">
                        <a title="赞" class="int_like" href="http://t.qq.com/p/t/279441065758631"><i class="ic ico_likeb">
                        </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                            href="http://t.qq.com/p/t/279441065758631" title="赞">(<span>0</span>)</a> <span>|</span><a
                                num="0" class="relay" href="http://t.qq.com/p/t/279441065758631">转播</a><span>|</span><a
                                    num="0" class="comt" href="http://t.qq.com/p/t/279441065758631">评论</a><span>|</span><a
                                        class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="1" rel="1376150606" id="287283110348810">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/287283110348810">详情</a></p>
                    <p>
                        <a title="不再显示“彭玺”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a title="不再显示来自“糯米网”的广播" class="shieldFrom" href="#">屏蔽该来源</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="pengxi1_83" title="彭玺(@pengxi1_83)" href="http://t.qq.com/pengxi1_83">
                    <img src="http://t2.qlogo.cn/mbloghead/69301ae2c4e9d62d6432/50"></a></div>
            <div class="msgBox">
                <div rel="pengxi1_83" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="彭玺(@pengxi1_83)" href="http://t.qq.com/pengxi1_83">
                        彭玺</a></strong>&nbsp;</div>
                <div class="msgCnt">
                    【名流38元】我在<em rel="@糯米网"><a target="_blank" title="糯米网(@nuomiwang)" href="http://t.qq.com/nuomiwang">@糯米网</a></em>
                    团购了 名流38元 。 (分享自 <em rel="@QQ空间"><a target="_blank" title="QQ空间(@Qzone)" href="http://t.qq.com/Qzone">
                        @QQ空间</a></em>) <a target="_blank" class="url" href="http://url.cn/IbmVyz">http://url.cn/IbmVyz</a></div>
                <div class="mediaWrap">
                    <div class="picBox ">
                        <div class="tl_tools bor_bg picTools">
                            <a target="_blank" class="btnOriginal" href="http://t3.qpic.cn/mblogpic/ae8704e24efda3c3be66/2000">
                                <i class="ic ic_tool_zoomIn"></i>查看大图</a><a class="btnBack" href="#"><i class="ic ic_tool_rtl"></i>向左</a><a
                                    class="btnPrev" href="#"><i class="ic ic_tool_rtr"></i>向右</a><a target="_blank" class="btnMore"
                                        boss="btn_pic_getMore" href="http://t.qq.com/app/qzphoto/pengxi1_83?preview"><i class="ic ic_tool_album"></i>他的相册</a><a
                                            style="" class="btnMobile" codeurl="http://t3.qpic.cn/mblogpic/ae8704e24efda3c3be66/460"
                                            href="#"><i class="ic ic_tool_qrcode"></i>存到手机</a></div>
                        <a class="pic" target="_blank" href="http://t3.qpic.cn/mblogpic/ae8704e24efda3c3be66/460">
                            <img crs="http://t3.qpic.cn/mblogpic/ae8704e24efda3c3be66/120" show="1" class=""
                                alt="[图片]" src="http://t3.qpic.cn/mblogpic/ae8704e24efda3c3be66/120" style="display: inline;"><canvas
                                    id="853332234895.4247C"></canvas></a></div>
                </div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://www.nuomi.com"><i title="其他来源"
                        class="sico ico_3rdApp"></i></a><span style="display: none"><a target="_blank" href="http://www.nuomi.com"
                            class="f">来自糯米网</a> <a href="#" class="ico_shield">[屏蔽]</a></span><a from="1116205"
                                rel="1376150606" href="http://t.qq.com/p/t/287283110348810" target="_blank" class="time"
                                title="2013年8月11日 00:03">昨天 00:03</a> <span title="该广播已被阅读25次" class="cNote">阅读(25)</span>
                    </span>
                    <div class="funBox">
                        <a title="赞" class="int_like" href="http://t.qq.com/p/t/287283110348810"><i class="ic ico_likeb">
                        </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                            href="http://t.qq.com/p/t/287283110348810" title="赞">(<span>0</span>)</a> <span>|</span><a
                                num="0" class="relay" href="http://t.qq.com/p/t/287283110348810">转播</a><span>|</span><a
                                    num="0" class="comt" href="http://t.qq.com/p/t/287283110348810">评论</a><span>|</span><a
                                        class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="1" rel="1376121507" id="261363013492500">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/261363013492500">详情</a></p>
                    <p>
                        <a title="不再显示“DreamBoat”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="LamFungLee" title="DreamBoat(@LamFungLee)" href="http://t.qq.com/LamFungLee">
                    <img src="http://t3.qlogo.cn/mbloghead/2c68c25c0e0d8e137c24/50"></a></div>
            <div class="msgBox">
                <div rel="LamFungLee" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="DreamBoat(@LamFungLee)" href="http://t.qq.com/LamFungLee">
                        DreamBoat</a></strong>&nbsp;</div>
                <div class="msgCnt">
                    回成都了，尼玛东航老是晚点。</div>
                <div class="mediaWrap">
                    <div class="picBox ">
                        <div class="tl_tools bor_bg picTools">
                            <a target="_blank" class="btnOriginal" href="http://t1.qpic.cn/mblogpic/632ecfd714f01a0bc6a4/2000">
                                <i class="ic ic_tool_zoomIn"></i>查看大图</a><a class="btnBack" href="#"><i class="ic ic_tool_rtl"></i>向左</a><a
                                    class="btnPrev" href="#"><i class="ic ic_tool_rtr"></i>向右</a><a target="_blank" class="btnMore"
                                        boss="btn_pic_getMore" href="http://t.qq.com/app/qzphoto/LamFungLee?preview"><i class="ic ic_tool_album"></i>他的相册</a><a
                                            style="" class="btnMobile" codeurl="http://t1.qpic.cn/mblogpic/632ecfd714f01a0bc6a4/460"
                                            href="#"><i class="ic ic_tool_qrcode"></i>存到手机</a></div>
                        <a class="pic" target="_blank" href="http://t1.qpic.cn/mblogpic/632ecfd714f01a0bc6a4/460">
                            <img crs="http://t1.qpic.cn/mblogpic/632ecfd714f01a0bc6a4/120" show="1" class=""
                                alt="[图片]" src="http://t1.qpic.cn/mblogpic/632ecfd714f01a0bc6a4/120" style="display: inline;"><canvas
                                    id="1080951589305.9823C"></canvas></a></div>
                </div>
                <div class="areaInfo">
                    <em class="ico_area" title="地理位置"></em><a target="_blank" href="http://p.t.qq.com/map/lbs.php?lat=31.218091&amp;lng=121.3451&amp;addr=上海市长宁区 绥宁路"
                        boss="btn_check_tweetNear" nopop="1">上海市长宁区 绥宁路</a> - <a merchant="绥宁路" pos="121.3451,31.218091"
                            address="上海市长宁区 绥宁路" pano="1" href="#">街景地图</a><i class="ico_new_mini"></i></div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://t.qq.com/client.php?t=android">
                        <i title="其他来源" class="sico ico_mobile"></i></a><span style="display: none"><a target="_blank"
                            href="http://t.qq.com/client.php?t=android" class="f">来自Android客户端</a></span><a from="7"
                                rel="1376121507" href="http://t.qq.com/p/t/261363013492500" target="_blank" class="time"
                                title="2013年8月10日 15:58">8月10日 15:58</a> <span title="该广播已被阅读1314次" class="cNote">阅读(1314)</span>
                    </span>
                    <div class="funBox">
                        <a title="赞" class="int_like" href="http://t.qq.com/p/t/261363013492500"><i class="ic ico_likeb">
                        </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                            href="http://t.qq.com/p/t/261363013492500" title="赞">(<span>0</span>)</a> <span>|</span><a
                                num="0" class="relay" href="http://t.qq.com/p/t/261363013492500">转播</a><span>|</span><a
                                    num="0" class="comt" href="http://t.qq.com/p/t/261363013492500">评论</a><span>|</span><a
                                        class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="1" rel="1376097446" id="308366064134638">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/308366064134638">详情</a></p>
                    <p>
                        <a title="不再显示“DreamBoat”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a tabindex="-1" boss="" account="LamFungLee" title="DreamBoat(@LamFungLee)" href="http://t.qq.com/LamFungLee">
                    <img src="http://t3.qlogo.cn/mbloghead/2c68c25c0e0d8e137c24/50"></a></div>
            <div class="msgBox">
                <div rel="LamFungLee" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="DreamBoat(@LamFungLee)" href="http://t.qq.com/LamFungLee">
                        DreamBoat</a></strong>&nbsp;</div>
                <div class="msgCnt">
                    又一个四十度。</div>
                <div class="mediaWrap">
                    <div class="picBox ">
                        <div class="tl_tools bor_bg picTools">
                            <a target="_blank" class="btnOriginal" href="http://t1.qpic.cn/mblogpic/5dd5d5c6b077ec50024a/2000">
                                <i class="ic ic_tool_zoomIn"></i>查看大图</a><a class="btnBack" href="#"><i class="ic ic_tool_rtl"></i>向左</a><a
                                    class="btnPrev" href="#"><i class="ic ic_tool_rtr"></i>向右</a><a target="_blank" class="btnMore"
                                        boss="btn_pic_getMore" href="http://t.qq.com/app/qzphoto/LamFungLee?preview"><i class="ic ic_tool_album"></i>他的相册</a><a
                                            style="" class="btnMobile" codeurl="http://t1.qpic.cn/mblogpic/5dd5d5c6b077ec50024a/460"
                                            href="#"><i class="ic ic_tool_qrcode"></i>存到手机</a></div>
                        <a class="pic" target="_blank" href="http://t1.qpic.cn/mblogpic/5dd5d5c6b077ec50024a/460">
                            <img crs="http://t1.qpic.cn/mblogpic/5dd5d5c6b077ec50024a/120" show="1" class=""
                                alt="[图片]" src="http://t1.qpic.cn/mblogpic/5dd5d5c6b077ec50024a/120" style="display: inline;"><canvas
                                    id="811859436365.0526C"></canvas></a></div>
                </div>
                <div class="areaInfo">
                    <em class="ico_area" title="地理位置"></em><a target="_blank" href="http://p.t.qq.com/map/lbs.php?lat=31.082067&amp;lng=121.395103&amp;addr=上海市闵行区 金都路"
                        boss="btn_check_tweetNear" nopop="1">上海市闵行区 金都路</a> - <a merchant="金都路" pos="121.395103,31.082067"
                            address="上海市闵行区 金都路" pano="1" href="#">街景地图</a><i class="ico_new_mini"></i></div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://t.qq.com/client.php?t=android">
                        <i title="其他来源" class="sico ico_mobile"></i></a><span style="display: none"><a target="_blank"
                            href="http://t.qq.com/client.php?t=android" class="f">来自Android客户端</a></span><a from="7"
                                rel="1376097446" href="http://t.qq.com/p/t/308366064134638" target="_blank" class="time"
                                title="2013年8月10日 09:17">8月10日 09:17</a> <span title="该广播已被阅读1217次" class="cNote">阅读(1217)</span>
                        <a target="_blank" href="http://t.qq.com/p/t/308366064134638" class="zfNum">全部转播和评论(<b
                            class="relayNum">2</b>)</a></span><div class="funBox">
                                <a title="赞" class="int_like" href="http://t.qq.com/p/t/308366064134638"><i class="ic ico_likeb">
                                </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                                    href="http://t.qq.com/p/t/308366064134638" title="赞">(<span>0</span>)</a> <span>|</span><a
                                        num="0" class="relay" href="http://t.qq.com/p/t/308366064134638">转播</a><span>|</span><a
                                            num="2" class="comt" href="http://t.qq.com/p/t/308366064134638">评论</a><span>|</span><a
                                                class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="2" rel="1376095611" id="315308033884805">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/315308033884805">详情</a></p>
                    <p>
                        <a title="不再显示“DreamBoat”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a target="_blank" tabindex="-1" boss="" account="LamFungLee" title="DreamBoat(@LamFungLee)"
                    href="http://t.qq.com/LamFungLee">
                    <img src="http://t3.qlogo.cn/mbloghead/2c68c25c0e0d8e137c24/50"></a></div>
            <div class="msgBox">
                <div rel="LamFungLee" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="DreamBoat(@LamFungLee)" href="http://t.qq.com/LamFungLee">
                        DreamBoat</a></strong></div>
                <div class="msgCnt">
                    <div>
                        屌丝利器。</div>
                </div>
                <div class="replyBox">
                    <div class="msgBox">
                        <div class="msgCnt">
                            <strong><a target="_blank" gender="他" boss="" title="IT之家(@IT之家)" href="http://t.qq.com/ithome">
                                IT之家</a><a class="tIcon ico_cvip" target="_blank" title="腾讯机构认证" href="http://zhaoren.t.qq.com/people.php?id=114"></a></strong>&nbsp;<div>
                                    【日本推出奇葩虚拟接吻游戏，与iPad...】见过各种各样的另类的的游戏，但是唯独没有见过如此奇葩的。近日，日本一家公司为了推广新产品，开辟了一款iPad上的互动游戏，就是和iPad嘴对嘴……详情点击：<a
                                        target="_blank" class="url" href="http://url.cn/FC9gMS">http://url.cn/FC9gMS</a></div>
                        </div>
                        <div class="mediaWrap">
                            <div class="picBox ">
                                <div class="tl_tools bor_bg picTools">
                                    <a target="_blank" class="btnOriginal" href="http://t3.qpic.cn/mblogpic/fa5939c02c8c3f05374a/2000">
                                        <i class="ic ic_tool_zoomIn"></i>查看大图</a><a class="btnBack" href="#"><i class="ic ic_tool_rtl"></i>向左</a><a
                                            class="btnPrev" href="#"><i class="ic ic_tool_rtr"></i>向右</a><a target="_blank" class="btnMore"
                                                boss="btn_pic_getMore" href="http://t.qq.com/app/qzphoto/ithome?preview"><i class="ic ic_tool_album"></i>他的相册</a><a
                                                    style="" class="btnMobile" codeurl="http://t3.qpic.cn/mblogpic/fa5939c02c8c3f05374a/460"
                                                    href="#"><i class="ic ic_tool_qrcode"></i>存到手机</a></div>
                                <a class="pic" target="_blank" href="http://t3.qpic.cn/mblogpic/fa5939c02c8c3f05374a/460">
                                    <img crs="http://t3.qpic.cn/mblogpic/fa5939c02c8c3f05374a/120" class="" alt="[图片]"
                                        src="http://t3.qpic.cn/mblogpic/fa5939c02c8c3f05374a/120" style="display: inline;"><canvas
                                            id="161711426238.37894C"></canvas></a></div>
                        </div>
                        <div class="pubInfo c_tx5">
                            <span class="left c_tx5"><a target="_blank" href="http://www.ithome.com"><i title="其他来源"
                                class="sico ico_3rdApp"></i></a><span style="display: none"><a target="_blank" href="http://www.ithome.com"
                                    class="f">来自软媒IT之家</a></span><a from="1020613" rel="1376091176" href="http://t.qq.com/p/t/307784016621257"
                                        target="_blank" class="time" title="2013年8月10日 07:32">8月10日 07:32</a> <span title="全部阅读次数6105次"
                                            class="cNote">阅读(6105)</span> <a target="_blank" href="http://t.qq.com/p/t/307784016621257"
                                                class="zfNum">全部转播和评论(<b class="relayNum">9</b>)</a></span></div>
                    </div>
                </div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://t.qq.com/client.php?t=android">
                        <i title="其他来源" class="sico ico_mobile"></i></a><span style="display: none"><a target="_blank"
                            href="http://t.qq.com/client.php?t=android" class="f">来自Android客户端</a></span><a from="7"
                                rel="1376095611" href="http://t.qq.com/p/t/315308033884805" target="_blank" class="time"
                                title="2013年8月10日 08:46">8月10日 08:46</a> <span title="该广播已被阅读158次" class="cNote">阅读(158)</span></span><div
                                    class="funBox">
                                    <a title="赞" class="int_like" href="http://t.qq.com/p/t/315308033884805"><i class="ic ico_likeb">
                                    </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                                        href="http://t.qq.com/p/t/315308033884805" title="赞">(<span>0</span>)</a> <span>|</span><a
                                            num="0" class="relay" href="http://t.qq.com/p/t/307784016621257">转播</a><span>|</span><a
                                                num="0" class="comt" href="http://t.qq.com/p/t/307784016621257">评论</a><span>|</span><a
                                                    class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="2" rel="1376052342" id="247973080678406">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/247973080678406">详情</a></p>
                    <p>
                        <a title="不再显示“為伊消魂”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a target="_blank" tabindex="-1" boss="" account="lbj147123" title="為伊消魂(@lbj147123)"
                    href="http://t.qq.com/lbj147123">
                    <img src="http://t1.qlogo.cn/mbloghead/2e30976c1b382859f2f0/50"></a></div>
            <div class="msgBox">
                <div rel="lbj147123" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                        為伊消魂</a><a class="tIcon ico_master_star" target="_blank" title="微博之星" href="http://p.t.qq.com/wbstar.php"></a></strong></div>
                <div class="msgCnt">
                    <div>
                        对就该600，给那么多干嘛！</div>
                </div>
                <div class="replyBox">
                    <div class="msgBox">
                        <div class="msgCnt">
                            <strong><a target="_blank" gender="他" boss="" title="人民网(@人民网)" href="http://t.qq.com/renminwangcom">
                                人民网</a><a class="tIcon ico_cvip" target="_blank" title="腾讯机构认证" href="http://zhaoren.t.qq.com/people.php?id=114"></a></strong>&nbsp;<div>
                                    <a target="_blank" href="http://k.t.qq.com/k/%E8%B0%83%E6%9F%A5">#调查#</a>【大学录取通知书建议每月600生活费
                                    够吗？】近日，浙江某大学向新生发录取通知书时，信封里有一封"致新生家长的信"：建议家长提供给孩子的月消费额一般为600元，最高不超过800至1000元。不料引发网友吐槽：这是十年前吗?600只够吃食堂。(钱江晚报)还记得你当年的生活费吗?<a
                                        target="_blank" class="url" href="http://url.cn/IQ803I">http://url.cn/IQ803I</a></div>
                        </div>
                        <div class="mediaWrap">
                            <div class="picBox ">
                                <div class="tl_tools bor_bg picTools">
                                    <a target="_blank" class="btnOriginal" href="http://t1.qpic.cn/mblogpic/4908ecd09f8489adf17c/2000">
                                        <i class="ic ic_tool_zoomIn"></i>查看大图</a><a class="btnBack" href="#"><i class="ic ic_tool_rtl"></i>向左</a><a
                                            class="btnPrev" href="#"><i class="ic ic_tool_rtr"></i>向右</a><a target="_blank" class="btnMore"
                                                boss="btn_pic_getMore" href="http://t.qq.com/app/qzphoto/renminwangcom?preview"><i
                                                    class="ic ic_tool_album"></i>他的相册</a><a style="" class="btnMobile" codeurl="http://t1.qpic.cn/mblogpic/4908ecd09f8489adf17c/460"
                                                        href="#"><i class="ic ic_tool_qrcode"></i>存到手机</a></div>
                                <a class="pic" target="_blank" href="http://t1.qpic.cn/mblogpic/4908ecd09f8489adf17c/460">
                                    <img crs="http://t1.qpic.cn/mblogpic/4908ecd09f8489adf17c/120" class="" alt="[图片]"
                                        src="http://t1.qpic.cn/mblogpic/4908ecd09f8489adf17c/120" style="display: inline;"><canvas
                                            id="1098067396362.237C"></canvas></a></div>
                        </div>
                        <div class="pubInfo c_tx5">
                            <span class="left c_tx5"><a target="_blank" href="http://www.people.com.cn"><i title="其他来源"
                                class="sico ico_3rdApp"></i></a><span style="display: none"><a target="_blank" href="http://www.people.com.cn"
                                    class="f">来自人民网</a></span><a from="1012601" rel="1376044837" href="http://t.qq.com/p/t/289036109473578"
                                        target="_blank" class="time" title="2013年8月9日 18:40">8月9日 18:40</a> <span title="全部阅读次数119085次"
                                            class="cNote">阅读(11万)</span> <a target="_blank" href="http://t.qq.com/p/t/289036109473578"
                                                class="zfNum">全部转播和评论(<b class="relayNum">636</b>)</a></span></div>
                    </div>
                </div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://t.qq.com/client.php?t=iphone">
                        <i title="其他来源" class="sico ico_mobile"></i></a><span style="display: none"><a target="_blank"
                            href="http://t.qq.com/client.php?t=iphone" class="f">来自iPhone客户端</a></span><a from="6"
                                rel="1376052342" href="http://t.qq.com/p/t/247973080678406" target="_blank" class="time"
                                title="2013年8月9日 20:45">8月9日 20:45</a> <span title="该广播已被阅读286次" class="cNote">阅读(286)</span></span><div
                                    class="funBox">
                                    <a title="赞" class="int_like" href="http://t.qq.com/p/t/247973080678406"><i class="ic ico_likeb">
                                    </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                                        href="http://t.qq.com/p/t/247973080678406" title="赞">(<span>0</span>)</a> <span>|</span><a
                                            num="0" class="relay" href="http://t.qq.com/p/t/289036109473578">转播</a><span>|</span><a
                                                num="0" class="comt" href="http://t.qq.com/p/t/289036109473578">评论</a><span>|</span><a
                                                    class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="2" rel="1376046078" id="288775088393090">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/288775088393090">详情</a></p>
                    <p>
                        <a title="不再显示“為伊消魂”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a target="_blank" tabindex="-1" boss="" account="lbj147123" title="為伊消魂(@lbj147123)"
                    href="http://t.qq.com/lbj147123">
                    <img src="http://t1.qlogo.cn/mbloghead/2e30976c1b382859f2f0/50"></a></div>
            <div class="msgBox">
                <div rel="lbj147123" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                        為伊消魂</a><a class="tIcon ico_master_star" target="_blank" title="微博之星" href="http://p.t.qq.com/wbstar.php"></a></strong></div>
                <div class="msgCnt">
                    <div>
                        之前用打飞机的都是爱疯的<img crs="http://mat1.gtimg.com/www/mb/images/emoji_v1/1f628.png" title="衰"
                            k="z" class=" dn" src="http://mat1.gtimg.com/www/mb/images/emoji_v1/1f628.png"
                            style="display: inline;"></div>
                </div>
                <div class="replyBox">
                    <div class="msgBox">
                        <div class="msgCnt">
                            <strong><a target="_blank" gender="他" boss="" title="腾讯科技(@腾讯科技)" href="http://t.qq.com/qqtech">
                                腾讯科技</a><a class="tIcon ico_cvip" target="_blank" title="腾讯机构认证" href="http://zhaoren.t.qq.com/people.php?id=114"></a></strong>&nbsp;<div>
                                    【Android版微信5.0正式发布】微信5.0版今天下午已在Android平台正式发布。用户可在首发平台应用宝中下载最新版的微信应用。一轮由android用户掀起的“打飞机”热潮或将再度开启。<a
                                        target="_blank" class="url" href="http://url.cn/E7WhCB">http://url.cn/E7WhCB</a></div>
                        </div>
                        <div class="mediaWrap">
                            <div class="picBox ">
                                <div class="tl_tools bor_bg picTools">
                                    <a target="_blank" class="btnOriginal" href="http://t3.qpic.cn/mblogpic/539aebb91e2bd1f79de0/2000">
                                        <i class="ic ic_tool_zoomIn"></i>查看大图</a><a class="btnBack" href="#"><i class="ic ic_tool_rtl"></i>向左</a><a
                                            class="btnPrev" href="#"><i class="ic ic_tool_rtr"></i>向右</a><a target="_blank" class="btnMore"
                                                boss="btn_pic_getMore" href="http://t.qq.com/app/qzphoto/qqtech?preview"><i class="ic ic_tool_album"></i>他的相册</a><a
                                                    style="" class="btnMobile" codeurl="http://t3.qpic.cn/mblogpic/539aebb91e2bd1f79de0/460"
                                                    href="#"><i class="ic ic_tool_qrcode"></i>存到手机</a></div>
                                <a class="pic" target="_blank" href="http://t3.qpic.cn/mblogpic/539aebb91e2bd1f79de0/460">
                                    <img crs="http://t3.qpic.cn/mblogpic/539aebb91e2bd1f79de0/120" class="" alt="[图片]"
                                        src="http://t3.qpic.cn/mblogpic/539aebb91e2bd1f79de0/120" style="display: inline;"><canvas
                                            id="4104298199.3624253C"></canvas></a></div>
                        </div>
                        <div class="hotWords">
                            相关热点：<a target="_blank" href="http://h.t.qq.com/h/1765">微信5.0全民打飞机</a></div>
                        <div class="pubInfo c_tx5">
                            <span class="left c_tx5"><a target="_blank" href="http://t.qq.com/"><i title="腾讯微博"
                                class="sico ico_webmb"></i></a><span style="display: none"><a target="_blank" href="http://t.qq.com/"
                                    class="f">来自腾讯微博</a></span><a from="1842" rel="1376040001" href="http://t.qq.com/p/t/252261002844494"
                                        target="_blank" class="time" title="2013年8月9日 17:20">8月9日 17:20</a> <span title="全部阅读次数92780次"
                                            class="cNote">阅读(9.2万)</span> <a target="_blank" href="http://t.qq.com/p/t/252261002844494"
                                                class="zfNum">全部转播和评论(<b class="relayNum">238</b>)</a></span></div>
                    </div>
                </div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://t.qq.com/client.php?t=iphone">
                        <i title="其他来源" class="sico ico_mobile"></i></a><span style="display: none"><a target="_blank"
                            href="http://t.qq.com/client.php?t=iphone" class="f">来自iPhone客户端</a></span><a from="6"
                                rel="1376046078" href="http://t.qq.com/p/t/288775088393090" target="_blank" class="time"
                                title="2013年8月9日 19:01">8月9日 19:01</a> <span title="该广播已被阅读1630次" class="cNote">阅读(1630)</span></span><div
                                    class="funBox">
                                    <a title="赞" class="int_like" href="http://t.qq.com/p/t/288775088393090"><i class="ic ico_likeb">
                                    </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                                        href="http://t.qq.com/p/t/288775088393090" title="赞">(<span>0</span>)</a> <span>|</span><a
                                            num="0" class="relay" href="http://t.qq.com/p/t/252261002844494">转播</a><span>|</span><a
                                                num="0" class="comt" href="http://t.qq.com/p/t/252261002844494">评论</a><span>|</span><a
                                                    class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
        <li from="2" rel="1376015128" id="298953052662942">
            <div class="mFun">
                <a class="feed_opt" href="#"><em class="btn_ldrop"></em></a>
                <div class="mFunDrop">
                    <b></b><b class="mask"></b>
                    <div class="shareBtn">
                        <p>
                            <a href="#">分享...</a></p>
                    </div>
                    <p>
                        <a target="_blank" class="detail line" href="http://t.qq.com/p/t/298953052662942">详情</a></p>
                    <p>
                        <a title="不再显示“為伊消魂”的广播" target="_blank" class="shieldUser" href="#">屏蔽该用户</a></p>
                    <p>
                        <a class="alarm" href="#">举报</a></p>
                </div>
            </div>
            <div class="userPic">
                <a target="_blank" tabindex="-1" boss="" account="lbj147123" title="為伊消魂(@lbj147123)"
                    href="http://t.qq.com/lbj147123">
                    <img src="http://t1.qlogo.cn/mbloghead/2e30976c1b382859f2f0/50"></a></div>
            <div class="msgBox">
                <div rel="lbj147123" class="userName">
                    <strong><a target="_blank" gender="他" boss="" title="為伊消魂(@lbj147123)" href="http://t.qq.com/lbj147123">
                        為伊消魂</a><a class="tIcon ico_master_star" target="_blank" title="微博之星" href="http://p.t.qq.com/wbstar.php"></a></strong></div>
                <div class="msgCnt">
                    <div>
                        那就不如不见了！</div>
                </div>
                <div class="replyBox">
                    <div class="msgBox">
                        <div class="msgCnt">
                            <strong><a target="_blank" gender="他" boss="" title="夏小北(@夏小北)" href="http://t.qq.com/xxb6385">
                                夏小北</a><a class="vip" target="_blank" title="腾讯个人认证" href="http://zhaoren.t.qq.com/people.php"></a></strong>&nbsp;<div>
                                    人在的时候，以为总会有机会，其实人生就是减法，见一面少一面。”&mdash;&mdash;北岛</div>
                        </div>
                        <div class="pubInfo c_tx5">
                            <span class="left c_tx5"><a target="_blank" href="http://im.qq.com"><i title="腾讯平台产品"
                                class="sico ico_tencent"></i></a><span style="display: none"><a target="_blank" href="http://im.qq.com"
                                    class="f">来自QQ</a></span><a from="1" rel="1376014858" href="http://t.qq.com/p/t/303467114729082"
                                        target="_blank" class="time" title="2013年8月9日 10:20">8月9日 10:20</a> <span title="全部阅读次数187次"
                                            class="cNote">阅读(187)</span> <a target="_blank" href="http://t.qq.com/p/t/303467114729082"
                                                class="zfNum">全部转播和评论(<b class="relayNum">1</b>)</a></span></div>
                    </div>
                </div>
                <div class="pubInfo c_tx5">
                    <span class="left c_tx5"><a target="_blank" href="http://im.qq.com"><i title="腾讯平台产品"
                        class="sico ico_tencent"></i></a><span style="display: none"><a target="_blank" href="http://im.qq.com"
                            class="f">来自QQ</a></span><a from="1" rel="1376015128" href="http://t.qq.com/p/t/298953052662942"
                                target="_blank" class="time" title="2013年8月9日 10:25">8月9日 10:25</a> <span title="该广播已被阅读112次"
                                    class="cNote">阅读(112)</span></span><div class="funBox">
                                        <a title="赞" class="int_like" href="http://t.qq.com/p/t/298953052662942"><i class="ic ico_likeb">
                                        </i><i class="like_plus">+1</i></a> <a style="display: none" class="int_like num_likeb"
                                            href="http://t.qq.com/p/t/298953052662942" title="赞">(<span>0</span>)</a> <span>|</span><a
                                                num="0" class="relay" href="http://t.qq.com/p/t/303467114729082">转播</a><span>|</span><a
                                                    num="0" class="comt" href="http://t.qq.com/p/t/303467114729082">评论</a><span>|</span><a
                                                        class="fav" href="#">收藏</a></div>
                </div>
            </div>
        </li>
    </ul>
</section>
<ul class="tab_search fix_bottom">
    <li class="tabcrt">登录</li>
    <li class="tab_hotel jsHotel">注册</li>
</ul>

结语

刚开始写感觉还不错，几个小时过去了，我感觉有点来不起了，暂时到这里吧，换个时间我们搞个更好的例子