前端模块化、组件化开发

使用过ReactJS进行Web UI的组件化开发，和使用过AngularJS的双向数据绑定和模块化后，感觉到了组件化、模块化、双向数据绑定对Web前端开发的重要性。

1、组件化可以极大提高前端代码的可维护性，前端的组件化简单的可以理解为一块HTML元素和一段JS代码组成，该段JS代码只负责维护该块HTML元素的样式，组件封装自己的属性和行为，并对外提供接口供其他组件访问自己的状态。

2、双向数据绑定是AngularJS的核心”以数据为中心”的一个样例，这里面也牵扯到了AngularJS的controller，一个controller开辟一个函数作用域，每个controller + UI就构成了一个组件，controller负责维护自己所管辖的UI元素的数据。整个页面就是有多个这样的组件构成。组件可以嵌套。

在JSRM中做过很多页面开发后，刚开始时用jquery写代码觉得很容易，代码一直是在末尾不断增加，虽然有时候简单的画了个分界线标识来做function()分类，比如这一块的函数是负责哪一块页面的，另外一块的函数又是负责哪一块页面的。这样做很简单，直观，但是当代码多时，尤其是函数之间相互调用时，这样写代码的弊端就凸显了：1、函数之间调来调去，多调几次都不知道跑哪里去了，前面做的分界标识感觉不合理了，不应该那么分界了 2、设置全局变量来解决函数，不同的函数都对同一个全局变量进行修改，最后要使用的时候不知道该全局变量到底处于什么值状态 3、等需求变更时，或者发现bug时去修改代码，发现代码之间耦合性太高，相互依赖，结果改起来牵一发而动全身，非得把全部代码读懂才敢去该，这违背了软件设计中的可拓展性和可维护性。

组件化是解决以上问题的办法：

1、不应该以函数作为代码分块，而应该以组件作为代码组织的方法。

2、组件就类似于Java中的对象，每一个组件有单独的作用域来封装自己的属性和行为，对于公共的属性和方法则提供接口供外部访问，因此就不需要设置全局变量了。

3、模块化和组件化就是帮助实现分离职责和解耦合的，因此在代码中要尽可能的封装组件，划分模块，这样后面回来改代码时一目了然，能快速找到要修改的组件，并能尽可能少的改动前面的代码。