模塊化編程、MVC、面向對象編程

模塊化編程

所謂模塊化編程，就是將代碼模塊化，每一塊代碼都只進行一種操做，能夠這樣理解吧。

全局變量和局部變量的轉換

模塊化編程重要的一點就是，在一個模塊裏，全部的變量都是局部變量（對整個項目來講，對這個模塊來講固然能夠是全局變量了）

模塊化編程如何將全局變量轉變爲局部變量：

1. 把全部代碼都放在一個函數裏面
2. 再執行這個函數
3. 這樣除了這個函數是全局變量，其它都變成限制在這個函數裏的局部變量了

我連那個函數這個全局變量都不想要了：

1. 設置爲匿名函數

2. 當即執行，直接call()

   function(){
       //your code
   }.call()

函數當即執行的優勢：

• 沒有全局變量
• 而只有用函數纔能有局部變量

很差意思，chrome不支持，的解決辦法：

• 前面加!表示這是個當即執行函數。不過會對這個函數的返回值取反，不過當即執行了就沒了，不關心它的返回值

  !function(){
      //your code
  }.call()

• 用()包起來。問題是若是前面有代碼，好比xxx(function(){}).call()，這就等於調用xxx了，等價於xxx().call()。。。function(){}只是傳入的參數

  (function(){
      //your code
  }).call()

• 把函數名設置成隨機數。機智(๑•̀ㅂ•́)و✧~~

MVC

MVC是一種代碼整理的思路

• Model：用來存儲數據相關的操做
• View：用來存儲表現層的元素，用戶看的見的頁面上的元素
• Controller：用來存儲各類行爲、邏輯代碼

上面這張圖能夠很好的展示M和V和C之間的互動關係。

• 首先，用戶只能接觸到V上的東西，就是頁面所展示的內容
• 當用戶和V開始交互了，一直在監聽V的C會知道哪個元素被動了，就會運行相應的代碼
• 一般狀況下，C會調用M，這個時候，M就會向服務器server發送請求要數據，server天然會返回一個響應
• 得到響應的M將數據返回給C，C再將數據更新在V上，就是再頁面上更新

面向對象編程

愚見：深度模塊化。將全部的重複的代碼都提取出來造成對象、構造函數等，在須要使用的時候，調用或者使用new等進行操做。

this的幾個小例子

button.onclick=function(){
    console.log(this);
}

👆上面的this指向button👆

button.addEventListener('click',function(){
    console.log(this);
})

👆上面的this指向button👆

$('ul').on('click','li',function(){
    console.log(this);
})

👆上面的this指向li👆

var x=X();
x.f1(option);

function X(){
    return object{                        //①，對象object裏的this都指向對象object
        option:null,
        f1(x){
            this.option=x;
            this.f2();                    //②②
        },
        f2(){
            this.option.f2.call(this);    //③③③
        }
    }
}

var option={
    f1(){},
    f2(){
        console.log(this);               //④④④④
    }
}

👆執行完頭兩句，最終會調用對象option的f2(){console.log(this);}。這裏的this指向對象object👆

new

new和原型鏈有很大關聯，都是當須要建立不少不少個對象，而這些對象若是有不少相同的屬性和方法，將這些相同的屬性和方法提取出來，作成一個模板、原型。new的做用就是代表用這個模板、原型新生成一個對象。

建立士兵：

createSoldier(1);

function createSoldier(id){
    var rookieSoldier={
        ID:id,
    };
    rookieSoldier.__proto__=createSoldier.prototype;
    return soldier
}

createSoldier.prototype={
    兵種:"火槍兵",
    生命值:42,
    攻擊:function(){},
    防護:function(){},
    行軍:function(){}
}

使用new建立士兵：
👇👇👇下面createSoldier函數裏的註釋內容，就是使用new後，js自動幫你添加的（固然是看不見的）。咱們須要寫的是this.ID = id這樣自定義的內容和createSoldier.prototype公共的內容👇👇👇

new createSoldier(1);

function createSoldier(id){
    //var temp={};
    //this = temp;
    //this.__proto__=createSoldier.prototype;
    this.ID = id;
    //return this;
}

createSoldier.prototype={
    兵種:"火槍兵",
    生命值:42,
    攻擊:function(){},
    防護:function(){},
    行軍:function(){}
}

常見的new的使用：

var object = new Object();        //object.__proto__=Object.prototype
var array = new Array();          //array.__proto__=Array.prototype
var string = new String();        //string.__proto__=String.prototype
var number = new Number();        //number.__proto__=Number.prototype

請參考：https://blog.csdn.net/a153375...
請參考：https://zhuanlan.zhihu.com/p/...

與與或

這裏在討論||和&&的返回值

||或表達式中，有一個是真即返回這個真的值（第一個真值）：
&&與表達式中，有一個是假即返回這個假的值（第一個假值）：
注意：並非返回true或者false，而是返回這個真值或者假值!!!
全部的假值：NaN 0 '' undefined false null

0 || 12 || 'a'                  //返回12
var a= {} || undefined || 12    //a={}

0 && 12 && 'a'                  //返回0
var a= {} && undefined && 12    //a=undefined