一、组件化思想概念
1. 思想背景
1.1业务场景
在做一次项目需求开发的过程中，涉及到动态创建多个条件区域，对于每个单独的条件区域，分为左边表格数据区和右边勾选左边表格某些数据行的区域。具体到左边表格数据区，包括一个通过用户输入的某个条件来查询数据，以一个表格分页的形式展示出来。其中这个表格里面包括复选框，可以选择表格中的某些项，然后右边区进行展示。
1.2最开始想的笨办法
因为这个需求是在原有基础上进行开发，平时的思维就是在既有的这个页面的js中进行代码开发。但是在开发过程中，并不是那么理想。因为这个“生成条件”区域是通过+ -按钮来动态添加删除某个条件区域。对于一级品类，二级品类等这些条件选项时，这时候需要展示这个条件选项下的所有数据，然后通过勾选表格中的某一行来达到填写条件值的目的。所以在这种情况下，通过+按钮会产生很多个条件区域。每个条件区域中包含自己的数据表格，自己的勾选表格某些项（条件值）。当时的想法是在添加按钮的事件监听函数中，获取所需要的数据然后将数据render到事先写好的模板中（此次项目中使用art-template模板）。但是这时候涉及到分页，所以需要初始化分页插件（项目中有现成的pager插件），但是这时候将创建好的这个分页插件挂载到哪里呢？想当然的将其挂载到这个页面的js对象上。这时候表格数据及其分页渲染好了，但是表格上的绑定事件也能绑定（将刚才使用art-template模板的渲染方法返回这个区域的jQuery对象，将其事件绑定在这个jQuery父级对象上，好像看起来现在行得通）。通过+添加一个条件区域时没问题，但是创建多个的时候，你就得考虑相互之间的独立性，数据之间及事件监听函数不能相互影响。所以多个分页插件需要挂载到这个页面的js对象上的不同变量上，这时候想来做起来都很麻烦，这是一方面，另一方面，也涉及到性能的开销。我做到这里的时候，感觉很复杂也很苦恼。
1.3便捷解决办法
当你发现需要创建多个相同业务场景的情况下，应该考虑JavaScript中的面向对象。开发一个公共的对象，也可以说是抽离一个小小的组件。这时候你就可以创建不同的对象实例，相互之间也不会影响。这时候将一个业务场景涉及到的条件区域数据渲染，事件绑定等囊括到一个公共的对象里面。这时候你仅仅需要传入不同的数据及jQuery对象即可。不同的数据和jQuery对象就是面向对象中的属性。分页插件也只需要绑定到不同的jQuery对象上即可，ajax异步获取数据等这些也可以封装到一个对象里。不同的对象实例对应一个+按钮添加的一个条件区域。不同对象实例之间不会相互影响。这就解决了。
这时候才发现JavaScript中面向对象的重要性。想到这里，觉得更有必要去看一下JavaScript的设计模式。组件化的思想并不是凭空想象出来的，而是通过不同的业务场景，不断的实践经验，这时候才会形成组件化思想。
原文地址：https://www.cnblogs.com/sminocence/p/11215037.html