ES6-23【javascript模块化】

一.模块化历史

(1).历史问题

1. 在刚开始所有的JS全部写在一个js当中
2. 随后分为index.html就写在index.js当中此时就会存在一个问题，由于公用了一个作用域就会产生、变量覆盖、变量重名、污染全局的问题
3. 所以产生了立即执行函数，但是依旧无法解决首页js加载顺序的问题，而且这也只是民间化的产物

(2).立即执行函数知识点

1. 立即执行函数如果不打;是会报错的，建议首尾都打上
2. 模块抛出对象，产出闭包
3. 不会暴露作用域
4. 但是存在着无法自由获得立即执行函数中的变量，所以无法依赖
5. 立即执行函数可通过注入形参的方式来实现变量接收

二.科学实现模块化的历史

(1).Node.js带来了模块化

基础语法

require('...')引入模块

module.exports 导出模块

基础定义

遵循CommonJs规范

其原理就是创建了一个模板实例，是在Node上运行的

require只能执行一次

后端模块化规范

采用的同步加载

实例演示

moduleA文件
var a =(function(){
    return [1,2,3,4,5].reverse()'
})()
module.exports={
    a
}

moduleB文件
var moduleA = require('./moduleA')
var b = (function(){
    return moduleA.a.concat([6,7,8,9,10])
})()
module.exports = {
    b
}

moduleC文件
var moduleB = require('./moduleB')
var c = (function(){
    return moduleB.b.join('-')
})()
module.exports = {
    c
}

index.js文件
log(require('moduleC.js').c)
index.html
<script src="js/common.js"></script>
<script src="js/index.js"></script>

(2).AMD

基本语法

define(moduleName,[module],factory) 定义模块

require([module],callback) 引入模块

基本定义

Asynchronous Module Definition异步模块定义

前置依赖,先加载模块在加载方法函数

缓存加载

示例代码

moduleA文件
define('moduleA',function(){
    var a = [1,2,3,4,5]
    return{
        a: a.reverse();
    }
})


moduleB文件
define('moduleB',['moduleA'],function(moduleA){
    var b = [6,7,8,9,10]
    return{
        b:moduleA.a.concat(b)
    }
})

moduleC文件
define('moduleC',['moduleB'],function(moduleA){
    return{
        C:moduleb.b.join('-')
    }
})

index.js文件
require.config({
    paths:{
        moduleA:'js/moduleA'，
        moduleB:'js/moduleB'
        moduleC:'js/moduleC'
    }
})
require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){
    console.log(moduleA.a);
     console.log(moduleB.b);
      console.log(moduleC.c);
})
index.html
<script src="js/require.js"></script>
<script src="js/index.js"></script>

(3).CMD

基本语法

define(function(require,exports,module){})定义模块

seajs.use([module路径],function(moduleA,moduleB,moduleC){}）使用模块

基本定义

Common Module Definition 通用模块定义

阿里巴巴写的

与AMD有根本上的区别

cmd是按需加载的，依赖就近，不像amd前置加载，需要全部把模块加载完，cmd需要的时候才会加载

实例演示

moduleA文件
define(function(require,exports,module){
    var a = [1,2,3,4,5]
    return {
        a:a.reverse()
    }
})

moduleB文件
define(function(require,exports,module){
    var moduleA = require('./moduleA'),
        b = [6,7,8,9,10]
    return {
        b:moduleA.a.concat(b)
    }
})
moduleC文件
define(function(require,exports,module){
    var moduleB = require('./moduleB');
    return {
        b:moduleB .b.join('-')
    }
})
index.js文件
seajs.use(['moduleA.js','moduleB.js','moduleC.js'],function(moduleA,moduleB,moduleC){
    console.log(moduleA.a);
     console.log(moduleB.b);
      console.log(moduleC.c);
})
index.html
<script src="js/sea.js"></script>
<script src="js/index.js"></script>

(4).es6

基本语法

import module from 路径 导入

export.module 导出

基本定义

Asynchronous Module Definition 异步模块定义

实例演示

moduleA文件
exprot default{
      a:[1,2,3,4,5].reverse()
}
moduleB文件
import moduleA from './moduleA'
exprot default{
      b:moduleA.a.concat([6,7,8,9,10])
}
moduleC文件
import moduleB from './moduleB'
exprot default{
      c:moduleB.b.join('-');
}
index.js
import moduleC from './moduleC'
log(moduleC.c)
index.html
<script src="js/index.js"></script>

(5).两者对比

export.a = 0
setTimeout(()=>{
    log('来自export',++exports.a);
},300)
common
const {a} = require('./exprot')
setTimeout(()=>{
    log('来自common.js',a);
},500)
0
es6
import{a} from './exprot';
setTimeout(()=>{
    log('来自es6',a);
},500)
1

1.common.js模块输出的是一个值得拷贝

ES6模块输出得是值得引用

2.commonjs模块是运行时加载得

ES6是在编译时加载