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