简明 ES6 模块

Posted yejingping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简明 ES6 模块相关的知识,希望对你有一定的参考价值。

简明 ES6 模块

1.什么是模块

模块就是一段代码,这段代码可以反复使用,经常单独写成一个文件,一旦加载会立即执行。

2.导出

导出有 2 种方式:命名导出和默认导出,分别用关键字exportexport 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.注意事项

  • 直接使用模块语法在浏览器中可能无效,需要 babel 等工具转为可接受的语法
  • 导出的 2 种方式 export 和 export default 在一个文件中最好用一种,尽量少混用
  • 在 ES6 模块中,default 是一个关键字,不要使用 default 作为 as 的重命名名称
  • import 后,import 的模块将会被提升,放置于当前代码的最前端。因此,何处导入模块并不重要。
  • import 应该是单独的一条语句,不能在其他语句中运行该语句。以下 example.js 中的操作将导致错误。
  • 导入的只是当初模块的只读视图,这意味着操作的模块中的变量都存储在模块的内部
-----example.js------
if(xxx){
import example from "mock"
}

6.实例

【实例 1】链接信息

-----mock.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】工具类
【。。。待填坑】

【实例 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 模块的主要内容,如果未能解决你的问题,请参考以下文章

javascript 用ES6编写简明的声明函数

简明python教程 --C++程序员的视角:模块

Markdown简明教程

Markdown简明教程

简明Python 模块的 __name__

30秒就能看懂的JavaScript 代码片段