摘要：設計模式是一套可復用的，被眾人知曉，經過編目分明的，經驗的總結。創建類安全工廠判斷是否調用關鍵字設計模式設計模式運算符可以用來判斷某個構造函數的屬性所指向的對象是否存在于另外一個要檢測對象的原型鏈上。

是一套可復用的，被眾人知曉，經過編目分明的，經驗的總結。
作用：使用設計模式是為了可重用代碼、讓代碼更容易被他人理解、保證代碼可靠性

創建型設計模式：解決對象在創建時產生的一系列問題。
結構型設計模式：解決類或對象之間組合時產生的一系列問題
行為型設計模式：解決類或對象之間的交互以及職責分配的一些列問題

創建型模式：單例模式、抽象工廠模式、建造者模式、工廠模式、原型模式。 （5）
結構型模式：適配器模式、橋接模式、裝飾模式、組合模式、外觀模式、享元模式、代理模式。（7）
行為型模式：模版方法模式、命令模式、迭代器模式、觀察者模式、中介者模式、備忘錄模式、解釋器模式（Interpreter模式）、狀態模式、策略模式、職責鏈模式(責任鏈模式)、訪問者模式。（11）

設計模式：是一套被反復使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結，它強調的是一個設計問題的解決方法

框架：軟件框架是項目軟件開發過程中提取特定領域軟件的共性部分形成的體系結構，不同領域的軟件項目有著不同的框架類型。框架不是現成可用的應用系統。而是一個半成品，提供了諸多服務，開發人員進行二次開發，實現具體功能的應用系統。 ( 只有基礎公共代碼，而沒有業務邏輯的產品，就是框架。)

架構：簡單的說架構就是一個藍圖，是一種設計方案，將客戶的不同需求抽象成為抽象組件，并能夠描述這些抽象組件之間的通信和調用，偏重于設計。框架比架構更具體，更偏重于技術

工具庫：是類（方法）的集合，這些類之間可能是相互獨立的。可以直接調用它，而不必再寫一個。框架也往往是類（方法）的集合；但框架中的各個類并不是孤立的，而框架中的業務邏輯代碼是將不同的類“連”在一起，在它們之間建立協作關系

設計模式研究的是針對單一問題的設計思路和解決方法，一個模式可應用于不同的框架和被不同的語言所實現；而框架則是一個應用的體系結構，是一種或多種設計模式和代碼的混合體雖然它們有所不同，但卻共同致力于使人們的設計可以被重用，在思想上存在著統一性的特點，因而設計模式的思想可以在框架設計中進行應用。

定義：用來創建一種類型的產品實例，所以他創建的對象單一

特點：

通過將創建過程寄生在工廠內，可以解決全局變量污染問題。

創建的產品對象單一。

對工廠進行改造可以適應不同的需求。

批量生產

第一種：
在外部創建一個批量生產的工廠，然后再內部調用工廠，它的問題是需要另外創建一個工廠

第二種：
通過在工廠方法內部進行分支判斷，決定創建單個產品或者品量單品。
這種方式在工廠內部調用該廠，依賴了工廠名稱。

第三種：
通過在工廠方法內部進行分支判斷，決定創建單個產品或者品量單品。
這種方式在工廠內部調用了，arguments.callee解決了對工廠名稱的依賴。

通過對寄生在工廠內部的對象增添方法屬性，使在不改變原類的基礎上，完成對類的拓展

在工廠內部實例化類 這一步叫做寄生

對實例化的類拓展方法和屬性 這一步叫做增強

將這個對象返回。 這一步是工廠。

又叫：安全類

特點，不論在調用的時候有沒有new關鍵字，得到的結果都是一樣的。

判斷this是否是只想當前對象的。通過instanceof

如果是通過new關鍵字創建的，就直接對this賦值

如果不是，主動創建，并返回該實例。

//創建 Book類
//安全工廠
var Book = function ( title ) {
    
    //判斷是否調用 new 關鍵字
    if ( this instanceof Book ) {
        
        this.title = title;
        
    } else {
        
        return new Book(title);    
        
    }
    
}

//var b1 = new Book("設計模式1");
var b2 = Book("設計模式2");

//console.log( b1 ,b1 instanceof Book );  //true
console.log( b2 ,b2 instanceof Book ); //true

instanceof運算符可以用來判斷某個構造函數的prototype屬性所指向的對象是否存在于另外一個要檢測對象的原型鏈上。

通過對產品類的抽象使其創建業務主要負責用于創建多類產品的實例
特點：

創建多類對象

也是對類的再封裝

步驟：

聲明參數
循環創建類
對類的添加方法
將實例化對象返回

通過將對象的原型指向類的原型實現對該對象原型的屬性與方法的共享。

var Rect = function( x,y ){
    
    //繼承
    Base.apply(this,arguments);
    this.dom.className = "rect";

}

Rect.prototype = new Base();

原型模式一種創建型設計模式
它基于javascript原型鏈原理實現的
是一種組合式繼承
對于處理復雜的類，通過提取公共部分實現對類優化

只能創建一個實例， 把所有代碼和數據組織到一個地方. 全局的資源，公共的數據， 組織到一起.統一的管理.
單體模式 一般不采用new 關鍵字. 已經存在了對象.
主要用來 劃分命名空間(區分代碼，降低耦合性)

var Singleton={
    attr1: true,
    attr2: 10,
    method1: function(){
        alert(this.attr1);
    },
    method2: function(){
        alert("方法2");
    }
}

借用閉包創建單體 閉包主要的目的:就是保護數據，不受外界所干擾.
通過閉包將我們的single封裝起來，避免外部訪問而實例化，這樣可保證實例化一次，閉包的返回函數的作用域在閉包里面，所以可以訪問到single類對其實例化，這樣在執行LazySingle才會對single類實例化

特點：
只能被實例化一次
推遲了實例化時間

var _interface = null;

var LazySingle = (function () {
    
    var Signle = function () {
        // do     
    }
    
    Signle.prototype = {
        version: 2,
        sayHello: function () {
            console.log("1");
        }
    }
    
    return function () {
        
        if ( !_interface ) {
            
            _interface = new Signle();
            
        }
        
        return _interface;
        
    }
    
})()


var s = LazySingle();

s.sayHello();

判讀程序的分支 --> 瀏覽器差異檢測

var Slington = (function(){
    
    var def = true;

    var More = function(){

        var objA = { //火狐瀏覽器  內部的一些配置
            attr1: "ff attr1",
            //屬性1
            //方法1
        }
        var objB = {  //ie瀏覽器 內部的一些配置
            attr2: "ie attr1",
            //屬性1
            //方法1
        }

    }
    return (def) ? new More().objA : new More().objB;

})();

將一個類（對象）的接口（屬性或者方法）轉化成另一個類（對象）的接口，以滿足用戶的需要，使類（對象）之間接口的不兼容問題得以解決。

對被適配的數據的一個分解再封裝的一個過程。
這個過程中會造成一定的開銷。但遠比更改原有業務邏輯成本低。

需要dataAdaptor函數中有適配映射表

 function DealData ( arr ) {
                
    var div = document.createElement("div");
    var img = new Image();
    var a = document.createElement("a");
    var p = document.createElement("p");
    
    img.src = arr[1];
    a.href = arr[0];
    
    p.innerHTML = arr[2];
    a.appendChild(p);
    a.appendChild(img);
    div.appendChild(a);
    
    document.body.appendChild(div);
    
}


//適配器
function DataAdaptor ( data ) {
    
    var arr = [];
    
    //適配映射表
    var map = {
        "src": 1,
        "href": 0,
        "title": 2
    }
    
    for ( var i in map ) {
        
        //把第三方數據源中的數據，放到自己數據中的數組中的相應位置
        //map[i] -> 自己數據源中的位置
        //i -> 第三方數據源中的屬性
        
        arr[map[i]] = data[i];
        
    }
    
    //匹配出來后的數據
//                arr[0] = data.href
//                arr[1] = data.src
//                arr[2] = data.title
    
    return arr;
    
}


//第三方提供數據
//           obj.href  : 鏈接地址    
//                obj.src   : 圖片地址
//                obj.title : 圖片標題

$.get("xxx.json",function ( oD ) {
    
    if ( oD && oD.errno === 0 ) {
        
        var newRes = new DataAdaptor( oD.data ); 
        
        DealData(newRes);
        
    }
    
})

使用繼承
使用 || 運算符

function extend ( targetObj,obj ) {
                
    for ( var i in obj ) {
        
        targetObj[i] = obj[i];
        
    }
    
    return targetObj;
    
}

var Button = function ( param ) {
    
    var btn = document.createElement("button");
    
    //默認參數
    var def = {
        "background": "tan",
        "color": "yellow",
        "fontSize": "12px",
        "text": "按鈕"
    }
    
    // 適配用戶傳遞的參數與默認的參數
    var def1 = extend(def,param);
    
    for ( var i in def1 ) {
        
        if ( i === "text" ) {
            
            btn.innerHTML = def1[i];
            
        } else {
            
            btn.style[i] = def1[i];
            
        }
        
    }
    
    document.body.appendChild(btn);
    
}

Button({"background": "deeppink"});

部分整體模式，將對象表示成樹形結構，表示部分整體關系。所以部分與整體的行為習慣達到一致型。

組合模式中只有兩種類型對象，組合對象，葉子對象

創建類的步驟：

構造函數

構造函數繼承

保留參數

初始化數據

原型式繼承，繼承基類方法
重寫init方法
添加其他方法

它是將整體分解成為一個個部分，再有部分重新拼裝成一個整體。部分分解的也多，整合結果也就越多。
它的部分與整體之間具有行為的一致性。
部分拼裝成整體的過程具有多樣性

叫消息系統，消息機制，或者發布訂閱模式。通過消息系統實現對象或者類之間的解耦。
解決是一種依賴關系，
解決了，主體與觀察者之間的一種依賴關系。
被觀察者對象或者類也可以是觀察者，觀察者也可以是被觀察者
觀察者內部變化不會影響到被觀察者，反過來一樣

var Observer = (function () {

var __msg = {};

return {
    
    //添加訂閱者 
    //@param {String} type  訂閱者名字
    //@param {Function} fn  執行函數  
    
    add: function ( type,fn ) {
        
        if ( __msg[type] ) {
            
            __msg[type].push(fn);
            
        }    else {
            
            __msg[type] = [fn];
            
        }
        
        return this;
        
    },

     //執行回調函數
     //@param {String} type
    fire: function ( type,data ) {
        
        if ( __msg[type] ) {
            
            var e = data
            
            for ( var i=0; i<__msg[type].length; ++i ) {
                
                __msg[type][i](e);
                
            }
            
        }
        
        return this;
        
    },
     // 移除回調函數
     // @param {String} type
     // @param {String} fnName
    remove: function ( type,fnName ) {
        
        if ( __msg[type] ) {
            
            for ( var i = __msg[type].length-1; i>=0; --i ) {
                
                if ( __msg[type][i] === fnName ) {
                    
                    __msg[type].splice(i,1);
                    
                }
                
            }
            
        }
        
        return this;
    }
    
}

})()

封裝一組算法，使其可以互相替換，這組算法本身具有獨立性，不受客戶端影響。

特點：

它是行為型模式

每種都是獨立的，所他們之間可以相互替換

他解決是使用者與策略算法之間的耦合

算是是獨立的方便我們進行單測

算法在使用時候的過程是不一樣的，但結果是一樣的

tween中使用的是策略模式，價格算法，表單驗證.

價格：
淘寶價：

//表單驗證

var InputStrategy = (function () {
            
//策略模型
var strategy = {
    
    //判斷是否為空
    "notNull": function ( val ) {
        
        return /^s*$/g.test(val) ? "輸入的內容不能為空" :　"";
        
    },
    
    //判斷是否是數字
    "isNumber": function ( val ) {
        
        return /^-?[d]+(.[d])?$/.test(val) ? "" : "輸入的不是一個正確的數字";
        
    },
    
    //判斷電話格式  010-12345678 1234-1234567
    "isTelephoneNumber": function ( val ) {
        
        return /^[d]{3}-[d]{8}$|^[d]{4}-[d]{7}$ /.test(val) ? "" : "請輸入一個正確的電話號碼";
        
    }
    
}

return {
    //檢測表單輸入的文本內容是否正確
    //@param {String} val 檢測文本
    //@param {String} type 檢測算法
    
    check: function ( val,type ) {
        
        if ( strategy[type] ) {
            
            return strategy[type](val);
            
        } else {
            
            return "沒有該算法";
            
        }
        
    }
}

})()


//策略名稱 與 頁面中的表單的 映射表
var arr = ["notNull", "isNumber", "isTelephoneNumber"];

for ( var i=1; i<4; i++ ) {

checkInp( "inp"+i ,"err"+i,arr[i-1] );

}

//執行 檢測表單
function checkInp ( inpId,errId,type ) {

//添加監聽
document.getElementById(inpId).onblur = function ( ev ) {
    
    var val = ev.target.value;
    
    var reslut = InputStrategy.check( val,type );
    
    if ( reslut ) {
        
        document.getElementById(errId).innerHTML = reslut;
        
    } else {
        
        document.getElementById(errId).innerHTML = "";
        
    }
    
}

}

將請求與實現解耦并封裝，實現請求對客戶端實現參數化。

頁面中有好多數據源，要對這些數據源渲染頁面，傳統方式，渲染頁面時候，將視圖，數據，業務耦合在一起了，不利于開發，所以要將這些實現東西提取出來封裝成一個個命令供使用，來實現代碼復用，并簡化的創建操作

命令模式解決了命令的發起者與命令的實現者之間的耦合
命令的發起者(調用命令的時候) 不必去了解命令是如何實現的以及命令是如何運行的。
所有的在使用具有一致性。
命令模式在一定程度上簡化了操作。

canvas繪圖的 上下文 ctx 一些問題

模塊外界訪問不到 ctx
ctx很重要，不論操作都需要使用這個變量
一旦更改這個變量，會造成很嚴重的后果，造成原有功能失效。

把ctx封裝成內部方法。 封裝成 cmd 對象下的方法， 在excute 命令執行方法中匹配 cmd 中的方法

// 遍歷
// arr 遍歷的函數
// cb
function each ( arr,cb ) {
    
    for ( var i=0,len=arr.length; i
對象迭代器
//obj 要被遍歷的對象
//cb 遍歷回調函數
function each( obj,cb ){
    for( var i in obj ){
        cb && cb.call(obj,obj[i],i);
    }
}


function each (obj, fn) {
    // obj是一個數組時候
    if (obj instanceof Array) {  //判斷是否是數組
        //迭代數組
        for (var i = 0, len = obj.length; i < len; i++) {
            fn(obj[i], i, obj)
        }
    // obj是一個對象
    } else { 
        // 迭代對象
        for (var i in obj) {
            fn(obj[i], i, obj)
        }
    }
}

面向對象中的迭代器
面向對象中有時需要遍歷實例化對象中的自身屬性，過濾掉原型上的屬性，可以通過 hasOwnPrototy 來實現
// 遍歷實例化對象自身的屬性，過濾掉原型上的屬性
// obj    實例化對象
// cb     回調函數

function  each ( obj,cb ) {
    for ( var i in obj ) {
        if ( obj.hasOwnPrototy(i) ) {
            cb && cb.call(obj,obj[i],i);
        }
    }
}

迭代器的特點

本身并沒有刪除循環語句，只是將循環語句轉移到迭代器的內部，

迭代器模式中，數據對象內部的結構，只需要關注處理函數。

移出了循環語句，使得代碼看著更清晰

迭代器模式是將數據源于處理函數之間的解耦


DOM迭代器

        
    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
    
    
    
    


委托模式
是將多個對象接收并處理的請求，統一委托給另外一個對象處理
委托模式解決事件數量問題
解決事件綁定數量的問題，為一堆元素綁定事件，通過for循環遍歷綁定，無形中綁定了n個事件，這樣在內存中造成一定的開銷。
可以通過這些元素公共的父元素，對其綁定事件，通過e.target事件觸發的目標元素的某些屬性來確認是哪些元素需要綁定事件來解決上面的問題。
通常可以判斷元素的名稱，類名，id，及其屬性。
通過對子元素的某些特性判斷，來實現對該元素的事件的綁定。
var oUl = document.getElementsByTagName("ul")[0];
var li = oUl.getElementsByTagName("li");


oUl.addEventListener("click",function ( e ) {

//                console.log( e );

    if ( e.target.tagName.toLocaleLowerCase() == "li" ) {
        
        e.target.style.background = "pink";
        
    }


},false);

未來元素事件綁定問題
傳統式方式通過for循環，只能對現用元素進行事件綁定，當需要在后面添加新的元素的時候，該方案不能對新元素綁定事件。
委托模式，通過將子元素的事件綁定委托給父元素，事件對子元素事件綁定的效果，這樣，在父元素中添加新的子元素，同樣可以獲取綁定事件的效果
var oUl = document.getElementsByTagName("ul")[0];
var li = oUl.getElementsByTagName("li");


oUl.addEventListener("click",function ( e ) {

//                console.log( e );

    if ( e.target.tagName.toLocaleLowerCase() == "li" ) {
        
        e.target.style.background = "pink";
        
    }
    

},false);

var oLi = document.createElement("li");

oLi.innerHTML = "11";

oUl.appendChild(oLi);

jQuery事件委托
jQuery中給我提供了一個專用來是做事件委托事件綁定方法，delegate，它實質上是通過on方法實現的


內存外泄
在低版本IE瀏覽器中，內存只會清理哪些沒有被javascript引用的dom元素，所以在對元素定義事件時候，如果將元素清理一定要將該元素綁定的事件解除，因此要在事件內部顯性清除事件綁定，但這就要寫在原有事件內部，
var oDiv = document.getElementsByTagName("div")[0];
            
var oBtn = document.getElementsByTagName("button")[0];

oBtn.onclick = function () {
    
    oBtn.onclick = null;  //手動清除事件綁定
    oDiv.innerHTML = "info";
    
}

更好的解決方案是對該元素的父元素委托綁定事件，這樣當清理該元素時候，由于沒有事件的綁定，該元素即會被清理
var oDiv = document.getElementsByTagName("div")[0];
            
var oBtn = document.getElementsByTagName("button")[0];

oDiv.onclick = function ( ev ) {
    
    if ( ev.target.tagName.toLocaleLowerCase() === "button" ) {
        
        oDiv.innerHTML = "info";
        
    }
    
}    

數據分發
動態頁面中，頁面中的每個模塊會對應一個數據請求，然而如果頁面中的這類模塊很多，就要發送多個請求，但是并發請求的個數是有限的 ，因此后面的請求就會被堵塞，為了解決這類問題，可以將這些請求委托給父請求統一處理，當接收數據后，解析數據，并派發給各個子模塊中，供其使用
//對每個模塊進行封裝
var DealStrategy = {
    
    "banner": function ( data ) {
        
        $(".banner").html(data);
        
    },
    
    "article": function ( data ) {
        
        $(".article").html(data);
        
    },
    
    "aside": function ( data ) {
        
        $(".aside").html(data);
        
    }
    
}

function Deal ( data ) {
    
    for ( var i in data ) {
        
        DealStrategy[i](data[i]);
        
    }
    
}

//發出 get 請求
$.get("data/all.json",function ( res ) {
    
    if ( res.errno === 0 ) {
        
        Deal( res.data );
        
    }
    
});

節流模式
對重復的業務邏輯進行節流控制，執行最后一次操作并取消其他操作，以提高性能。
特點：

通過計時器延遲程序的執行

通過計時器，使程序異步執行，避免開銷大的程序造成的堵塞


條件：

程序可控：即取消后是否可以繼續執行

異步執行：即程序是否可以異步執行


節流器
通過jQuery的stop方法禁止動畫的排隊，但是對于滾動這種高頻事件，每次執行都會添加動畫
通過節流模式，短時間內觸發多次動畫時，前面動畫被取消添加，這樣只執行最后一次，來提高性能
節流器通常提供兩種使用方式
觸發操作
清除操作
//對重復的業務邏輯，通常執行最后一個，取消前面的業務邏輯，來實現業務邏輯的優化。
//高頻事件， mousemove ，window.onscorll
var Throttle = function () {


    var isClear = arguments[0] , fn;

    if ( isClear !== "true" ) {

     // 觸發操作
     // @param[0] [Function]  表示函數的名稱
     // @param[1] [Object] 配置項

        //觸發操作
        fn = isClear;
        var o = arguments[1] || {};

        var obj = {
            time: o.time || 200,
            context: o.context || null,
            data: o.data || null
        };  //配置項
        
        //設表先關
        fn._throttle && clearTimeout(fn._throttle);
        
        fn._throttle = setTimeout(function(){

            fn.call(obj.context,obj.data);    

        },obj.time);

    } else {

        // 清除操作
        // @param[0] [Boolean] 表示是否取消操作. true 取消
        // @param[1] [Function] 取消的函數名稱

        //取消操作
        fn = arguments[1];

        //清除定時器
        fn._throttle && clearTimeout(fn._throttle);

    }

}

function goBack(){
    console.log(1);
}

//觸發
Throttle(goBack,{time: 500,data: {msg: "hello"}});

//清除操作
// Throttle(true,goBack);


統計節流
統計是什么，為什么要做統計？ 
統計是為了了解用戶對頁面使用習慣或者使用方式的，要為頁面添加統計來幫助分析用戶的使用行為
統計的實現
當用戶觸發一次交互的時候，想向服務器端發送一條信息，將其記錄下來，保存在服務器中。
前端的一些交互，有時候是不需要向服務器端發送請求的，此時，服務器端是不知道這些行為的，所以要向服務器端發送請求告知
統計請求方面的考慮
post請求要比get請求發送的時處理事情要多，在做統計的時候就不考慮post請求
Ajax可以發送get請求，但是要寫好多邏輯代碼
請求文檔是一個get請求，但是請求過來的頁面中的信息量比較多
script標簽也是get請求，
link標簽也是一個get請求
img標簽也是get請求
相比較這幾種，img的發送成本更低一些，在發送統計請求的時候，用img(0字節的圖片作為中轉發送get請求)的get請求 
請求節流
頁面中的一些高頻事件，做統計的時候，會不停的發送統計，由于請求的并發次數是有限的 ，不能同時發送這么多的請求。這回造成后面資源的加載延遲，要對這些統計做節流處理
var img = new Image();
            
function sendLog ( val ) {
    
    var reslutStr = "";
    for ( var i in val ) {
        
        reslutStr += "&" + i + "=" +  val[i];
        
    }
    
    img.src = "a.jpg?" + reslutStr;
    
}

統計的拼接
一條統計  ?Type=click&date=123
將兩條統計拼接在一起 ?Type=click&dat2=123&type=mouseover&date=234，這樣的化出現相同的字段了，不能這么拼接，
可以將一條統計作為一個值： ?Log1=typeclick|date123  //將一條數據，作為請求的  一個  id.
拼接兩個統計的時候，就可以?Log1=typeclick|date123&log2=typemouserover|date234
//節流處理： 當發送第一個請求的時候，將其緩存下來，當其觸發的次數達到規定的次數再發送
//想緩存，需要有緩存容器， dataCache   次數，需要有次數的規定。maxNum
//將一條數據，作為請求的  一個  id.

var LogPack = (function () {
    
    var dataCache = [];  //緩存容器
    
    var maxNum = 10; //緩存的次數                
    
    var oImg = new Image();  //請求的觸發器

    var itemSplit = "|";
    var keyValSplit = "*";
    
    //發送統計
    function sendLog () {
        
        var logs = dataCache.splice(0,10);
        
        var str = "";
        
        for ( var i=0; i maxNum ) {
            
            //發送
            sendLog();
            
        }
        
    };
    
})()

//觸發
var oBtn = document.getElementById("btn");

oBtn.onmousemove = function () {
    
    LogPack({
        type: "onmousemove",
        date: new Date().getTime()
    });
    
}
//            
oBtn.onmouseover = function () {
    
    LogPack({
        type: "onmouseover",
        date: new Date().getTime()
    });
    
}

//發送結果

MVC
后端的MVC概念

Model（模型）表示應用程序核心（比如數據庫記錄列表）。
是應用程序中用于處理應用程序數據邏輯的部分。通常模型對象負責在數據庫中存取數據。

View（視圖）顯示數據（數據庫記錄）。
是應用程序中處理數據顯示的部分。通常視圖是依據模型數據創建的

Controller（控制器）處理輸入（寫入數據庫記錄）
是應用程序中處理用戶交互的部分。通常控制器負責從視圖讀取數據，控制用戶輸入，并向模型發送數據。


前端中的實踐
Model，頁面數據的存儲操作
View，渲染出可視（給人看）的頁面操作
Controller，頁面的交互對視圖的更改以及對數據的更改

View層通過Model渲染數據，所以View層可以訪問Model層
Controller層可以對Model寫入讀取數據，所以Controller可以訪問Model層
Controller層可以對View層打開彈層，浮層等交互，所以Controller可以訪問View層  
在前端的框架中，很多框架是基于MVC模式實現，比如BackBone
它將MVC進行了一些改造，比如它允許Model層可以訪問View層，實現數據層的更新通知View層視圖的渲染
通常一個模塊對應一個控制器，一個模型，一個視圖，那么如果將頁面所有模塊中的視圖，控制器模型放在一起，邏輯比較混亂，為了管理方便，將一個模塊的控制器，模型，視圖，放在一個文件內管理，根據他們的父模塊不同，來進行分別建立。（父模塊作為建立文件夾的標準）
var MVC = {}

//模型模塊
// get 得到模型
// add 添加模型
MVC.Model = (function () { 
    
    //用來存儲數據層面的數據
    var M = {};
    
    return {
         //讀取數據的方法
         //@param {String} strName 讀取數據的名稱
         //eg: get("a.b.c") => M.a.b.c
        "get": function ( strName ) {
            
            var path = strName.split(".");
            
            var reslut = M;
            
            for ( var i=0; i