文 / 景朝霞
來(lái)源公號(hào) / 朝霞的光影筆記
ID / zhaoxiajingjing
圖 / 自己畫
????點(diǎn)個(gè)贊辱姨，讓我知道你來(lái)過(guò)~????
0 / 單例設(shè)計(jì)模式
假設(shè)：你需要錄入兩個(gè)人的信息：李雷和韓梅梅柿菩。<i>不要問(wèn)我他們是誰(shuí)</i>
<i>我本來(lái)想舉個(gè)例子，叫"媽媽喊你去相親"雨涛。后來(lái)一想枢舶，換個(gè)例子吧懦胞，被媽媽說(shuō)也就算了，看個(gè)代碼還要被扎心凉泄，太可憐了吧</i>
在最開始學(xué)代碼時(shí)候躏尉，我可能會(huì)這樣寫▽
let name = '李雷';
let age = 26;
let sex = '男';
let name = '韓梅梅';
let age = 28;
let sex = '女';
but，如果要把這兩段代碼放在一個(gè)js文件里后众，肯定會(huì)沖突啊怎么辦胀糜？分個(gè)組吧：
let person1 = {
name:'李雷',
age:26,
sex:'男'
};
let person2 = {
name:'韓梅梅',
age:28,
sex:'女'
};
<i>△ 這樣把信息分組歸類了</i>
person1和person2是一個(gè)對(duì)象，也叫命名空間蒂誉，可以減少全局變量的污染教藻。
以上的person1和person2也是單例設(shè)計(jì)模式（singleton pattern），即：只有一個(gè)實(shí)例的對(duì)象右锨。
在JS中怖竭，以對(duì)象字面量的方式和構(gòu)造函數(shù)模式是可以創(chuàng)建單例對(duì)象的。
單例設(shè)計(jì)模式：把描述事務(wù)的信息放到一個(gè)命名空間中進(jìn)行歸類陡蝇，防止全局變量污染
高級(jí)單例模式：你在開發(fā)中也經(jīng)常用痊臭，比如：公共模塊都寫在utils里面、頁(yè)面模塊單獨(dú)寫在一個(gè)JS文件里面
let utils = (function (){
function deepCopy(){
//.....CODE
}
function addHandler(){
//....CODE
}
//...CODE
return {
deepCopy,
addHandler
};
})();
<i>△ 高級(jí)單例模式</i>
高級(jí)單例模式使用閉包的保護(hù)機(jī)制登夫，讓里面的代碼不受外界的干擾广匙。
函數(shù)執(zhí)行會(huì)形成一個(gè)全新的私有作用域，保護(hù)里面的代碼不受到外界的干擾恼策，這種保護(hù)機(jī)制就是閉包鸦致。閉包有兩個(gè)作用：保護(hù)和保存。<i>傳送門：圖解 | 理解閉包</i>
1 / 工廠模式
寫一兩個(gè)人的信息好弄涣楷，如果班里有30個(gè)人分唾，這樣一個(gè)個(gè)寫得累蒙圈了，而且會(huì)產(chǎn)生大量的重復(fù)代碼狮斗。
于是绽乔，可以造一個(gè)工廠出來(lái)，批量可以把屬性都造出來(lái)：
function person(name, age, sex){
let person = {};
person.name = name;
person.age = age;
person.sex = sex;
return person;
}
let p1 = person('李雷', 26, '男');
let p2 = person('韓梅梅', 28, '女');
let p3 = person('莉莉', 26, '女');
//....余下的人信息
<i>△ 在單例的基礎(chǔ)上可以批量產(chǎn)出屬性碳褒，錄入信息了</i>
person就是個(gè)函數(shù)折砸，函數(shù)的意義在于什么？封裝
工廠模式：用函數(shù)來(lái)封裝以特定的方式來(lái)創(chuàng)建對(duì)象的細(xì)節(jié)沙峻。
（1）低耦合：可以減少一個(gè)個(gè)創(chuàng)建對(duì)象這些冗余的代碼
（2）高內(nèi)聚：提高代碼的重復(fù)使用率
2 / 面向?qū)ο?/h4>
<i>【PS:這個(gè)概念很大睦授，以我目前的知識(shí)儲(chǔ)備和文字表達(dá)能力可能說(shuō)的不是很清楚的，請(qǐng)見諒~】</i>
面向?qū)ο缶幊蹋∣bject Oriented Programming）
<i>還記得第一次面試摔寨，面試官問(wèn)：什么是對(duì)象去枷？答：萬(wàn)物皆對(duì)象【PS：那時(shí)候真勇敢呀】</i>
<i>△ 20.1_自然中的分類【PS：請(qǐng)?jiān)徫业纳镏R(shí)都還給老師了~~】</i>
"萬(wàn)物皆對(duì)象"中的"對(duì)象"本身只是一個(gè)泛指，任何事物都是一個(gè)對(duì)象，都可以是我們研究和面對(duì)的删顶。
把抽象的“對(duì)象”疗隶，按照特點(diǎn)來(lái)進(jìn)行分類（大類/小類）后，把共同的東西抽取出來(lái)翼闹，放到對(duì)應(yīng)的類別中斑鼻。即：“類”是對(duì)“對(duì)象”一種細(xì)分和公共部分的封裝。
通過(guò)類別派生出來(lái)的具體事務(wù)叫做：類的“實(shí)例”
實(shí)例既有屬于自己私有的東西猎荠，也會(huì)繼承各個(gè)類別中的公有信息
*面向?qū)ο缶幊?****需要掌握“對(duì)象”“類”“實(shí)例”之間的關(guān)系
<i>△ 20.2_畫個(gè)草圖</i>
比如坚弱，之前寫的一個(gè)選項(xiàng)卡：
<div id="tabBox" class="tabBox">
<ul id="navBox" class="navBox">
<li class="active">代碼</li>
<li>看書</li>
<li>運(yùn)動(dòng)</li>
</ul>
<div class="active">
讀讀代碼
<p>公號(hào)：朝霞的光影筆記</p>
<p>ID：zhaoxiajingjing</p>
</div>
<div>
書中自有顏如玉
<p>公號(hào)：朝霞的光影筆記</p>
<p>ID：zhaoxiajingjing</p>
</div>
<div>
瘦子生活模式，好好吃飯关摇，好好生活
<p>公號(hào)：朝霞的光影筆記</p>
<p>ID：zhaoxiajingjing</p>
</div>
</div>
<i>△ 20.3_查看元素</i>
<i>△ 20.4 研究一個(gè)實(shí)例</i>
研究一個(gè)實(shí)例：
1荒叶、私有的信息
2、所屬類公有的信息
3输虱、一層層從小類別一直找到Object為止些楣，研究屬性和方法
dir(tabBox)
|=>__proto__:HTMLDivElement.prototype
|=>__proto__:HTMLElement.prototype
|=>__proto__:Element.prototype
|=>__proto__:Node.prototype
|=>__proto__:EventTarget.prototype
|=>__proto__:Object.prototype
3 / 預(yù)告
請(qǐng)問(wèn)：原型和原型鏈?zhǔn)巧叮?/p>
