国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 3062人閱讀

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

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

組件（Component）

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

1）組件的定義

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

2）呈現方法（render）

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

3）掛載方法（mounted）

//這里是加載組件的后端接口數據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）

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

1）路由的定義

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

2）導航方法（route）

//路由到指定的組件//item為路由對象，必須包含component屬性this.route = function(item) {    //呈現前的驗證，例如登錄驗證    if (!_option.before(item))        return;    //銷毀當前組件    _destroyComponent();    //設置當前組件    _setCurrent(item);    //執行組件    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();//清空節點            component.render(_elem);//呈現組件        }    }        function _mountComponent(item, component) {        setTimeout(function () {            _option.after && _option.after(item);//呈現后回調公共邏輯            component.mounted && component.mounted();//調用后臺數據        }, 10);//延時執行，等dom呈現完成后    }}

下一章我們實現框架根組件App。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/125098.html

相關文章

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

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

    Channe 評論0 收藏0

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

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

    zgbgx 評論0 收藏0

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

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

    MonoLog 評論0 收藏0

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

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

    graf 評論0 收藏0

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

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

    不知名網友 評論0 收藏0

發表評論

0條評論

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