前端组件化思想理解
Posted sminocence
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端组件化思想理解相关的知识,希望对你有一定的参考价值。
一、组件化思想概念
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的设计模式。组件化的思想并不是凭空想象出来的,而是通过不同的业务场景,不断的实践经验,这时候才会形成组件化思想。
以上是关于前端组件化思想理解的主要内容,如果未能解决你的问题,请参考以下文章