首页 > 其他分享> 文章详细

ES6---module 模块化

2020-09-01 08:00:19 阅读：175 来源： 互联网

标签：ES6 12 const 模块化 module js --- export import

1模块化

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

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

AMD requireJS,curlJs

CMD seajs

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

import (xxx) from ddd

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

html中

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

</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"

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]=>{

})

标签：ES6,12,const,模块化,module,js,---,export,import
来源： https://www.cnblogs.com/yuaima/p/13594103.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6---module 模块化