前端模块

模块

• 匿名函数

• 立即执行函数

• CommonJS

  //引入
  const moduleA=require('./src/......');
  //导出
  module.exports=1;
  
  

  • 同步加载，意味着不适用于浏览器环境

  • 因为commonjs加载的是一个对象，所以实际上它是一种动态加载

  • 浏览器使用需要打包工具。

  • 浏览器为什么不兼容CommonJs？

​ 其原因是浏览器缺少Nodejs的四个环境变量（module,exports,require,global)

• AMD

  // dataService.js文件 
  // 定义没有依赖的模块
  define(function() {
    let msg = 'www.baidu.com'
    function getMsg() {
      return msg.toUpperCase()
    }
    return { getMsg } // 暴露模块
  })
  //alerter.js文件
  // 定义有依赖的模块
  define(['dataService'], function(dataService) {
    let name = 'Tom'
    function showMsg() {
      alert(dataService.getMsg() + ', ' + name)
    }
    // 暴露模块
    return { showMsg }
  })
  // main.js文件
  (function() {
    require.config({
      baseUrl: 'js/', //基本路径 出发点在根目录下
      paths: {
        //映射: 模块标识名: 路径
        alerter: './modules/alerter', //此处不能写成alerter.js,会报错
        dataService: './modules/dataService'
      }
    })
    require(['alerter'], function(alerter) {
      alerter.showMsg()
    })
  })()
  

  • 规范在浏览器环境中异步加载模块，而且可以并行加载多个模块。不过，AMD规范开发成本高，代码书写和阅读的噪声太大，模块定义方式的语义不顺畅。

  • 总结:异步，依赖提升，预加载

• CMD

  // module1.js文件
  
  define(function (require, exports, module) {
     var m2=require('./module2') //引用直接引用就行，很方便
    //内部变量数据
    var data = 'atguigu.com'
    //内部函数
    function show() {
      console.log('module1 show() ' + data)
    }
    //向外暴露
    exports.show = show
  })
  

  • 规范与AMD规范很相似，都用于浏览器编程，依赖就近，延迟执行，可以很容易在Node.js中运行。不过，依赖SPM 打包，模块的加载逻辑偏重

  • 总结：异步，依赖就近，延迟执行（懒加载

• ES6 模块

  • 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案

  ​ 且，es6的静态加载特性，意味着他可以用于tree shaking

  • 浏览器使用直接利用