ES6---module 模块化

1模块化

在ES6出来之前，社区制定了一套模块化规范；

Common.js   主要是服务段  node.js  require（‘http')

AMD       requireJS,curlJs

CMD   seajs

ES6出来以后，规范了服务端和客户端规范

  import (xxx) from ddd

   

1).如何定义模块，如何使用

html中 

<javascript type="module">

 这里面使用一些模块化的东西

</javascript>

具体实现

先写一个1.js

export const a=12;

<javascript type="module">

import {a} from "./1.js";

</javascript>

import 的特点：

  a). import 可以是相对路径，也可以是绝对路径

       import "../jquery.js"

       import {a} from "./1.js"

  b).import 模块化只会导入一次，无论引入多少次

      import {a} from "./1.js"

      import {a} from "./1.js"

   c).import  "./modules/1.js" 相当于引入这个文件

2） 多个变量

1.js

  export const a=12;
  export const b=5;
  export  const c=30;

import {a,b,c} from "1.js"

const a=12;
const b=5;
const c=30;
export {
    a as aaa,
    b as bbb,
    c as ccc
}


import {aaa,bbb,ccc} from "1.js"
import  * as mod from "1.js"

　　

注意

 1.js

 export default 12;

import a from "1.js"

如果1.js中是export default 这种形式的

import 这个就没有{}这个符号了


1.js

export default 12;
export const  b=13;
export const c=15;

import a,{b,c} from "1,js"

　　import 有提升的作用，会提升到最前面

  

<javascript type="module">
  console.log(a)
import {a} from "1.js"

</javascript>

这个时候a是有值的
相当于
<javascript type="module">
import {a} from "1.js"
  console.log(a)
</javascript>

导出的模块，如果里面的变了，外面会变化

 

import  动态引入

import 类似node中的require,可以动态的引入，默认import 语法不能写到if中去

 var a=12;
if(a=12){

import {a} from "1.js"
}else{
 
 import {b} from "2.js"
}

这种写法是错误的


正确的写法

import ("1.js).then(res=>{
  ....
  ....
})

　　

function sign(sign){

if(sign==1){

  return "1.js"
}else{

  return "2.js"

}
}


import (sign(1)).then(res=>{

})

按需加载

或者
Promise.all([import("1.js"),import ("2.js"))).then(([mod1,mod2]=>{

})