成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 3122人閱讀

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

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

組件（Component）

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

1）組件的定義

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

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

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

3）掛載方法（mounted）

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

4）銷毀方法（destroy）

//這里是銷毀組件的資源，例如一個(gè)setInterval的對(duì)象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)換器，起到組件自由切換的作用。路由可以進(jìn)行嵌套，即頁面是最頂級(jí)的組件，渲染在根節(jié)點(diǎn)下面，頁面內(nèi)部區(qū)塊也可以呈現(xiàn)不同的組件。本框架路由只提供兩個(gè)方法，即導(dǎo)航和回退，其實(shí)路由可以擴(kuò)展更多的方法，如根據(jù)name或者模板來路由，這里暫不實(shí)現(xiàn)。本框架暫不支持瀏覽器地址路由，有興趣的同學(xué)可以自己實(shí)現(xiàn)。

1）路由的定義

//elem是路由的節(jié)點(diǎn)對(duì)象//option是路由的配置選項(xiàng)function Router(elem, option) {    //這里寫路由的私有變量、共有屬性和方法、私有方法    var _current = {};//存儲(chǔ)當(dāng)前路由對(duì)象}

2）導(dǎo)航方法（route）

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

3）回退方法（back）

//回退到當(dāng)前路由的上一個(gè)路由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; //存儲(chǔ)上一個(gè)路由        }        _current = item;    }        function _renderComponent(component) {        if (typeof component === string) {            _elem.html(component);//字符串組件        } else {            _elem.html();//清空節(jié)點(diǎn)            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)用后臺(tái)數(shù)據(jù)        }, 10);//延時(shí)執(zhí)行，等dom呈現(xiàn)完成后    }}

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/125098.html

相關(guān)文章

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

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

    Channe 評(píng)論0 收藏0

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

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

    zgbgx 評(píng)論0 收藏0

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

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

    MonoLog 評(píng)論0 收藏0

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

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

    graf 評(píng)論0 收藏0

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

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

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

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<