JavaScript模块化编程

 

前言

     前端需要写的代码变得越来越多，所以需要模块化来解决代码分割，作用域隔离，模块之间的依赖问题。

模块化的优点

     1：可维护性，方便独立更新和改进

     2：命名空间，模块化封装，避免污染全局变量

     3：复用代码

CommonJS

     Conmmonjs的目的是让浏览器之外的javascript能够进行模块化的方式进行开发

     在commonjs规范中，每个JavaScript文件就是一个独立的上下文，在这个上下文中默认创建的属性，变量，函数，类都是私有的。

     Commonjs规范主要适用场景是服务器编程，采用同步加载模块策略。

     模块主要实现方案主要包含require与module这两个关键字，允许某个模块对外暴露接口并且由其他模块导入使用

//sayModule.js
function SayModule () {
    this.hello = function () {
        console.log('hello');
    };

    this.goodbye = function () {
        console.log('goodbye');
    };
}

module.exports = SayModule;

//main.js 引入sayModule.js
var Say = require('./sayModule.js');
var sayer = new Say();
sayer.hello(); //hello

AMD异步模块定义

     RequireJS是一个遵守了AMD规范的js库，下面将用RequireJS来定义模块

     RequireJS文档：http://www.requirejs.cn/

<script data-main="./main.js" src="./require.js"></script> //加载require.js定义入口文件
      //method.js
      define({
        var1: 1,
        var2: 2,
        methodOne: function (){
          alert(this.var1);
        },
        methodTwo: function (){
          alert(this.var2);
        }
      });

      //main.js
      define( function( require ){
        var method = require( 'method' );
        method.methodOne();
      });

CMD 通用模块定义

     SeaJS是一个遵守了CMD规范的js库，下面将用SeaJS来定义模块

     SeaJS文档：https://www.zhangxinxu.com/sp/seajs/

<script src="./sea.js"></script>
      <script src="./main.js"></script>
      //method.js
      define(function(require, exports) {
        var var1 = '我是var1';
        var var2 = '我是var2';
      
        function methodOne(){
          alert(var1);
        }
      
        function methodTwo(){
          alert(var2);
        }
        
        // 对外提供 doSomething 方法
        exports.methodOne = methodOne;
        exports.methodTwo = methodTwo;
        
      });
      //main.js
      seajs.use('./method',function(method){
        method.methodTwo();
      });

 

 

AMD和CMD的区别

     1.RequireJS在主文件里是将所有的文件同时加载，然而SeaJS强调一个文件一个模块。

     2.AMD推崇依赖前置，CMD推崇依赖就近。

ES6模块

Es6自动采取严格模式，严格模式主要有以下限制

1. 变量必须声明后在使用
2. 函数的参数不能有同名属性否则报错
3. 不能使用with语句
4. 不能对只读属性赋值，比如（const）常量
5. 禁止this指向全局

主要是用export对外提供属性和方法，利用import引用模块
        //method.js
        class Method {
          constructor() {
            this.var1 = '我是var1';
            this.var2 = '我是var2';
          }
        
          methodOne(){
            alert(this.var1);
          }
        
          methodTwo(){
            alert(this.var2);
          }
        }
        
        export default Method;

        //main.js
        import methodModule from './method.js'
        
        let method = new methodModule();
        
        method.methodOne();