前端模块化开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，[点击查看活动详情](jueji

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

模块

这个规范主要用于在服务器端模块化。CommonJs模块语法不能在浏览器运行
CommonJs模块语法不能再浏览器中直接运行。 CommonJs 使用require()指定以来。exports定义共用API。

var module = require('module')
module.export = {}

多次引入依赖。一来只会执行一次。模块第一次加载后就会形成缓存。后续加载都从缓存中获取。

AMD 实现的核心是函数包装模块定义。放置声明全局变量。加载器可以控制何时来加载模块。
AMD 可以使用字符串制定自己的依赖。
AMD 会在所有依赖模块加载完毕之后立即调用模块的工厂函数。

define('moduleA',['moduleB'],function(moduleB){
    return {
        test:'test'
    }
})

AMD 也可以支持require和exports

define('moduleA',['require','exports'],function(require,exports){
    let moduleB = require('moduleB')
    exports.test = moduleB.test
})

UMD 的出现是为了统一CommonJS和AMD的生态。UMD可以创建两个系统都可以使用的模块代码。模块代码一般会由构建工具自动生成。

es6模块化是集成AMD和CommonJS的。他可以在原生浏览器加载。 es6模块是异步加载和执行的。

<script type="module"> 
// 模块代码
</script>

模块代码会像 script 的defer 一样，按照脚本顺序加载。嵌入的模块不能用import加载其他模块。通过外部文件加载的模块可以使用import加载。 es6module既可以浏览器原生加载。也可以使用构建工具加载。

es6模块导入通过import关键字实现。

es6模块支持两种导出方式。通过exports关键字。

export const test = 'a'
let obj = {
    a:'1',
    b:'2'
}
export default obj

es6支持模块转义导出

比如在b模块导入a模块的所有变量。再直接导出。

export {a,b,c} from 'a.js'

以上模块化的方式导出的模块都是单利模式。只能加载一次。