1.事出必有因
最近在看老项目的代码，一个富客户端的js代码，几千行的代码，全是function（）{} var...的垂直布局，真的是要感动的哭了。
一开始都是这样，想实现什么功能，不管三七二十一，function走起，最终堆起无数个变量和函数来完成一个画面的js。我也是，但过段时间自己去改代码bug或者加功能的时候，我的天，这是我写的吗，什么时候写的，怎么理不清思路了,而且，修改一个地方其他地方也得改，改完了还容易出新bug，偶尔都会忘了是自己写的，心里默念：这个傻X...恩，还好是默念。
慢慢的代码看多了点，了解了些js的模块封装的一些方式，面向对象的相关思想（单一职责、高内聚低耦合....再说就有点装了>.<），越来越觉得易读、易改的代码应该需要更好的组织形式，正好最近碰到了一个网友相关的问题，看了他想优化的代码，真有看到自己一开始写的代码的感觉：各处填补想完美解决问题，可最后还是会有出乎意料的bug，于是用了他的代码做了次实践。
2.一睹为快
如下图，功能比较简易：
选择之后添加，展示区便陈列：
展示区点击‘X’的时候去除当前内容，选择区相应也取消对应的勾选：
