Javascript的一種代碼結構方式——插件式

上幾週一直在作公司的webos的前端代碼的重構，之中對javascript的代碼進行了重構（以前的代碼耦合嚴重、拓展、修改起來比較困難），這裏總結一下當中使用的一種代碼結構——插件式（聽起來怎麼像獨孤九劍同樣.....）。

代碼結構

 這直接上代碼結構圖（Javascript部分）

ps:箭頭的指向A->B，表示A調用B

由上面能夠看到四種類型的東西：

控制類：提供一個全局的命名空間、保存上下文信息、組件、組件提供的全局方法，負責調用組件初始化。

代碼示例以下（不完整）：

var webos= {
    context :{},
    components : [], //全部組件
    methods : {},  //組件提供的方法 //webos入口
    load : function(webosContext) {
        webos._init();
        webos._uiRender() ;
        webos._dataRender();
        webos._eventRender();
    },
    
    //初始化
    _init : function(){
        $(webos.components).each(function(index, component){
            component.init(webos.context) ;
        });
    },
    
    //ui渲染
    _uiRender : function(){
    },
    
    //數據加載
    _dataRender : function(){
    },
    
    //綁定事件
    _eventRender : function(){
    },
    
    //註冊全局方法
    addGlobalMethod : function(methodName, method){
    },
    
    //調用全局方法
    execGlobalMethod : function(methodName, params){
    },
    
    //註冊組件
    registerComponent : function(component) {
        webos.components.push(component);
    }
};

工具類：提供工具方法，不屬於組件和基礎類的方法將會放在這裏。

webos.utils = {
  ...
} 

基本類：最基礎的類，供給組件使用，原則上一個能稱爲對象的東西都應該寫成一個類。
例,下面組件的接口實現類：

var IComponent = function() {
    this.init = function(context){};
    this.uiRender = function(context){};
    this.dataRender = function(context){};
    this.eventRender = function(context){};
    this.reload = function(){};
}

組件：例如導航欄、工具欄、任務欄、桌面組件，都是以一個組件形式存在。

在組件裏面，組件的建立、初始化、數據渲染、事件綁定都本身解決（有點像自治區）。

//導航欄組件
;(function(webos){
    
    var NavBar = function() {         
    };

    //繼承Component基類
    NavBar.prototype = new IComponent();
    
    NavBar.prototype.init = function(context) {
    };
    
    //定位爲構建基礎的HTML
    NavBar.prototype.uiRender = function(context){
    };
    
    //加載數據
    NavBar.prototype.dataRender = function(context){
    };
    
    NavBar.prototype.eventRender = function(context){
    };
    ....

    //註冊組件
    webos.registerComponent(new NavBar());
})(webos);

組件之間怎麼聯繫呢？

組件與組件之間進行溝通的手段只有一個——就是將本身給其餘組件使用的方法提供給控制器（調用控制器的addGlobalMethod），控制器保存你的方法，當其餘組件使用你的方法時候，就向控制器要（調用控制器的execGlobalMethod ）。

爲啥這種結構叫插件式呢？

看過控制類和組件的代碼就知道，控制類只負責幫助調用已經註冊到控制類裏的組件的初始化方法、組件完成關於本身的全部事。因此當咱們須要作一個新的組件時候，只需完成自身的建立、渲染、事件綁定，而後註冊到控制類裏，控制類就會幫你初始化，組件間互不干涉，這就是插件式（好吧，這是個人理解，並無這種官方的定義）！！！ 

優勢？

一、組件的維護、拓展很是簡單，由於都是獨立開來

二、添加新組件對已存在的組件幾乎沒有影響（固然你寫的組件也不要影響他其餘組件、例如樣式、HTML）

缺點！

一、這種結構有應用場景要求，更偏向富web應用使用