“首先新年快樂！”

前言

最近一直在看動腦學院的阿里前端p6架構師培訓計劃的直播，昨天一場比較精彩。講的是一套架構，其稱之為“驅動框架”。今天做一下總結。

一些技巧

• 後端返回的JSON資料鍵名與本地模組名相同（便於獲取）
• JSON資料鍵名與HTML表單標籤元素id相同（便於渲染）
  

  為什麼這樣呢？在呼叫的時候非常方便，直接處理，可以看看以下程式碼。

框架

var MetaDriver = (function (global,factory) {
    return factory.call(this);
})(this,function
 
 () {
    var _META_ = {
        init:function (data) {
            alert("init OK!");
            this.fetch(data)
            this.render()
        },
        fetch:function (data) {
            for (const m in _MODULE_) {
                if (_MODULE_.hasOwnProperty(m)) {
                    const
 
 element = _MODULE_[m];
                    _MODULE_[m].data = data[m];
                }
            }
        },
        render:function(){
            for(var m in _MODULE_){
                _MODULE_[m].render()
            }
        }
    };
    var _MODULE_ = {
        module1:{
            data:null
 
,
            view:"hello",
            before:function () {
                console.log("before")
            },
            render:function () {
                if(this.before){
                    this.before();
                }
                alert(this.view);
                if(this.after){
                    this.after();
                }
            },
            after:function () {
                console.log("after")
            }
        }
    }
    return _META_;
})

個人理解

• 讓自己的模組存在於一個閉包裡，避免變數名衝突覆蓋。jquery原始碼便有此種方式。
  javascript
let MyModuleDriver = (function(global,factory){
return factory.call(global);
})(this,function(){
let _META_ = {
init:function(){}
}
return _META;
})

• 分治與統一管理

所謂的分治就是頁面的不同模組區分管理，就是以上程式碼的MODULE部分。
每一個頁面模組分一個module，每一個module都有自己管理的內容。包括資料（data）、檢視（view）、渲染器（render）等等。這有點類似於現在主流的框架，比如Vuejs。
所謂的統一管理是指驅動全部模組，就是以上程式碼META部分。有個初始化方法(init)，用於載入一些一次性的功能，然後有資料載入函式(fetch)用於將某些模組的資料進行賦值，也有整體渲染器，用於渲染所有模組。

更加神奇的一點

這一點直接聽得我兩眼放光，真所謂返璞歸真、大道歸一。
在防止資料重複載入方面炒雞有意思。比如用相同的表單請求的是相同的資料，他要重新渲染檢視。此時可以給模組加一個渲染鎖。

var _MODULE_ = {
        module1:{
            data:{},
            view:"hello",
            lock:false,
            before:function () {
                console.log("before")
            },
            render:function () {
                if(this.before){
                    this.before();
                }
                if(this.lock){
                    alert(this.view);
                    this.lock = false;
                }
                if(this.after){
                    this.after();
                }
            },
            after:function () {
                console.log("after")
            }
        }
    }
    //有新資料來的時候_META_開鎖
    _META_={
        fetch:function (data) {
            for (const m in _MODULE_) {
                if (_MODULE_.hasOwnProperty(m)) {
                    const element = _MODULE_[m];
                    _MODULE_[m].data = data[m];
                    // 開鎖！
                    _MODULE_[m].lock = true;
                }
            }
        }
    }

這裡的lock起了關鍵的作用，這一點類似於同步鎖，一樣的道理。當有新資料來的時候才載入，沒有新資料的時候鎖一直是關著的，直接越過載入。

呼叫

• 在相應的HTML中引用此JS
• 直接呼叫MyMetaDriver(閉包返回的META)中的方法即可，類似呼叫即可。