模塊化編程
所謂模塊化編程，就是將代碼模塊化，每一塊代碼都只進行一種操作，可以這樣理解吧。
全局變量和局部變量的轉換
模塊化編程重要的一點就是，在一個模塊裏，所有的變量都是局部變量（對整個項目來說，對這個模塊來說當然可以是全局變量了）
模塊化編程如何將全局變量轉變爲局部變量：
- 把所有代碼都放在一個函數裏面
- 再執行這個函數
- 這樣除了這個函數是全局變量，其它都變成限制在這個函數裏的局部變量了
我連那個函數這個全局變量都不想要了：
- 設置爲匿名函數
-
立即執行，直接
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