成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端框架擼起來——組件和路由

番茄西紅柿 / 3064人閱讀

摘要：如何實現(xiàn)模塊化以及寫出優(yōu)雅的代碼，接下來就是組件和路由的事情。本框架我們約定組件有三個方法。本框架暫不支持瀏覽器地址路由，有興趣的同學可以自己實現(xiàn)。

框架只有一個html文件，html中只有一個id是app的div，如何點擊一個按鈕或者菜單來顯示對應的頁面呢？最初大家都是通過拼接html字符串，然后再綁定，這樣寫很不優(yōu)雅，當系統(tǒng)功能模塊龐大時，這樣下來難以維護。如何實現(xiàn)模塊化以及寫出優(yōu)雅的代碼，接下來就是組件和路由的事情。

組件（Component）

組件是龐大系統(tǒng)的一個個小的零件，組件可以進行嵌套。系統(tǒng)有多個頁面構(gòu)成，頁面有多個部件組成，頁面和部件都可以稱之為組件，他們都有共同的屬性和方法。本框架我們約定組件有render、mounted、destroy三個方法。

1）組件的定義

function TestPage() {    //這里寫組件的私有變量、共有屬性和方法、私有方法    var component1 = new Component1();//私有變量component1    var timer;//計時器}

2）呈現(xiàn)方法（render）

//這里是呈現(xiàn)TestPage組件的方法//dom是根節(jié)點app，也可以是其他頁面中的節(jié)點this.render = function(dom) {    $(
).html(Component1).appendTo(dom);//呈現(xiàn)一個div    component1.render(dom);//呈現(xiàn)嵌套組件component1}

3）掛載方法（mounted）

//這里是加載組件的后端接口數(shù)據(jù)this.mounted = function() {    component1.loadData();    timer = setInterval(function() {...}, 1000);}

4）銷毀方法（destroy）

//這里是銷毀組件的資源，例如一個setInterval的對象this.destroy = function() {    clearInterval(timer);}

5）組件完整代碼

function TestPage() {    var component1 = new Component1();    var timer;        this.render = function(dom) {        $(
).html(Component1).appendTo(dom);        component1.render(dom);    }        this.mounted = function() {        component1.loadData();        timer = setInterval(function() {...}, 1000);    }        this.destroy = function() {        clearInterval(timer);    }}

路由（Router）

路由是不同組件之前的轉(zhuǎn)換器，起到組件自由切換的作用。路由可以進行嵌套，即頁面是最頂級的組件，渲染在根節(jié)點下面，頁面內(nèi)部區(qū)塊也可以呈現(xiàn)不同的組件。本框架路由只提供兩個方法，即導航和回退，其實路由可以擴展更多的方法，如根據(jù)name或者模板來路由，這里暫不實現(xiàn)。本框架暫不支持瀏覽器地址路由，有興趣的同學可以自己實現(xiàn)。

1）路由的定義

//elem是路由的節(jié)點對象//option是路由的配置選項function Router(elem, option) {    //這里寫路由的私有變量、共有屬性和方法、私有方法    var _current = {};//存儲當前路由對象}

2）導航方法（route）

//路由到指定的組件//item為路由對象，必須包含component屬性this.route = function(item) {    //呈現(xiàn)前的驗證，例如登錄驗證    if (!_option.before(item))        return;    //銷毀當前組件    _destroyComponent();    //設置當前組件    _setCurrent(item);    //執(zhí)行組件    var component = item.component;    if (component) {        _renderComponent(component);        _mountComponent(item, component);    }}

3）回退方法（back）

//回退到當前路由的上一個路由this.back = function() {    _this.route(_current.previous);}

4）路由完整代碼

function Router(elem, option) {    //fields    var _option = option || {},        _elem = elem,        _current = {},        _this = this;    //methods    this.route = function (item) {        if (!_option.before(item))            return;        _destroyComponent();        _setCurrent(item);        var component = item.component;        if (component) {            _renderComponent(component);            _mountComponent(item, component);        }    }    this.back = function () {        _this.route(_current.previous);    }        //private    function _destroyComponent() {        var currComp = _current.component;        currComp && currComp.destroy && currComp.destroy();    }        function _setCurrent(item) {        if (!item.previous) {            item.previous = _current; //存儲上一個路由        }        _current = item;    }        function _renderComponent(component) {        if (typeof component === string) {            _elem.html(component);//字符串組件        } else {            _elem.html();//清空節(jié)點            component.render(_elem);//呈現(xiàn)組件        }    }        function _mountComponent(item, component) {        setTimeout(function () {            _option.after && _option.after(item);//呈現(xiàn)后回調(diào)公共邏輯            component.mounted && component.mounted();//調(diào)用后臺數(shù)據(jù)        }, 10);//延時執(zhí)行，等dom呈現(xiàn)完成后    }}

下一章我們實現(xiàn)框架根組件App。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/125098.html

相關(guān)文章

  • 手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇)

    摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    Channe 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇)

    摘要：社區(qū)的認可目前已經(jīng)是相關(guān)最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺 系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺 系列...

    zgbgx 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列五(v4.0新版本)

    摘要：同時增加了單元測試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會重寫瀏覽器的對象，從而才能攔截所有請求，代理到本地。 前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來，維護至今已經(jīng)有兩年多的時間了了，發(fā)布了四十多個版本，...

    MonoLog 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列五(v4.0新版本)

    摘要：同時增加了單元測試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會重寫瀏覽器的對象，從而才能攔截所有請求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來，維護至今已經(jīng)有兩年多的時間了了，發(fā)布了四十多個版本，收獲了三...

    graf 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)

    摘要：我們將登錄按鈕上綁上事件，點擊登錄之后向服務端提交賬號和密碼進行驗證。所以前端和后端權(quán)限的劃分是不太一致。側(cè)邊欄最后一個涉及到權(quán)限的地方就是側(cè)邊欄，不過在前 完整項目地址：vue-element-admin 系列文章： 手摸手，帶你用vue擼后臺 系列一（基礎(chǔ)篇） 手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇) 手摸手，帶你用vue擼后臺 系列三 (實戰(zhàn)篇) 手摸手，帶你用vu...

    不知名網(wǎng)友 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<