js组件化、模块化开发

组件化

1. 为何要组件化开发

   有时候页面代码量太大，逻辑太多或者同一个功能组件在许多页面均有使用，维护起来至关复杂，这个时候，就须要组件化开发来进行功能拆分、组件封装，已达到组件通用性，加强代码可读性，维护成本也能大大下降

2. 件化开发的优势

很大程度上下降系统各个功能的耦合性，而且提升了功能内部的聚合性。这对前端工程化及下降代码的维护来讲，是有很大的好处的，耦合性的下降，提升了系统的伸展性，下降了开发的复杂度，提高开发效率，下降开发成本，

1. 前端组件化的原则

• 专注

  一个组件只专一作一件事，且把这件事作好。

• 可配置性

  一个组件，要明确它的输入和输出分别是什么，要作可配置性，最基本的方式是经过属性向组件传递配置的值，而在组件初始化的声明周期内，经过读取属性的值作出对应的显示修改。还有一些方法，经过调用组件暴露出来的函数，向函数传递有效的值；修改全局 CSS样式；向组件传递特定事件，并在组件内监听该事件来执行函数等。

• 标准性

  任何一个组件都应该遵照一套标准，可使得不一样区域的开发人员据此标准开发出一套标准统一的组件。

• 复用性

  任何一个组件应该都是一个能够独立的个体，可使其应用在不一样的场景中。

• 可维护性

  任何一个组件应该都具备一套本身的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减小发生bug的概率。

模块化

1. 为何要模块化

   早期的javascript版本没有块级做用域、没有类、没有包、也没有模块，这样会带来一些问题，如复用、依赖、冲突、代码组织混乱等，随着前端的膨胀，模块化显得很是迫切。

2. 模块化的好处：

• 避免变量污染，命名冲突
• 提升代码复用率
• 提升了可维护性
• 方便依赖关系管理

1. 模块化几种方式：

• 函数封装

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
};
})();
这样在模块外部没法修改咱们没有暴露出来的变量、函数。
缺点：功能相对较弱，封装过程增长了工做量、仍会致使命名空间污染可能、闭包是有成本的。