简明 ES6 模块
简明 ES6 模块
1.什么是模块
模块就是一段代码,这段代码可以反复使用,经常单独写成一个文件,一旦加载会立即执行。
2.导出
导出有 2 种方式:命名导出和默认导出,分别用关键字export
和export default
表示
2.1 命名导出:export 关键字
- 第一种方式:在要导出的代码前加上 export 关键字就可以了!
export var foo;
export let foo;
export const foo;
export function myFunc() {}
export function* myGenFunc() {}
export class MyClass {}
- 第二种方式:将要导出的对象放在
export {}
的{}
中
var foo1;
let foo2;
const foo3;
function myFunc() {}
class MyClass {}
export {foo1, foo2, foo3, myFunc, MyClass}
2.2 默认导出:export default 关键字
- 第一种方式:在要导出的函数或者类之前加 export default 关键字,其中名称可以省略。这将会使其具有匿名函数和匿名类的功能。
export default function myFunc() {}
export default function () {}
export default function* myGenFunc() {}
export default function* () {}
export default class MyClass {}
export default class {}
export default foo;
export default 'Hello world!';
export default 3 * 7;
export default (function () {});
- 第二种方式:用
export default moduleName
关键字导出
=========================
var foo1;
export default foo1;
==========================
let foo2;
export default let foo2;
==========================
export function myFunc() {};
export default myFunc;
注意:使用命名导出时,一个 js 文件可以 export 多个模块;但是使用默认导出时,一个文件只能有一个模块导出,否则将会报错。
2.3 其他
2.3.1 重命名导出
export { MY_CONST as FOO, myFunc };
export { foo as default };
2.3.2 从其他模块导出
export * from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';
export { default } from 'src/other_module';
export { default as foo } from 'src/other_module';
export { foo as default } from 'src/other_module'
3.导入
导入方式 | 语法 | 描述 |
---|---|---|
默认导入 | import localName from 'src/my_lib'; |
- |
命名空间导入 | import * as my_lib from 'src/my_lib'; |
- |
命名导入 | import { name1, name2 } from 'src/my_lib'; |
- |
重命名导入 | import { name1 as localName1, name2 } from 'src/my_lib'; |
- |
空导入 | import 'src/my_lib'; |
仅加载模块,不导入任何内容 |
默认导入+命名空间 | import theDefault, * as my_lib from 'src/my_lib'; |
- |
默认导入+命名导入 | import theDefault, { name1, name2 } from 'src/my_lib'; |
- |
4.导出与导入之家的关联
- 使用命名导出时,应用
import {ModuleName}
的方式导入;使用默认导出时,使用import moduleName
的方式导入,无需加花括号。 - 导入的时候,我们可以只导入我们需要的模块,如以下。
------lib.js-----
export const PI = '3.14'
export let perimeter = radius => {
console.log('周长:', 2 * PI * radius)
}
-----main.js-----
import {perimeter} from 'lib'
perimeter(1);
5. 在 script 中使用模块
<!--加载一个js模块文件-->
<script type="module" src="module.js"></script>
<!-- 内联引入一个模块 -->
<script type="module">
import {sum} from './example.js';
let res = sum(1,2);
6.注意事项
- 直接使用模块语法在浏览器中可能无效,需要 babel 等工具转为可接受的语法
- 导出的 2 种方式 export 和 export default 在一个文件中最好用一种,尽量少混用
- 在 ES6 模块中,default 是一个关键字,不要使用 default 作为 as 的重命名名称
- import 后,import 的模块将会被提升,放置于当前代码的最前端。因此,何处导入模块并不重要。
- import 应该是单独的一条语句,不能在其他语句中运行该语句。以下 example.js 中的操作将导致错误。
- 导入的只是当初模块的只读视图,这意味着操作的模块中的变量都存储在模块的内部
-----example.js------
if(xxx){
import example from "mock"
}
7.实例
【实例 1】链接信息
-----api.js-----
export let linkInfo = [
{
name: '百度',
address: 'baidu.com'
},
{
name: '新浪',
address: 'sina.com'
},
{
name: '优酷',
address: 'youku.com'
}
]
-----main.js-----
import {linkInfo} from "mock"
console.log('链接信息:',JSON.stringify(linkInfo))
【实例 2】工具类
// 加解密算法
import CryptoJS from 'crypto-js';
function getPrivate() {
let result = 'abcdef';
for (let i = 0; i < 10; i++) {
result += i;
}
return result;
}
export function Encrypt(data) {
let src = CryptoJS.enc.Utf8.parse(data);
let encrypted = CryptoJS.AES.encrypt(src, CryptoJS.enc.Utf8.parse(getPrivate()), {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.ciphertext.toString(CryptoJS.enc.Base64);
}
export function Decrypt(data) {
let decrypt = CryptoJS.AES.decrypt(data, CryptoJS.enc.Utf8.parse(getPrivate()), {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
var result = decrypt.toString(CryptoJS.enc.Utf8);
return result;
}
【实例 3】接口
-----api.js-----
export default {
addLink (link) {
let params = {
name: link.name,
address: link.address
}
return http
.post('/link/add', params)
.then(data => {
return Promise.resolve(data)
})
.catch(e => {
return Promise.reject(e)
})
},
updateLink (link) {
let params = {
id: link.id,
name: link.name,
address: link.address
}
return http
.post('/link/update', params)
.then(data => {
return Promise.resolve(data)
})
.catch(e => {
return Promise.reject(e)
})
},
getLinkList () {
let params = {
currentPage: 1,
pageSize: 20
}
return http
.post('/link/list', params)
.then(data => {
return Promise.resolve(data)
})
.catch(e => {
return Promise.reject(e)
})
},
deleteLink (link) {
let params = {
id: link.id
}
return http
.post('/link/delete', params)
.then(data => {
return Promise.resolve(data)
})
.catch(e => {
return Promise.reject(e)
})
}
}
-----main.js-----
import * as api from "./myLib";
api.addLink(myParams)
.then(res=>{console.log("well")})
.catch(e => {console.log(e)});
简明 ES6 模块的更多相关文章
- ES6模块import细节
写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...
- ES6模块的import和export用法总结
ES6之前以前出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs前者主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步 ...
- commonjs模块和es6模块的区别
commonjs模块与es6模块的区别 到目前为止,已经实习了3个月的时间了.最近在面试,在面试题里面有题目涉及到模块循环加载的知识.趁着这个机会,将commonjs模块与es6模块之间一些重要的的区 ...
- ES6模块之export和import详解
ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它.ES6的模块系统大致分为导出(export)和导入(import)两个模块. 1.模块导出(ex ...
- Webpack4教程:第一部分,入口、输入和ES6模块
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://wanago.io/2018/07/16/webpack-4-course-par ...
- ES6 模块机制
ES6 实现了模块功能 将文件当作独立的模块,一个文件一个模块 每个模块可以导出自己的API成员,也可以导入其他模块或者模块中特定的API ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模 ...
- Es6模块语法笔记
/** * Created by Administrator on 2017/4/15. */ /*---------------------export命令--------------------- ...
- ES6 模块与 CommonJS 模块的差异
ES6 模块与 CommonJS 模块完全不同.它们有两个重大差异 CommonJS 输出是值的拷贝,即原来模块中的值改变不会影响已经加载的该值,ES6静态分析,动态引用,输出的是值的引用,值改变,引 ...
- commonjs模块和es6模块的区别?
commonjs模块和es6模块最主要的区别:commonjs模块是拷贝,es6模块是引用,但理解这些,先得理解对象复制的问题,在回过头来理解这两模块的区别. 一.基本数据类型的模块 ./a1.js ...
随机推荐
- Nginx+PM2+Node.js最简单的配置
一个最简单的反向代理配置方式 server { listen ; server_name www.luckybing.top; location / { proxy_pass http://127.0 ...
- 【Sql server: T-Sql 技术内幕 系列】之索引篇
本文系 T-Sql技术内幕系列读后感. 用过数据库的程序猿都知道,索引可以极大的优化sql语句的执行时间,但是您要问我,怎么减少的,我只能说:"抱歉,我也不太清楚." 带着这个疑惑 ...
- Implementation: Quick Sort 2014-08-19
#include <stdio.h> void print(int *a, int start , int end); void quick_sort(int *a, int start, ...
- jQuery:mouseover and Increase the Size of an Image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- iOS 在Host App 与 App Extension 之间发送通知
如何从你的一个App发送通知给另一个App? (例:搜狗输入法下载皮肤完成后使用皮肤) 注:搜狗输入法是App.而键盘是Extension 当你为你的App 添加 App Extension时,如果想 ...
- Android 自定义View之自绘控件
首先要提前声明一下,我对于自定义View的理解并不是很深,最近啃了几天guolin博主写的关于自定义View的博客,讲的非常棒,只不过涉及到源码和底层的一些东西,我自己就懵逼了,目前只是会了关于自定义 ...
- CSS3中的变形与动画(一)
CSS3变形篇 旋转rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中 ...
- Id_Name
<bean name="u" class="com.bjsxt.dao.impl.UserDAOImpl"></bean> <be ...
- 爬虫入门之Requests模块学习(四)
1 Requests模块解析 Requests 唯一的一个非转基因的 Python HTTP 库,人类可以安全享用 Requests 继承了urllib2的所有特性.Requests支持HTTP连接保 ...
- Perl实用中文处理步骤(修改版)
发信人: FenRagwort (泽), 信区: Perl标 题: Perl实用中文处理步骤(修改版)发信站: 水木社区 (Mon Feb 14 12:52:14 2011), 转信 (修改版 感谢 ...