前言

昨天看见了有关模块化的知识点，“require和import有什么区别”刚开始工作前，我也有遇到这个问题，浅显的只知道动态加载和静态加载，但是实际上实质却是前端模块化。所以去仔细看了看资料，系统的去了解一下八股文内容。

模块化的发展史

• 全局function
• namespace命名（隔离同名变量污染问题）

let moduleName={
name:"命名",
foo(),
bar()
}
缺点：moudleName.name="哈哈哈"这样的方式可以对变量直接进行更改

• IIFE

(function(window) {
  let data = 'www.xianzao.com'
  //操作数据的函数
  function foo() {
    //用于暴露有函数
    console.log(`foo() ${data}`)
  }
  function bar() {
    //用于暴露有函数
    console.log(`bar() ${data}`)
    otherFun() //内部调用
  }
  function otherFun() {
    //内部私有的函数
    console.log('otherFun()')
  }
  //暴露行为
  window.myModule = { foo, bar } //ES6写法
})(window)

特点：外部只能通过向外暴露的方法进行访问或修改
myModule.data  =》结果是undefined

模块化规范

CommonJs（同步加载）:

特点：
1.加载顺序按照模块出现的顺序决定，动态加载，代码在运行时执行
2.多次导入，只会运行第一次，二次直接从缓存中读取
3.导出的值是拷贝值，可在外部进行修改，且不会造成变量污染

基本使用：
module.exports或者exports
require

运用环境：
非浏览器端

考点：
常用来跟Es模块化的特点作比较

esModule

特点：
1.静态加载，代码在编译时执行
2.导入的是值的引用，不可进行修改

基本使用：
export或者export default + import

回答问题

问题：import和require的区别
答：两者其实是模块化的概念，只是属于不同模块化规范，require是CommonJs的一种规范；import是es6的一种规范

CMD,AMD,UMD (通常是异步加载)

CMD: 依赖就近原则
defined(function(require, exports, module){
})

AMD:依赖前置
defined(['module1','module2'],function(m1,m2){
})

UMD：(通用模块化规范)
(function(root, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        console.log('是commonjs模块规范，nodejs环境')
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        console.log('是AMD模块规范，如require.js')
        define(factory)
    } else if (typeof define === 'function' && define.cmd) {
        console.log('是CMD模块规范，如sea.js')
        define(function(require, exports, module) {
            module.exports = factory()
        })
    } else {
        console.log('没有模块环境，直接挂载在全局对象上')
        root.umdModule = factory();
    }
}(this, function() {
    return {
        name: '我是一个umd模块'
    }
}))

特点总结：

这个图片是盗用的：juejin.cn/post/684490…