ECMAScript6 Module的知识点

　　之前不理解LayUI为什么不更新了，这么好的一个前端产品就这么轻易放弃，真是可惜！看了网上写的一些原因，说的也在理就是感觉遗憾，看了Vue.js后觉得这是技术迭代正常更新的结果。

　　LauUI使用的依然是ES5(ECMAScript5)的标准，而2015年6月ECMAScript6已经正式成为了国际标准了，ECMAScript6【正式名称：ECMAScript2015】。

　　以LayUI开发者的技术实力，他当然可以使用新技术来重写LayUI，包括内核中的快速检索与更新，但是没有后续了。

　　我作为一个前端小白就只能跟着走了，尽快适应ECMAScript6，否则就不能很好地使用Vue.js等产品。当然，也可以按ES5的标准来使用Vue.js，按照自己的设计逐步进行页面的编写，但是很多它的配套产品就不能很好地使用了。

　　要使用Vue+Element+Admin，必须先熟悉ES6的相关知识点，首先是Module。

　　ES6的Module是为了应对编写复杂、大型的应用程序而设计的，主要是export（导出）、import(导入)。ES5或之前的依然以函数为核心，ES6则以模块为核心。

　　1、Module的导出和导入

　　export：用于输出模块的对外接口，规定外部可以读取本模块内部的规定变量、对象、函数；
　　⑴　可以使用as关键字进行重命名；
　　⑵　该命令可以出现在模块的任意位置。

　　import：用于引入指定模块提供的变量、对象、函数；
　　⑴　可以使用as关键字进行重命名；
　　⑵　引入的变量都是只读的。（对象内部的属性是可以修改的）

　　2、Module的加载

　　使用<script>标签，增加type=”module”属性：
　　<script type=”module” src=”abc.js”></script>

　　注意：Module是静态导入的，不能使用表达式来判断在运行时才明确的导入内容。

　　3、示例

　　index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="import1.js" id="PK"></script>
</body>
</html>

　　⑴ export default

//export1.js文件中导出函数
export default function(str){
    return str+'999';
}


//import1.js文件中导入函数
import func from "./export1.js"
console.log(func('JavaScript'));

//export1.js文件中导出对象
export default class person{
    constructor(name){
        this.name="我的名字："+name
    }
}

//import1.js文件中导入对象
import obj from "./export1.js"
let p=new obj('Json')
console.log(p.name);

//export1.js文件中导出变量
let name="xml"
export default name

//import1.js文件中导入变量
import S1 from "./export1.js"
console.log(S1)

　　注意点：一个导出模块文件中只能有一个export default定义。

　　所以，上面的应用相对比较少见。

　　⑵ 多个导出与导入

//export1.js导出内容
function func(str){
    return str+'999';
}

class person{
    constructor(name){
        this.name="我的名字："+name
    }
}

let name="xml"

export {func,person,name}

//import1.js导入内容
import {func,person,name} from "./export2.js"
console.log(func('JavaScript'));

let p=new person('Json')
console.log(p.name);

console.log(name)

　　⑶ 整体引入加*

//引入部分内容
import * as obj from "./export3.js"
console.log(obj.func('JavaScript'));

let p=new obj.person('Json')
console.log(p.name);

console.log(obj.name)

　　⑷使用as

import {func as fn,person as pp,name as sname} from "./export4.js"
console.log(fn('JavaScript'));

let p=new pp('Json')
console.log(p.name);

console.log(sname)

　　在导出的时候也可以使用as，但一般不推荐这么做，因为可以在开始定义变量的时候就确定好变量名，没有必要再最后来换名。

ECMAScript6 Module的知识点

猜你喜欢