组件化
为什么要组件化开发
有时候页面代码量太大, 逻辑太多或者同一个功能组件在许多页面均有使用, 维护起来相当复杂, 这个时候, 就需要组件化开发来进行功能拆分, 组件封装, 已达到组件通用性, 增强代码可读性, 维护成本也能大大降低
件化开发的优点
很大程度上降低系统各个功能的耦合性, 并且提高了功能内部的聚合性. 这对前端工程化及降低代码的维护来说, 是有很大的好处的, 耦合性的降低, 提高了系统的伸展性, 降低了开发的复杂度, 提升开发效率, 降低开发成本,
前端组件化的原则
专一
一个组件只专注做一件事, 且把这件事做好.
可配置性
一个组件, 要明确它的输入和输出分别是什么, 要做可配置性, 最基本的方式是通过属性向组件传递配置的值, 而在组件初始化的声明周期内, 通过读取属性的值做出对应的显示修改. 还有一些方法, 通过调用组件暴露出来的函数, 向函数传递有效的值; 修改全局 CSS 样式; 向组件传递特定事件, 并在组件内监听该事件来执行函数等.
标准性
任何一个组件都应该遵守一套标准, 可以使得不同区域的开发人员据此标准开发出一套标准统一的组件.
复用性
任何一个组件应该都是一个可以独立的个体, 可以使其应用在不同的场景中.
可维护性
任何一个组件应该都具有一套自己的完整的稳定的功能, 仅包含自身的, 与其它组件无关的逻辑, 使其更加的容易理解, 使其更加的容易理解, 同时大大减少发生 bug 的几率.
模块化
为什么要模块化
早期的 JavaScript 版本没有块级作用域, 没有类, 没有包, 也没有模块, 这样会带来一些问题, 如复用, 依赖, 冲突, 代码组织混乱等, 随着前端的膨胀, 模块化显得非常迫切.
模块化的好处:
避免变量污染, 命名冲突
提高代码复用率
提高了可维护性
方便依赖关系管理
模块化几种方式:
函数封装
- var myModule = {
- var1: 1,
- var2: 2,
- fn1: function(){
- },
- fn2: function(){
- }
- }
这样我们在希望调用模块的时候引用对应文件, 然后
myModule.fn2();
这样避免了变量污染, 只要保证模块名唯一即可, 同时同一模块内的成员也有了关系
缺陷: 外部可以随意修改内部成员, 这样就会产生意外的安全问题
立即执行函数表达式 (IIFE)
可以通过立即执行函数表达式 (IIFE), 来达到隐藏细节的目的
- var myModule = (function(){
- var var1 = 1;
- var var2 = 2;
- function fn1(){
- }
- function fn2(){
- }
- return {
- fn1: fn1,
- fn2: fn2
- };
- })();
这样在模块外部无法修改我们没有暴露出来的变量, 函数.
缺点: 功能相对较弱, 封装过程增加了工作量, 仍会导致命名空间污染可能, 闭包是有成本的.
来源: http://www.bubuko.com/infodetail-2988093.html