封裝在于抽象粥惧，抽象程度決定層次
<div className="level-1" style={{ background: 'red' }}>
<div className="level-2">
<div className="level-3"></div>
</div>
</div>
權(quán)衡background放在哪里時(shí)，就是在考慮層次的問(wèn)題突雪。
1
封裝是個(gè)很接地氣的女娃子，畢竟要以實(shí)用為主惹想，理論為輔督函，在她面前所謂的代碼規(guī)范也要禮讓三分嘀粱。
狗蛋定義規(guī)范:函數(shù)的形參要以arg開(kāi)頭辰狡，為了和函數(shù)內(nèi)部的變量區(qū)分開(kāi)，例如:
private showChatModal(argName: string) {
this.setState({
name: argName,
});
}
盡管很多場(chǎng)景下娃磺，這種規(guī)范顯得很蹩腳叫倍，但狗蛋依然覺(jué)得自己是在踐行規(guī)范，感到無(wú)比的驕傲和自豪吆倦，自己沒(méi)有貪圖一時(shí)方便，多么的偉大...
用argName還是name這也是封裝嗎?
這當(dāng)然是蛇更！
這當(dāng)然是！
這當(dāng)然是派任！
2
封裝可不僅僅是把一段代碼抽離出來(lái)放進(jìn)一個(gè)函數(shù)內(nèi)
一行代碼也是一種封裝
const isUpdate = !!hero.id
hero對(duì)象中有id屬性則是修改，沒(méi)有id 屬性則是添加(通常掌逛，id都是字符串)
眾所周知，兩個(gè)!是相互抵消篓像，只是把一個(gè)非boolean轉(zhuǎn)換為boolean
const isAdd = !hero.id
const isUpdate = Boolean(hero.id)
您覺(jué)得那個(gè)更好呢皿伺。
封裝還可在文件夾的結(jié)構(gòu)上體現(xiàn)
hero
index.less
index.tsx
hero
hero.less
hero.tsx
index.tsx
前者index.tsx 等同于后者hero.tsx+index.tsx，文件在編輯器鸵鸥、開(kāi)發(fā)者工具都不具備很好的區(qū)分性。
作為入口文件的index.tsx 承擔(dān)了過(guò)多的代碼宋税，而它只應(yīng)該決定hero文件夾對(duì)外提供的形態(tài)
至此讼油，可以說(shuō)封裝是前端的全部。
3
封裝是一種投資矮台，資本是時(shí)間
一段代碼因?yàn)闃I(yè)務(wù)變化，修改后的樣子
private renderUserInput() {
const { level } = this.state;
let input;
if (level === 1) {
input = (
<Input placeholder="級(jí)別1" onChange={this.onlevel1Change}></Input>
);
} else if (level === 2) {
input = (
<Input placeholder="級(jí)別2" onChange={this.onlevel2Change}></Input>
);
} else {
input = (
<Input placeholder="級(jí)別3" onChange={this.onlevel3Change}></Input>
);
}
}
return input;
咦瓶珊，每一個(gè) input就是變了個(gè)placeholder 和 onChange 耸彪，您覺(jué)得有沒(méi)有必要改成
<Input placeholder={placeholder} onChange={onChange}></Input>
咦，這種結(jié)構(gòu)為什么不用switch...
封裝還難在一個(gè)度字上
必須要強(qiáng)調(diào)漸進(jìn)式封裝的重要性蝉娜，體驗(yàn)痛楚未嘗不是件壞事，如果不知道怎么封裝就千萬(wàn)不要封裝南缓。
過(guò)渡封裝無(wú)疑是最為致命的，程序員變成了傀儡汉形，不如去復(fù)制、黏貼概疆。
重復(fù)的邏輯在未來(lái)有的救，在新的代碼上運(yùn)用新的封裝凯旭，舊的代碼可以逐步替換使套，業(yè)務(wù)沒(méi)有變動(dòng)不去改動(dòng)也無(wú)妨罐呼，因?yàn)楦谋厝灰獙?duì)應(yīng)同等規(guī)模的測(cè)試侦高。
開(kāi)發(fā)產(chǎn)品是給用戶去使用的，說(shuō)白了计螺，用戶不看代碼侧馅，所以危尿，為了封裝導(dǎo)致項(xiàng)目延期馁痴，甚至在線上造成了bug肺孤，是萬(wàn)萬(wàn)不可取的。
而且小渊，沒(méi)有完美的代碼，更沒(méi)有完美的封裝酬屉，總要有些取舍揍愁，誰(shuí)也不是一下生就跑步出來(lái)的。
4
那封裝重不重要呢莽囤。
當(dāng)然重要
當(dāng)然重要
當(dāng)然重要
復(fù)制、黏貼不僅累惨远，還容易出錯(cuò)，你總是要改動(dòng)一些地方北秽，或者這復(fù)制一點(diǎn)，那復(fù)制一點(diǎn)羡儿。
可怕的是都錯(cuò)了還要一個(gè)個(gè)改，不同的團(tuán)隊(duì)成員你實(shí)現(xiàn)一遍缅叠，我實(shí)現(xiàn)一遍虏冻，不知道誰(shuí)會(huì)被坑...
一來(lái)影響心情，二來(lái)降低效率厨相，程序員心情不好可就很難輸出了，離職的前奏...
沒(méi)怎么封裝的代碼是給一個(gè)成長(zhǎng)的機(jī)會(huì)蛮穿，過(guò)度封裝的代碼是給一個(gè)變得成熟的機(jī)會(huì)。
陽(yáng)光總在風(fēng)雨后嘛单刁，當(dāng)然府适，我們不能去埋怨寫(xiě)出這些代碼的人，你永遠(yuǎn)不知道他經(jīng)歷了什么檐春，換做是我們，不一定會(huì)比他做的更好疟暖。
封裝的規(guī)律也在于此，需要撥繭抽絲骨望，逐步的看清本質(zhì)窜骄，從而一針見(jiàn)血、招招致命邻遏。
5
封裝的透明性虐骑、可擴(kuò)展性赎线、易讀性。
封裝不能過(guò)于依賴現(xiàn)有的業(yè)務(wù)邏輯垂寥。
封裝要往前看一看。
封裝重復(fù)的邏輯狭归，而非封裝重復(fù)的代碼文判。
寧可不封裝也不要過(guò)渡封裝。
這些定義的話單拿出來(lái)說(shuō)和屁話也差不了多少戏仓，后續(xù)的章節(jié)中會(huì)結(jié)合具體的例子，和大家共同探討怎樣更好的封裝赏殃。
