【單頁應用】一塊兒來單頁應用吧，實現簡單微博功能！（總結）

前言

原本是說週末研究一下單頁應用來着，先是想發出來能夠監督本身學習下去，結果誰知道這個水很深，我連着就賠了一個週末進去，到盡頭還沒搞完。。。

此次這個框架並非我一個字寫出來的，而是參考了同事的框架，我師傅（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：暫時這個樣子吧，咱們邊寫邊改，看最後能作到什麼樣子，這裏仍是畫個圖

因而，咱們開始辛苦的基礎實現吧，畢竟咱們如今還神馬都米有！！！

基礎實現之繼承

其實，咱們是面向對象的，如果不面向對象應該會被噴吧，因而咱們來一塊兒完成一個基礎的繼承類吧：

 1 var b = {};//base
 2 var slice = [].slice;
 3 
 4 b.Class = function (supClass, childAttr) {
 5     //如果傳了第一個類，便繼承之；不然實現新類
 6     if (typeof supClass === 'object') {
 7         childAttr = supClass;
 8         supClass = function () { };
 9     }
10 
11     //定義咱們建立的類12     var newClass = function () {
13         this._propertys_();
14         this.init.apply(this, arguments);
15     };
16     newClass.prototype = new supClass();
17 
18     var supInit = newClass.prototype.init || function () { };
19     var childInit = childAttr.init || function () { };
20     var _supAttr = newClass.prototype._propertys_ || function () { };
21     var _childAttr = childAttr._propertys_ || function () { };
22 
23     for (var k in childAttr) {
24         //_propertys_中做爲私有屬性
25         childAttr.hasOwnProperty(k) && (newClass.prototype[k] = childAttr[k]);
26     }
27 
28     //繼承的屬性有可能重寫init方法
29     if (arguments.length && arguments[0].prototype && arguments[0].prototype.init === supInit) {
30         //重寫新建類，初始化方法，傳入其繼承類的init方法
31         newClass.prototype.init = function () {
32             var scope = this;
33             var args = [function () {
34                 supInit.apply(scope, arguments);
35             } ];
36             childInit.apply(scope, args.concat(slice.call(arguments)));
37         };
38     }
39 
40     //內部屬性賦值
41     newClass.prototype._propertys_ = function () {
42         _supAttr.call(this);
43         _childAttr.call(this);
44     };
45 
46     //成員屬性
47     for (var k in supClass) {
48         supClass.hasOwnProperty(k) && (newClass[k] = supClass[k]);
49     }
50     return newClass;
51 };

代碼仍是很好理解的：

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

首先，咱們來看鳥類都能呼吸，都有名字與年齡，因此咱們這麼幹：

 1 var Bird = new b.Class({
 2     //做爲自身屬性將被調用，裏面必須採用this.XX的方式書寫
 3     _propertys_: function () {
 4         this.name = '鳥類';
 5         this.age = 0;
 6     },
 7     //必定會被執行的初始化方法
 8     init: function () {
 9         alert('必定會執行');
10     },
11     //原型方法
12     breathe: function () {
13         alert('我能呼吸');
14     }
15 });
16 
17 var b = new Bird({des: '測試init方法是否能捕獲參數'});
18 
19 var s = '';

這裏咱們的init自動執行了，而且，其會用到傳入的參數！！！

這是咱們獲得的鳥類實例。

好了，咱們來實例化一個雞的類，而且他擁有嚎叫打鳴的本領，與性別的特徵

 1 var Chicken = new b.Class(Bird, {
 2     _propertys_: function () {
 3         this.sex = '公';
 4     },
 5     //必定會被執行的初始化方法
 6     init: function () {
 7         alert('我是一隻雞');
 8     },
 9     //原型方法
10     howl: function () {
11         alert('我能打鳴');
12     }
13 });

這裏，父類的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應該統一繼承一個父類，因而咱們來嘗試性試試吧

初版

  1 b.AbstractView = b.Class({
  2     //基本view應該具備的屬性
  3     _propertys_: function () {
  4         this.id = (new Date()).getTime(); //惟一pageID
  5         this.rootBox = $('body'); //視圖容器
  6         this.root = $('<div/>'); //視圖的根元素，可進行設置
  7         this.header = null;
  8         this.footer = null;
  9         this.template = '';//可能的模板
 10         this.isCreated = false;//是否建立完畢
 11         this.status = b.AbstractView.STATE_NOTCREATE;//當前狀態
 12     },
 13     init: function () {
 14     },
 15     //定義將要用到的事件，其中元素選取都會以root爲標準，因此使用內部提供函數吧
 16     events: {
 17         'selector,eventType': 'func'
 18     },
 19     //默認屬性
 20     attrs: {
 21     },
 22     //獲取視圖元素
 23     find: function (selector) {
 24         return this.root.find(selector);
 25     }, 
 26     //建立dom
 27     create: function (opts) {
 28         if(!this.isCreated && this.status != b.AbstractView.STATE_ONCREATE) {
 29             var attr = opts && opts.attr;
 30             var html = this.createHtml();
 31             this.initRoot(attr);//初始化root
 32             this.hide();
 33             this.rootBox.append(this.root);
 34             this.root.html(html);
 35             this.trigger('onCreate');//觸發正在建立事件，其實這裏都建立完了
 36             this.status = b.AbstractView.STATE_ONCREATE;
 37             this.isCreated = true;
 38             this.bindEvent();
 39         }
 40     },
 41     //呈現/渲染視圖
 42     show: function (callback) {
 43         if(this.status == b.AbstractView.STATE_ONSHOW) {
 44             return;
 45         }
 46         this.create();
 47         this.root.show();
 48         this.trigger('onShow');
 49         this.status = b.AbstractView.STATE_ONSHOW
 50         callback && (typeof callback == 'function') && callback.call(this);
 51         this.trigger('onLoad');
 52     },
 53     //隱藏dom
 54     hide: function (callback) {
 55         if(!this.root || this.status == b.AbstractView.STATE_ONHIDE) {
 56             return;
 57         }
 58         this.root.hide();
 59         this.trigger('onHide');
 60         this.status = b.AbstractView.STATE_ONHIDE;
 61         callback && (typeof callback == 'function') && callback();
 62     },
 63     //事件綁定
 64     bindEvent: function () {
 65         var events = this.events;
 66         for(var k in events) {
 67             var sec_type = k.replace(/\s/i, '').split(',');
 68             var func = events[k];
 69             if(sec_type &&sec_type.length == 2 && typeof func == 'function') {
 70                 var selector = sec_type[0];
 71                 var type = sec_type[1];
 72                 var scope = this;
 73                 this.find(selector).on(type, function () {
 74                     func.call(scope, $(this));
 75                 })
 76             }
 77         }
 78     },
 79     //此處能夠配合模板與相關參數組成html
 80     //解析模板也放到此處
 81     createHtml: function () {
 82         throw new Error('請從新定義createHtml方法');
 83     },
 84     initRoot: function () {
 85         var attr = this.attrs;
 86         if(!attr) {
 87             return;
 88         }
 89         for(var k in attr) {
 90             if(k == 'className') {
 91                 this.root.attr('class', attr[k]);
 92             }else {
 93                 this.root.attr(k, attr[k]);
 94             }
 95         }
 96        this.root.attr('id', this.id);
 97     },
 98     //觸發事件
 99     trigger: function (k, args) {
100         var event = this[k];
101         args = args || [];
102         if(event && typeof event == 'function') {
103             event.apply(this, args)
104         }
105     },
106     setRootBox: function (dom) {
107         this.rootBox = dom;
108     },
109     setAttr: function (k, v) {
110         this.root.attr(k, v);
111     },
112     getAttr: function (k) {
113         return this.root.attr(k);
114     },
115     setCss: function (k, v) {
116         this.root.css(k, v);
117     },
118     getCss: function (k) {
119         return this.root.css(k);
120     },
121     //dom建立後執行
122     onCreate: function () {
123 
124     },
125     //dom建立後數據加載時執行，用於加載後執行咱們的邏輯
126     onLoad: function () {
127 
128     },
129     //dom建立後，未顯示
130     onShow: function () {
131 
132     },
133     //dom隱藏前
134     onHide: function () {
135 
136     }
137 });
138 
139 //組件狀態,未建立
140 b.AbstractView.STATE_NOTCREATE = 'notCreate';
141 //組件狀態,已建立但未顯示
142 b.AbstractView.STATE_ONCREATE = 'onCreate';
143 //組件狀態,已顯示
144 b.AbstractView.STATE_ONSHOW = 'onShow';
145 //組件狀態,已隱藏
146 b.AbstractView.STATE_ONHIDE = 'onHide';

代碼註釋寫的很詳細了，我這裏就很少說了，咱們來用一個例子試一試：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <script src="res/libs/jquery.js" type="text/javascript"></script>
 7     <script src="res/test/c.base.js" type="text/javascript"></script>
 8 </head>
 9 <body>
10 
11 </body>
12 <script type="text/javascript">
13     var PageView = b.Class(b.AbstractView, {
14         _propertys_: function () {
15             this.template = '我是葉小釵';
16         },
17         init: function (superInit) {
18             console.log(superInit);
19             console.log('init');
20         },
21         createHtml: function () {
22             var htm = [
23             '<header>標題</header>',
24             '<div class="main">',
25                 '<input type="text" id="txt" />',
26                 '<input type="button" id="bt" value="點擊我" />',
27                 this.template,
28             '</div>',
29             '<footer>頁尾</footer>'
30             ].join('');
31             return htm;
32         },
33         attrs: {
34             'data-id': 'test',
35             className: 'yexiaoc'
36         },
37         events: {
38             '#bt,click': function (el) {
39                 var txt = this.find('#txt');
40                 alert(txt.val())
41             }
42         },
43         onCreate: function () {
44             console.log('onCreate');
45         },
46         //dom建立後數據加載時執行，用於加載後執行咱們的邏輯
47         onLoad: function () {
48             console.log('onLoad');
49         },
50         //dom建立後，未顯示
51         onShow: function () {
52             console.log('onShow');
53         },
54         //dom隱藏前
55         onHide: function () {
56             console.log('onHide');
57         }
58     });
59     var view = new PageView();
60     view.show();
61     var s = '';
62 </script>
63 </html>

初步實現咱們的指望

繼承之實現APP

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

因爲咱們會處理request請求，壓入hash以達到後退功能有效，因此這裏先來實現一個hash類吧

實現Hash對象

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

 1 var indexOf = function (k, arr) {
 2     if (!arr) {
 3         return -1;
 4     }
 5     //如果對象自己便竟然indexof，便使用自身的，好比字符串
 6     if (arr.indexOf) {
 7         return arr.indexOf(k);
 8     }
 9     for (var i = 0, len = arr.length; i < len; i++) {
10         if (arr[i] == k) {
11             return i;
12         }
13     }
14     return -1;
15 };

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

 1 b.Hash = b.Class({
 2     _propertys_: function () {
 3         this.keys = [];
 4         this.values = [];
 5     },
 6     init: function (obj) {
 7         (typeof obj == 'object') || (obj = {}); //???
 8         for (var k in obj) {
 9             if (obj.hasOwnProperty(k)) {
10                 this.keys.push(k);
11                 this.values.push(obj[k]);
12             }
13         }
14     },
15     length: function () {
16         return this.keys.length;
17     },
18     getItem: function (k) {
19         var index = indexOf(k, this.keys);
20         if (index < 0) {
21             return null;
22         }
23         return this.keys[index];
24     },
25     getKey: function (i) {
26         return this.keys[i];
27     },
28     getValue: function (i) {
29         return this.values[i];
30     },
31     add: function (k, v) {
32         return this.push(k, v);
33     },
34     del: function (k) {
35         var index = indexOf(k, this.keys);
36         return this.delByIndex(index);
37     },
38     delByIndex: function (index) {
39         if (index < 0) return this;
40         this.keys.splice(index, 1);
41         this.vaules.splice(index, 1);
42         return this;
43     },
44     //移除棧頂hash，並返回
45     pop: function () {
46         if (!this.keys.length) return null;
47         this.keys.pop();
48         return this.values.pop();
49     },
50     push: function (k, v, order) {
51         if (typeof k == 'object' && !v) {
52             for (var i in k) {
53                 if (k.hasOwnProperty(i)) {
54                     this.push(i, k[i], order);
55                 }
56             }
57         } else {
58             var index = indexOf(k, this.keys);
59             if (index < 0 || order) {
60                 if (order) this.del(k);
61                 this.keys.push[k];
62                 this.values.push[v];
63             } else {
64                 this.values[index] = v;
65             }
66         }
67     },
68     //查找hash表，返回key
69     indexOf: function (v) {
70         var index = indexOf(v, this.vaules);
71         if (index >= 0) {
72             return this.keys[index];
73         }
74         return -1;
75     },
76     each: function (handler) {
77         if (typeof handler == 'function') {
78             for (var i = 0, len = this.length(); i < len; i++) {
79                 handler.call(this, this.keys[i], this.vaules[i]);
80             }
81         }
82     },
83     getObj: function () {
84         var obj = {};
85         for (var i = 0, len = this.length(); i < len; i++) {
86             obj[this.keys[i]] = this.values[i];
87         }
88         return obj;
89     }
90 });

此hash對象基本就是數組的寫照，各位能夠對照着看，因而咱們繼續咱們的app

app雛形

  1 var Application = new b.Class({
  2     _propertys_: function () {
  3         var scope = this;
  4         this.webRoot = ''; //應用跟目錄
  5         this.head = $('head');
  6         this.body = $('body');
  7         this.viewRoot = 'views/'; //視圖所在目錄
  8         this.defaultView = 'index'; //默認加載視圖
  9 
 10         this.request; //請求對象
 11         this.viewPath; //當前請求視圖路徑，解析request得出
 12         this.mainFrame; //主框架
 13         this.viewPort; //視圖框架
 14         this.stateDom; //狀態欄
 15 
 16         this.views = new b.Hash(); //views保存瀏覽器存儲的hash
 17         this.curView; //當前視圖
 18         this.interface = {}; //提供給視圖訪問的接口，暫時無論
 19         this.history = []; //歷史記錄
 20 
 21         //        this.stopListening = false;//是否開啓監聽
 22 
 23         this.onHashChange = function () {
 24             scope.history.push(window.location.href);
 25             var url = decodeURIComponent(window.location.hash.replace(/^#+/i, '')).toLowerCase();
 26             scope._onHashChange(url);
 27         };
 28 
 29         this.lastHash = '';
 30         this.lastFullHash = '';
 31         this.isChangeHash = false; //hash是否發生變化
 32     },
 33     init: function (opts) {
 34         //爲屬性賦值
 35         opts = opts || {};
 36         for (var k in opts) {
 37             this[k] = opts[k];
 38         }
 39         this.createViewPort();
 40         this.bindEvent(); //事件綁定
 41     },
 42 
 43     //建立app頁面基本框架，此處不能使用id，由於。。。
 44     createViewPort: function () {
 45         var htm = [
 46             '<div class="main-frame">',
 47                 '<div class="main-viewport"></div>',
 48                 '<div class="main-state"></div>',
 49             '</div>'
 50         ].join('');
 51         this.mainframe = $(htm);

 52         this.viewport = this.mainframe.find('.main-viewport');
 53         this.statedom = this.mainframe.find('.main-state');
 54         var body = $('body');
 55         body.html('');
 56         body.append(this.mainframe);
 57     },
 58     //！！！！！！很是重要哦！！！！！！
 59     bindEvent: function () {
 60         var scope = this;
 61         //暫時不使用requireJS
 62         //        requirejs.onError = function () {};
 63         $(window).bind('hashchange', this.onHashChange);
 64     },
 65     _onHashChange: function (url) {
 66         url = url.replace(/^#+/i, '');
 67         var req = this.parseHash(url);
 68 
 69         this.request = req;
 70         this.viewPath = this.viewPath || this.defaultView;
 71         this.loadView(this.viewPath); //！！！重要的視圖加載
 72     },
 73     //該方法慢慢看吧。。。
 74     parseHash: function (hash) {
 75         var fullhash = hash,
 76                 hash = hash.replace(/([^\|]*)(?:\|.*)?$/img, '$1'),
 77                 h = /^([^?&|]*)(.*)?$/i.exec(hash),
 78                 vp = h[1] ? h[1].split('!') : [],
 79                 viewpath = (vp.shift() || '').replace(/(^\/+|\/+$)/i, ''),
 80                 path = vp.length ? vp.join('!').replace(/(^\/+|\/+$)/i, '').split('/') : [],
 81                 q = (h[2] || '').replace(/^\?*/i, '').split('&'),
 82                 query = {}, y;
 83         this.isChangeHash = !!(!this.lastHash && fullhash === this.lashFullHash) || !!(this.lastHash && this.lastHash !== hash);
 84         if (q) {
 85             for (var i = 0; i < q.length; i++) {
 86                 if (q[i]) {
 87                     y = q[i].split('=');
 88                     y[1] ? (query[y[0]] = y[1]) : (query[y[0]] = true);
 89                 }
 90             }
 91         }
 92 
 93         this.lastHash = hash;
 94         this.lashFullHash = fullhash;
 95         return {
 96             viewpath: viewpath,
 97             path: path,
 98             query: query,
 99             root: location.pathname + location.search
100         };
101     },
102     //!!!很是重要
103     loadView: function (viewPath) {
104         var id = viewPath;
105         var scope = this;
106         //此處原本應該判斷是否已經有該視圖，可是咱們暫時無論，咱們只要加載了相關視圖就算成功
107         /*
108         一些操做
109         */
110 
111         //此處應該加載咱們的js文件
112         $.getScript(this.buildUrl(viewPath), function () {
113             var view = new PageView();
114             view.show();
115             scope.viewport.append(curView.$el);
116             var s = ''; 
117         });
118         //！！！暫時不使用requireJS
119         //        var self = this;
120         //        requirejs([this.buildUrl(path)], function (View) {
121         //            callback && callback.call(self, View);
122         //        });
123     },
124     buildUrl: function (path) {
125         return this.viewRoot = path;
126     }
127 });

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

簡單測試

html代碼：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <script src="res/libs/jquery.js" type="text/javascript"></script>
 7     <script src="res/test/c.base.js" type="text/javascript"></script>
 8 </head>
 9 <body>
10 </body>
11 <script src="res/test/app.js" type="text/javascript"></script>
12 <script type="text/javascript">
13     var app = new Application();
14 
15 </script>
16 </html>

base代碼：

  1 /// <reference path="../libs/underscore.js" />
  2 
  3 /// <reference path="../libs/jquery.js" />
  4 
  5 /// <reference path="../libs/require.js" />
  6 
  7 /// <reference path="../libs/require.text.js" />
  8 
  9 
 10 
 11 
 12 var b = {};//base
 13 var slice = [].slice;
 14 var indexOf = function (k, arr) {
 15     if (!arr) {
 16         return -1;
 17     }
 18     //如果對象自己便竟然indexof，便使用自身的，好比字符串
 19     if (arr.indexOf) {
 20         return arr.indexOf(k);
 21     }
 22     for (var i = 0, len = arr.length; i < len; i++) {
 23         if (arr[i] == k) {
 24             return i;
 25         }
 26     }
 27     return -1;
 28 };
 29 
 30 b.Class = function (supClass, childAttr) {
 31     //如果傳了第一個類，便繼承之；不然實現新類
 32     if (typeof supClass === 'object') {
 33         childAttr = supClass;
 34         supClass = function () { };
 35     }
 36 
 37     //    var supProto = supClass.prototype;
 38     var newClass = function () {
 39         this._propertys_ && this._propertys_();
 40         this.init && this.init.apply(this, arguments);
 41     };
 42     newClass.prototype = new supClass();
 43 
 44     var supInit = newClass.prototype.init || function () { };
 45     var childInit = childAttr.init || function () { };
 46     var _supAttr = newClass.prototype._propertys_ || function () { };
 47     var _childAttr = childAttr._propertys_ || function () { };
 48 
 49     for (var k in childAttr) {
 50         //_propertys_中做爲私有屬性
 51         childAttr.hasOwnProperty(k) && (newClass.prototype[k] = childAttr[k]);
 52     }
 53 
 54     //繼承的屬性有可能重寫init方法
 55     if (arguments.length && arguments[0].prototype && arguments[0].prototype.init === supInit) {
 56         //重寫新建類，初始化方法，傳入其繼承類的init方法
 57         newClass.prototype.init = function () {
 58             var scope = this;
 59             var args = [function () {
 60                 supInit.apply(scope, arguments);
 61             } ];
 62             childInit.apply(scope, args.concat(slice.call(arguments)));
 63         };
 64     }
 65 
 66     //內部屬性賦值
 67     newClass.prototype._propertys_ = function () {
 68         _supAttr.call(this);
 69         _childAttr.call(this);
 70     };
 71 
 72     //成員屬性
 73     for (var k in supClass) {
 74         supClass.hasOwnProperty(k) && (newClass[k] = supClass[k]);
 75     }
 76     return newClass;
 77 };
 78 
 79 b.AbstractView = b.Class({
 80     //基本view應該具備的屬性
 81     _propertys_: function () {
 82         this.id = (new Date()).getTime(); //惟一pageID
 83         this.rootBox = $('body'); //視圖容器
 84         this.root = $('<div/>'); //視圖的根元素，可進行設置
 85         this.header = null;
 86         this.footer = null;
 87         this.template = '';//可能的模板
 88         this.isCreated = false;//是否建立完畢
 89         this.status = b.AbstractView.STATE_NOTCREATE;//當前狀態
 90     },
 91     init: function () {
 92     },
 93     //定義將要用到的事件，其中元素選取都會以root爲標準，因此使用內部提供函數吧
 94     events: {
 95         'selector,eventType': 'func'
 96     },
 97     //默認屬性
 98     attrs: {
 99     },
100     //獲取視圖元素
101     find: function (selector) {
102         return this.root.find(selector);
103     }, 
104     //建立dom
105     create: function (opts) {
106         if(!this.isCreated && this.status != b.AbstractView.STATE_ONCREATE) {
107             var attr = opts && opts.attr;
108             var html = this.createHtml();
109             this.initRoot(attr);//初始化root
110             this.hide();
111             this.rootBox.append(this.root);
112             this.root.html(html);
113             this.trigger('onCreate');//觸發正在建立事件，其實這裏都建立完了
114             this.status = b.AbstractView.STATE_ONCREATE;
115             this.isCreated = true;
116             this.bindEvent();
117         }
118     },
119     //呈現/渲染視圖
120     show: function (callback) {
121         if(this.status == b.AbstractView.STATE_ONSHOW) {
122             return;
123         }
124         this.create();
125         this.root.show();
126         this.trigger('onShow');
127         this.status = b.AbstractView.STATE_ONSHOW
128         callback && (typeof callback == 'function') && callback.call(this);
129         this.trigger('onLoad');
130     },
131     //隱藏dom
132     hide: function (callback) {
133         if(!this.root || this.status == b.AbstractView.STATE_ONHIDE) {
134             return;
135         }
136         this.root.hide();
137         this.trigger('onHide');
138         this.status = b.AbstractView.STATE_ONHIDE;
139         callback && (typeof callback == 'function') && callback();
140     },
141     //事件綁定
142     bindEvent: function () {
143         var events = this.events;
144         for(var k in events) {
145             var sec_type = k.replace(/\s/i, '').split(',');
146             var func = events[k];
147             if(sec_type &&sec_type.length == 2 && typeof func == 'function') {
148                 var selector = sec_type[0];
149                 var type = sec_type[1];
150                 var scope = this;
151                 this.find(selector).on(type, function () {
152                     func.call(scope, $(this));
153                 })
154             }
155         }
156     },
157     //此處能夠配合模板與相關參數組成html
158     //解析模板也放到此處
159     createHtml: function () {
160         throw new Error('請從新定義createHtml方法');
161     },
162     initRoot: function () {
163         var attr = this.attrs;
164         if(!attr) {
165             return;
166         }
167         for(var k in attr) {
168             if(k == 'className') {
169                 this.root.attr('class', attr[k]);
170             }else {
171                 this.root.attr(k, attr[k]);
172             }
173         }
174        this.root.attr('id', this.id);
175     },
176     //觸發事件
177     trigger: function (k, args) {
178         var event = this[k];
179         args = args || [];
180         if(event && typeof event == 'function') {
181             event.apply(this, args)
182         }
183     },
184     setRootBox: function (dom) {
185         this.rootBox = dom;
186     },
187     setAttr: function (k, v) {
188         this.root.attr(k, v);
189     },
190     getAttr: function (k) {
191         return this.root.attr(k);
192     },
193     setCss: function (k, v) {
194         this.root.css(k, v);
195     },
196     getCss: function (k) {
197         return this.root.css(k);
198     },
199     //dom建立後執行
200     onCreate: function () {
201 
202     },
203     //dom建立後數據加載時執行，用於加載後執行咱們的邏輯
204     onLoad: function () {
205 
206     },
207     //dom建立後，未顯示
208     onShow: function () {
209 
210     },
211     //dom隱藏前
212     onHide: function () {
213 
214     }
215 });
216 
217 //組件狀態,未建立
218 b.AbstractView.STATE_NOTCREATE = 'notCreate';
219 //組件狀態,已建立但未顯示
220 b.AbstractView.STATE_ONCREATE = 'onCreate';
221 //組件狀態,已顯示
222 b.AbstractView.STATE_ONSHOW = 'onShow';
223 //組件狀態,已隱藏
224 b.AbstractView.STATE_ONHIDE = 'onHide';
225 
226 b.Hash = b.Class({
227     _propertys_: function () {
228         this.keys = [];
229         this.values = [];
230     },
231     init: function (obj) {
232         (typeof obj == 'object') || (obj = {}); //???
233         for (var k in obj) {
234             if (obj.hasOwnProperty(k)) {
235                 this.keys.push(k);
236                 this.values.push(obj[k]);
237             }
238         }
239     },
240     length: function () {
241         return this.keys.length;
242     },
243     getItem: function (k) {
244         var index = indexOf(k, this.keys);
245         if (index < 0) {
246             return null;
247         }
248         return this.keys[index];
249     },
250     getKey: function (i) {
251         return this.keys[i];
252     },
253     getValue: function (i) {
254         return this.values[i];
255     },
256     add: function (k, v) {
257         return this.push(k, v);
258     },
259     del: function (k) {
260         var index = indexOf(k, this.keys);
261         return this.delByIndex(index);
262     },
263     delByIndex: function (index) {
264         if (index < 0) return this;
265         this.keys.splice(index, 1);
266         this.vaules.splice(index, 1);
267         return this;
268     },
269     //移除棧頂hash，並返回
270     pop: function () {
271         if (!this.keys.length) return null;
272         this.keys.pop();
273         return this.values.pop();
274     },
275     push: function (k, v, order) {
276         if (typeof k == 'object' && !v) {
277             for (var i in k) {
278                 if (k.hasOwnProperty(i)) {
279                     this.push(i, k[i], order);
280                 }
281             }
282         } else {
283             var index = indexOf(k, this.keys);
284             if (index < 0 || order) {
285                 if (order) this.del(k);
286                 this.keys.push[k];
287                 this.values.push[v];
288             } else {
289                 this.values[index] = v;
290             }
291         }
292     },
293     //查找hash表，返回key
294     indexOf: function (v) {
295         var index = indexOf(v, this.vaules);
296         if (index >= 0) {
297             return this.keys[index];
298         }
299         return -1;
300     },
301     each: function (handler) {
302         if (typeof handler == 'function') {
303             for (var i = 0, len = this.length(); i < len; i++) {
304                 handler.call(this, this.keys[i], this.vaules[i]);
305             }
306         }
307     },
308     getObj: function () {
309         var obj = {};
310         for (var i = 0, len = this.length(); i < len; i++) {
311             obj[this.keys[i]] = this.values[i];
312         }
313         return obj;
314     }
315 });

base核心

app代碼：

  1 /// <reference path="../libs/underscore.js" />
  2 
  3 /// <reference path="../libs/jquery.js" />
  4 
  5 /// <reference path="../libs/require.js" />
  6 
  7 /// <reference path="../libs/require.text.js" />
  8 
  9 
 10 
 11 var Application = new b.Class({
 12     _propertys_: function () {
 13         var scope = this;
 14         this.webRoot = ''; //應用跟目錄
 15         this.head = $('head');
 16         this.body = $('body');
 17         this.viewRoot = 'res/test/'; //視圖所在目錄
 18         this.defaultView = 'index'; //默認加載視圖
 19 
 20         this.request; //請求對象
 21         this.viewPath; //當前請求視圖路徑，解析request得出
 22         this.mainFrame; //主框架
 23         this.viewPort; //視圖框架
 24         this.stateDom; //狀態欄
 25 
 26         this.views = new b.Hash(); //views保存瀏覽器存儲的hash
 27         this.curView; //當前視圖
 28         this.interface = {}; //提供給視圖訪問的接口，暫時無論
 29         this.history = []; //歷史記錄
 30 
 31         //        this.stopListening = false;//是否開啓監聽
 32 
 33         this.onHashChange = function () {
 34             scope.history.push(window.location.href);
 35             var url = decodeURIComponent(window.location.hash.replace(/^#+/i, '')).toLowerCase();
 36             scope._onHashChange(url);
 37         };
 38 
 39         this.lastHash = '';
 40         this.lastFullHash = '';
 41         this.isChangeHash = false; //hash是否發生變化
 42     },
 43     init: function (opts) {
 44         console.log('app init');
 45         //爲屬性賦值
 46         opts = opts || {};
 47         for (var k in opts) {
 48             this[k] = opts[k];
 49         }
 50         this.createViewPort();
 51         this.bindEvent(); //事件綁定
 52     },
 53 
 54     //建立app頁面基本框架，此處不能使用id，由於。。。
 55     createViewPort: function () {
 56         var htm = [
 57             '<div class="main-frame">',
 58                 '<div class="main-viewport"></div>',
 59                 '<div class="main-state"></div>',
 60             '</div>'
 61         ].join('');
 62         this.mainframe = $(htm);
 63         this.viewport = this.mainframe.find('.main-viewport');
 64         this.statedom = this.mainframe.find('.main-state');
 65         var body = $('body');
 66         body.html('');
 67         body.append(this.mainframe);
 68     },
 69     //！！！！！！很是重要哦！！！！！！
 70     bindEvent: function () {
 71         var scope = this;
 72         //暫時不使用requireJS
 73         //        requirejs.onError = function () {};
 74         $(window).bind('hashchange', this.onHashChange);
 75     },
 76     _onHashChange: function (url) {
 77         url = url.replace(/^#+/i, '');
 78         var req = this.parseHash(url);
 79 
 80         this.request = req;
 81         this.viewPath = this.viewPath || this.defaultView;
 82         this.loadView(this.viewPath); //！！！重要的視圖加載
 83     },
 84     //該方法慢慢看吧。。。
 85     parseHash: function (hash) {
 86         var fullhash = hash,
 87                 hash = hash.replace(/([^\|]*)(?:\|.*)?$/img, '$1'),
 88                 h = /^([^?&|]*)(.*)?$/i.exec(hash),
 89                 vp = h[1] ? h[1].split('!') : [],
 90                 viewpath = (vp.shift() || '').replace(/(^\/+|\/+$)/i, ''),
 91                 path = vp.length ? vp.join('!').replace(/(^\/+|\/+$)/i, '').split('/') : [],
 92                 q = (h[2] || '').replace(/^\?*/i, '').split('&'),
 93                 query = {}, y;
 94         this.isChangeHash = !!(!this.lastHash && fullhash === this.lashFullHash) || !!(this.lastHash && this.lastHash !== hash);
 95         if (q) {
 96             for (var i = 0; i < q.length; i++) {
 97                 if (q[i]) {
 98                     y = q[i].split('=');
 99                     y[1] ? (query[y[0]] = y[1]) : (query[y[0]] = true);
100                 }
101             }
102         }
103 
104         this.lastHash = hash;
105         this.lashFullHash = fullhash;
106         return {
107             viewpath: viewpath,
108             path: path,
109             query: query,
110             root: location.pathname + location.search
111         };
112     },
113     //!!!很是重要
114     loadView: function (viewPath) {
115         var id = viewPath;
116         var scope = this;
117         //此處原本應該判斷是否已經有該視圖，可是咱們暫時無論，咱們只要加載了相關視圖就算成功
118         /*
119         一些操做
120         */
121 
122         var path = this.buildUrl(viewPath);
123 
124         //此處應該加載咱們的js文件
125         $.getScript(this.buildUrl(viewPath) + '.js', function () {
126             var view = new PageView();
127             view.show();
128             scope.viewport.append(view.root);
129             var s = '';
130         });
131         //！！！暫時不使用requireJS
132         //        var self = this;
133         //        requirejs([this.buildUrl(path)], function (View) {
134         //            callback && callback.call(self, View);
135         //        });
136     },
137     buildUrl: function (path) {
138         return this.viewRoot + path;
139     }
140 });

APP

文件結構：

測試結果

我可恥的以爲本身成功了一半了。。。

基本流程講解

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>

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

main

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

app

1 define(['cBase', 'cView'], function (base, view) {
2     var c = {
3         base: base,
4         view: view
5     };
6 
7     return c;
8 });

c

  1 define([], function () {
  2 
  3     var base = {}; //base
  4     var slice = [].slice;
  5     var indexOf = function (k, arr) {
  6         if (!arr) {
  7             return -1;
  8         }
  9         //如果對象自己便竟然indexof，便使用自身的，好比字符串
 10         if (arr.indexOf) {
 11             return arr.indexOf(k);
 12         }
 13         for (var i = 0, len = arr.length; i < len; i++) {
 14             if (arr[i] == k) {
 15                 return i;
 16             }
 17         }
 18         return -1;
 19     };
 20 
 21     base.Class = function (supClass, childAttr) {
 22         //如果傳了第一個類，便繼承之；不然實現新類
 23         if (typeof supClass === 'object') {
 24             childAttr = supClass;
 25             supClass = function () { };
 26         }
 27 
 28         //    var supProto = supClass.prototype;
 29         var newClass = function () {
 30             this._propertys_ && this._propertys_();
 31             this.init && this.init.apply(this, arguments);
 32         };
 33         newClass.prototype = new supClass();
 34 
 35         var supInit = newClass.prototype.init || function () { };
 36         var childInit = childAttr.init || function () { };
 37         var _supAttr = newClass.prototype._propertys_ || function () { };
 38         var _childAttr = childAttr._propertys_ || function () { };
 39 
 40         for (var k in childAttr) {
 41             //_propertys_中做爲私有屬性
 42             childAttr.hasOwnProperty(k) && (newClass.prototype[k] = childAttr[k]);
 43         }
 44 
 45         //繼承的屬性有可能重寫init方法
 46         if (arguments.length && arguments[0].prototype && arguments[0].prototype.init === supInit) {
 47             //重寫新建類，初始化方法，傳入其繼承類的init方法
 48             newClass.prototype.init = function () {
 49                 var scope = this;
 50                 var args = [function () {
 51                     supInit.apply(scope, arguments);
 52                 } ];
 53                 childInit.apply(scope, args.concat(slice.call(arguments)));
 54             };
 55         }
 56 
 57         //內部屬性賦值
 58         newClass.prototype._propertys_ = function () {
 59             _supAttr.call(this);
 60             _childAttr.call(this);
 61         };
 62 
 63         //成員屬性
 64         for (var k in supClass) {
 65             supClass.hasOwnProperty(k) && (newClass[k] = supClass[k]);
 66         }
 67         return newClass;
 68     };
 69     
 70     base.Hash = base.Class({
 71         _propertys_: function () {
 72             this.keys = [];
 73             this.values = [];
 74         },
 75         init: function (obj) {
 76             (typeof obj == 'object') || (obj = {}); //???
 77             for (var k in obj) {
 78                 if (obj.hasOwnProperty(k)) {
 79                     this.keys.push(k);
 80                     this.values.push(obj[k]);
 81                 }
 82             }
 83         },
 84         length: function () {
 85             return this.keys.length;
 86         },
 87         getItem: function (k) {
 88             var index = indexOf(k, this.keys);
 89             if (index < 0) {
 90                 return null;
 91             }
 92             return this.keys[index];
 93         },
 94         getKey: function (i) {
 95             return this.keys[i];
 96         },
 97         getValue: function (i) {
 98             return this.values[i];
 99         },
100         add: function (k, v) {
101             return this.push(k, v);
102         },
103         del: function (k) {
104             var index = indexOf(k, this.keys);
105             return this.delByIndex(index);
106         },
107         delByIndex: function (index) {
108             if (index < 0) return this;
109             this.keys.splice(index, 1);
110             this.vaules.splice(index, 1);
111             return this;
112         },
113         //移除棧頂hash，並返回
114         pop: function () {
115             if (!this.keys.length) return null;
116             this.keys.pop();
117             return this.values.pop();
118         },
119         push: function (k, v, order) {
120             if (typeof k == 'object' && !v) {
121                 for (var i in k) {
122                     if (k.hasOwnProperty(i)) {
123                         this.push(i, k[i], order);
124                     }
125                 }
126             } else {
127                 var index = indexOf(k, this.keys);
128                 if (index < 0 || order) {
129                     if (order) this.del(k);
130                     this.keys.push[k];
131                     this.values.push[v];
132                 } else {
133                     this.values[index] = v;
134                 }
135             }
136         },
137         //查找hash表，返回key
138         indexOf: function (v) {
139             var index = indexOf(v, this.vaules);
140             if (index >= 0) {
141                 return this.keys[index];
142             }
143             return -1;
144         },
145         each: function (handler) {
146             if (typeof handler == 'function') {
147                 for (var i = 0, len = this.length(); i < len; i++) {
148                     handler.call(this, this.keys[i], this.vaules[i]);
149                 }
150             }
151         },
152         getObj: function () {
153             var obj = {};
154             for (var i = 0, len = this.length(); i < len; i++) {
155                 obj[this.keys[i]] = this.values[i];
156             }
157             return obj;
158         }
159     });
160 
161     return base;
162 
163 });

c.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;

});

c.view

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

index

至此咱們的代碼便徹底分離開了，接下來咱們來細化咱們的app文件。

細化/清晰結構

如今來看看咱們最後造成的結構：

咱們如今來一層層剝離他。

惟一的一個頁面demo

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

入口函數main

 1 window.BASEURL = '';
 2 window.VIEWS_PATH = 'views/';
 3 
 4 function getViewPath(path) {
 5     return 'text!' + VIEWS_PATH + path + '.html';
 6 }
 7 
 8 require.config({
 9     baseUrl: BASEURL,
10     shim: {
11         $: {
12             exports: 'jQuery'
13         },
14         _: {
15             exports: '_'
16         }
17     },
18     paths: {
19         '$': 'app/libs/jquery',
20         '_': 'app/libs/underscore',
21         'text': 'app/libs/require.text',
22 
23         'c': 'app/common/c',
24         'cBase': 'app/common/c.base',
25         'cStorage': 'app/common/c.storage',
26         'cStore': 'app/common/c.store',
27 
28         'cView': 'app/common/c.view',
29         'app': 'app/app',
30 
31 
32         's': 's'
33     }
34 });
35 
36 require(['app'], function (APP) {
37     new APP();
38 });

核心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;

});

View Code

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

});

View Code

路由/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;
});

View Code

基本應用，視圖與視圖模板

 1 define(['$', '_', 'cBase', 'cView', getViewPath('index')], function ($, _, b, v, html) {
 2     var View = b.Class(v.PageView, {
 3         _propertys_: function () {
 4             this.template = html;
 5             this.url = 'http://wcf.open.cnblogs.com/blog/sitehome/recent/10'; //獲取首頁文章
 6         },
 7         init: function (superInit, request, interface) {
 8             superInit(request, interface);
 9             console.log('init');
10         },
11         createHtml: function () {
12             return this.template;
13         },
14         attrs: {
15             'data-id': 'test',
16             className: 'yexiaoc'
17         },
18         events: {
19         },
20         onCreate: function () {
21             console.log('onCreate');
22         },
23         //dom建立後數據加載時執行，用於加載後執行咱們的邏輯
24         onLoad: function () {
25             console.log('onLoad');
26             $.get(this.url, function (data) {
27 
28                 var s = '';
29             });
30         },
31         //dom建立後，未顯示
32         onShow: function () {
33             console.log('onShow');
34         },
35         //dom隱藏前
36         onHide: function () {
37             console.log('onHide');
38         }
39     });
40 
41     return View;
42 });

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

View Code

總體代碼如上，如今咱們來利用他作一個簡單的應用

小試牛刀

咱們來從新定義下咱們的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;
});

View Code

 1 onLoad: function () {
 2     console.log('onLoad');
 3     $.getScript(this.url, function (data) {
 4         T.api("/statuses/home_timeline", null, "json", "GET")
 5         .success(function (addResponse, hometimelineResponse) {
 6             // 獲取主頁時間線數據
 7             var data = addResponse.data.info;
 8             var $timeline = $("#timeline");
 9             $.each(data, function (i, item) {
10                 $timeline.append("<li>" + item.origtext + "</li>");
11             });
12         }).error(function (code, message) {
13                 alert("操做失敗，" + message);
14         });
15     });
16 },

先無論其餘的，咱們來看看咱們得到了什麼：

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>

View Code

結語

剛開始寫感受還不錯，幾個小時過去了，我感受有點來不起了，暫時到這裏吧，換個時間咱們搞個更好的例子