首页 > 其他 > 详细

ES6---module 模块化

时间:2020-09-01 08:51:21      阅读:53      评论:0      收藏:0      [点我收藏+]

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

})

  

 

ES6---module 模块化

原文:https://www.cnblogs.com/yuaima/p/13594103.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!