1.事出必有因
最近在看老項(xiàng)目的代碼，一個(gè)富客戶端的js代碼，幾千行的代碼，全是function（）{} var...的垂直布局，真的是要感動(dòng)的哭了。
一開始都是這樣，想實(shí)現(xiàn)什么功能，不管三七二十一，function走起，最終堆起無數(shù)個(gè)變量和函數(shù)來完成一個(gè)畫面的js。我也是，但過段時(shí)間自己去改代碼bug或者加功能的時(shí)候，我的天，這是我寫的嗎，什么時(shí)候?qū)懙?，怎么理不清思路?而且，修改一個(gè)地方其他地方也得改，改完了還容易出新bug，偶爾都會(huì)忘了是自己寫的，心里默念：這個(gè)傻X...恩，還好是默念。
慢慢的代碼看多了點(diǎn)，了解了些js的模塊封裝的一些方式，面向?qū)ο蟮南嚓P(guān)思想（單一職責(zé)、高內(nèi)聚低耦合....再說就有點(diǎn)裝了>.<），越來越覺得易讀、易改的代碼應(yīng)該需要更好的組織形式，正好最近碰到了一個(gè)網(wǎng)友相關(guān)的問題，看了他想優(yōu)化的代碼，真有看到自己一開始寫的代碼的感覺：各處填補(bǔ)想完美解決問題，可最后還是會(huì)有出乎意料的bug，于是用了他的代碼做了次實(shí)踐。
2.一睹為快
如下圖，功能比較簡(jiǎn)易：
選擇之后添加，展示區(qū)便陳列：
展示區(qū)點(diǎn)擊‘X’的時(shí)候去除當(dāng)前內(nèi)容，選擇區(qū)相應(yīng)也取消對(duì)應(yīng)的勾選：
