前端模块化发展历程

2021-09-08

Word count: 769 | Reading time≈ 3 min

前端模块化

前端模块化主要作用是用来抽离公共代码，隔离作用域，避免变量冲突。

IIFE

使用自执行函数来划分代码模块。
特点：在一个单独的函数作用域中之行代码，避免变量的冲突。

(fucntion(){
  return {
    dataArr:[]
  }
})()

AMD

只在浏览器中实现，使用require.js
特点：依赖必须提前声明好；加载为异步加载，指定回调函数。


require(['module1','module2'],function(){
  return ...
})

define('./index.js',function(code){
	// code 就是index.js 返回的内容
})

CommonJS

在Nodejs中可以使用，在浏览器有webpack，browserfy

特点：
模块加载同步，资源加载完成后再执行代码
每个文件都可以是一个模块
服务端：模块加载是在运行时同步加载
浏览器：模块加载是提前编译打包处理

//引入三方
var module1 = require('module1.js')
//引入自定义模块
require('./../aaa.jpg')
//读入文件，并返回模块export的对象。如果没有找到指定模块，代码会报错

//对外暴漏的方法
module.export = value
export.xx = value
//module变量代表当前模块，export属性是对外的接口

UMD

是AMD和CommonJS（服务端模块化规范)的结合体，保证模块可以被amd和commonjs调用。

// Root 想要挂载的位置
//factory 对应的真实模块
(function(Root,factory){
  if(tyepOf define ==='fucntion' && define.amd){//兼容AMD
    define('./index.js',factory)
  }else if(tyepOf exports === 'Object' && module.exports){//兼容commonjs
    module.exports = function( root, moduleA ) {
          if ( moduleA === undefined ) {
              if ( typeof window !== 'undefined' ) {
                  moduleA = require('./index.js');
              }
              else {
                  moduleA = require('./index.js')(root);
              }
          }
          factory(moduleA);
          return moduleA;
      };
  }else{
    factory(moduleA)
  }
})(function(module){
})

CMD

只在浏览器实现，使用sea.js
特点：
整合了commonjs和AMD的特点
模块使用时再声明
模块的加载是异步的，在使用模块的时候才会加载执行。使用是同步的。

//同步加载
var module =require('module1.js')

//异步加载
require('module2.js',function(module){
  //使用module
})



// 直接对外暴露
 module.export = value
 export.xx = value


// 引入其他模块后再对外暴露
var module2 = require('./module2.js');
require('./module2.js',function(){

})
export.xx = module2

es6 module

服务端和浏览器都可以进行使用

特点：
需要babel将es6转为es5
browserify编译
依赖需要提前声明在顶层

1 2	// impport // export M export default M

es6 module 和 commonjs的区别

1.使用
es6模块是动态引用，不会缓存值，模块里的变量属于模块。
common加载的是一个值的copy，模块可以多次加载，但是只会在第一次运行时加载，以后再次加载，只会读取第一次加载的缓存值，如果想重新加载，就要清除缓存。

2.加载
es6 module 模块不是对象，只是一种对外的静态定义，在代码静态解析阶段就会生成。

common是在运行时加载。

webpack 图标