es6进修笔记-module_v1.0_byKL

2019年8月31日 158次阅读 来源: 线上猛如虎

es6 进修-module_v1.0

  • ES6模块不是对象，而是经由过程export敕令显式指定输出的代码，输入时也采纳静态敕令的情势。

  • ES6的模块自动采纳严厉形式

  • export敕令用于划定模块的对外接口，import敕令用于输入其他模块供应的功用。

关于export

//直接导出
export var year = 1958; //导出变量
export function multiply(x, y) { //导出函数
  return x * y;
};

//导出一组变量(属性,要领)
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

//导出而且重定名
function v1() { ... }
function v2() { ... }

//纵然重定名了,本来的也可以用,相当于加了别号
export {
  v1 as streamV1, //重定名了
  v2 as streamV2,
  v2 as streamLatestVersion //重定名两次
};

//夹杂导出,既定义了默许的,也定义了不默许的
export default class Client{
}
export const foo = 'bar';
    //运用的时刻可以离别导入
import Client,{foo} from 'module';

//暴露一个模块的一切接口
export * from 'module';

//连锁导出
    //a.js,导出一个函数
export function foo(){}    
    //b.js,b模块导出一切内容,而这些内容来自a模块
export * from 'a';
    //app.js,那末在运用的时刻
import { foo } from 'b';

//暴露一个模块的部份接口
export { test } from 'module';

//暴露一个模块的默许接口
export { default } from 'module';

  • 一个模块就是一个自力的文件。该文件内部的一切变量，外部没法猎取。假如你愿望外部可以读取模块内部的某个变量，就必须运用 export 关键字输出该变量。

  • export敕令可以出现在模块的任何位置，只需处于模块顶层就可以。假如处于块级作用域内，就会报错

  • 一个模块只能有一个默许输出，因而export default敕令只能运用一次

  • export * 敕令会疏忽模块的default要领

关于import

//直接导入,而且输入到差别的变量内里,这些变量名须要跟导入源一致
import {firstName, lastName, year} from './profile';
  //导入以后就可以直接运用了
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

//直接导入,不过没有写途径
import {myMethod} from 'util';

//直接导入并重定名,重要是为了轻易
import { lastName as surname } from './profile';

//不引入接口,仅运转模块代码
import 'XXXmodule'

//由于default是关键字,导入的时刻不能直接运用,须要改一下名字,用as改
import { default as xxx } from 'modules';
    //相当于,xxx是一个新的名字,可以替代导入模块
import xxx from 'module'

//以lodash模块举例,他的default是_,非default有一个each接口,可以同时导入
import _, { each } from 'lodash';

  • import敕令具有提拔效果，会提拔到悉数模块的头部

  • import背面的from指定模块文件的位置，可所以相对途径，也可所以绝对途径，.js途径可以省略。假如只是模块名，不带有途径，那末必须有配置文件，通知 JavaScript 引擎该模块的位置。

  • import是静态实行,也是编译前实行的,所以不能运用表达式和变量，这些只要在运转时才获得效果的语法结构。

  • 屡次实行同一个import的话,只会实行一次

  • import 不能导入*,要用as更名

复合写法

假如在一个模块当中，先输入后输出同一个模块，import语句可以与export语句写在一同。

export { es6 as default } from './someModule';
// 等同于
import { es6 } from './someModule';
export default es6;

模块继续

// circleplus.js
    //* 导出circle的一切,然则会疏忽default
export * from 'circle';
export var e = 2.71828182846; //自定义了一个e变量导出
export default function(x) { //自定义了一个default导出,由于 * 疏忽了default,假如须要导出的话,须要本身补一个
  return Math.exp(x);
}

// main.js
    //导入了circleplus模块的一切,不过* 一样会疏忽了default
import * as math from 'circleplus'; //将circleplus悉数导入并更名为math
import exp from 'circleplus'; //导入了circleplus的default
//exp就是导入的默许default 函数
console.log(exp(math.e)); //math就是circleplus,所以可以挪用变量e

跨模块常量

const声明的常量只在当前代码块有用。假如想设置跨模块的常量（即跨多个文件），或者说一个值要被多个模块同享，可以采纳下面的写法。

// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;

// test1.js 模块
import * as constants from './constants'; //经由过程导入模块来同享
console.log(constants.A); // 1
console.log(constants.B); // 3

// test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3

假如要运用的常量异常多，可以建一个特地的constants目次，将种种常量写在差别的文件内里，保存在该目次下。

// constants/db.js
export const db = {
  url: 'http://my.couchdbserver.local:5984',
  admin_username: 'admin',
  admin_password: 'admin password'
};

// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
然后，将这些文件输出的常量，合并在index.js内里。

// constants/index.js
export {db} from './db'; //运用一个中转模块(文件)来网络这些常量模块
export {users} from './users';
运用的时刻，直接加载index.js就可以了。

// script.js
import {db, users} from './constants';

须要注重的是,纯真es6语法并不能很简单的测试,须要运用babel-node如许的支撑完整的es6语法的剖析器才剖析,概况可以参考一下:(http://es6.ruanyifeng.com/#do…

参考援用:

  1. ranyifeng的es6入门 我是买了实体书然后再看电子版的

  2. es实战2015

    原文作者：线上猛如虎
    原文地址: https://segmentfault.com/a/1190000008548319
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞