五一前端专题三-模块化

一个页面需要引入多个js文件问题:

• 请求过多
• 依赖模糊
• 难以维护
  这些问题可以通过现代模块化编码和项目构建来解决

JS模块化进化史

1.函数堆积，全局污染
2.将数据/行为封装到对象中（命名空间），解决了命名冲突，不安全，变量可修改
3.闭包
4.IIFE增强模式

• IIFE : 立即调用函数表达式--->匿名函数自调用
• 编码: 将数据和行为封装到一个函数内部, 通过给window添加属性来向外暴露接口
• 引入依赖: 通过函数形参来引入依赖模块

      (function(window, module2){
        var data = 'atguigu.com'
        function foo() {
           module2.xxx()
           console.log('foo()'+data)
        }
        function bar() {
           console.log('bar()'+data)
        }
        
        window.module = {foo}
      })(window, module2)

模块化的规范（关键是【拆】【合】）

1.CommonJs -唯一的双端JS规范

CommonJS 是一套规范，它的创建和核准是开放的。这个规范已经有很多版本和具体实现。
CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports或exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。
服务端实现： Node.js模块化

  |-modules
    |-module1.js
    |-module2.js
    |-module3.js
  |-app.js  //合并 node app.js
  |-package.json
    {
      "name": "commonJS-node",
      "version": "1.0.0"
    }

浏览器端实现: Browserify模块化

 |-js
   |-dist //打包生成文件的目录
   |-src //源码所在的目录
     |-module1.js
     |-module2.js
     |-module3.js
     |-app.js //应用主源文件
 |-index.html
 |-package.json
   {
     "name": "browserify-test",
     "version": "1.0.0"
   }

2.AMD

*AMD 定义了一套 JavaScript 模块依赖异步加载标准，来解决同步加载的问题。
* require.js
* 基本语法
* 定义暴露模块: define([依赖模块名], function(){return 模块对象})
* 引入模块: require(['模块1', '模块2', '模块3'], function(m1, m2){//使用模块对象})

3.CMD

• sea.js
  • 基本语法
    • 定义暴露模块:

      define(function(require, module, exports){
        通过require引入依赖模块
        通过module/exports来暴露模块
        exports.xxx = value
      })
      

    • 使用模块seajs.use(['模块1', '模块2'])

4.ES6

• 定义暴露模块: export
  默认暴露(暴露一个数据):
  export default 对象
  一般暴露(暴露多个数据):
  export const a = value1
  export let b = value2
  const c = value1
  let d = value2
  export {c, d}
  • 引入使用模块: import
    引入default模块:
    import xxx from '模块路径/模块名'
    引入一般模块
    import {a, b} from '模块路径/模块名'
    import * as module1 from '模块路径/模块名'
• 使用Babel将ES6编译为ES5代码
• 使用Browserify编译打包js

参考

最新的模块化 JavaScript 设计模式
详解JavaScript模块化开发
Javascript 模块化编程 - 阮一峰
https://zhaoda.net/webpack-handbook/commonjs.html