资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/es6学习笔记-module_v1.0_byKL

es6学习笔记-module_v1.0_byKL

VishKozus / 1769人阅读

摘要：学习模块不是对象，而是通过命令显式指定输出的代码，输入时也采用静态命令的形式。的模块自动采用严格模式命令用于规定模块的对外接口，命令用于输入其他模块提供的功能。该文件内部的所有变量，外部无法获取。

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...

参考引用:

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

es实战2015

GPU云服务器 云服务器 _byKL 学习笔记 学习笔记一 基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81868.html

相关文章

  • es6学习笔记-Symbol_v1.0_byKL

    摘要：它是语言的第七种数据类型前六种是布尔值字符串数值对象。为了防止冲突这就是引入的原因。指向了这个内部方法调用了返回对象的属性等于一个布尔值，表示该对象使用时，是否可以展开。数组的默认行为是可以展开返回对象的属性，指向当前对象的构造函数。 es6学习笔记-Symbol_v1.0 基本抄了一次内容,有很多只是知道其然并不知其所以然,不过也算是加深了一次印象,另外每段代码我都有手动执行过. E...

    Lowky 评论0 收藏0

  • es6学习笔记-顶层对象_v1.0_byKL

    摘要：学习笔记顶层对象虽然是笔记但是基本是抄了一次大师的文章了顶层对象顶层对象，在浏览器环境指的是对象，在指的是对象。之中，顶层对象的属性与全局变量是等价的。的写法模块的写法上面代码将顶层对象放入变量。参考引用顶层对象实战 es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象 顶层对象，在浏览器环境指的是window对象，在Node指的是gl...

    Meils 评论0 收藏0

  • es6学习笔记-let,const和块级作用域_v1.0_byKL

    摘要：考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。函数声明语句函数表达式循环循环还有一个特别之处，就是循环语句部分是一个父作用域，而循环体内部是一个单独的子作用域。声明一个只读的常量。 es6学习笔记-let,const和块级作用域_v1.0 块级作用域 javascript 原来是没有块级作用域的,只有全局作用域和函数作用域 例子1 因为没有块级作用域,所以每次的i都是一...

    Youngdze 评论0 收藏0

  • es6学习笔记-数值的扩展_V1.0_byKL

    摘要：学习笔记数值的扩展有一些不常用或者还不支持的就没有记录了总体来说本篇只是一个备忘而已用来检查一个数值是否为有限的。两个新方法只对数值有效，非数值一律返回。参考引用数值扩展 es6学习笔记-数值的扩展 有一些不常用或者还不支持的就没有记录了,总体来说本篇只是一个备忘而已 Number.isFinite(), Number.isNaN() Number.isFinite()用来检查一个数值...

    宋华 评论0 收藏0

  • es6学习笔记-箭头函数_v1.0_byKL

    摘要：因为箭头函数本身没有所以不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。箭头函数不可以使用对象，该对象在函数体内不存在。 es6学习笔记-箭头函数_v1.0 箭头函数使用方法 var f = v => v; //普通函数配合箭头函数写法,这里并且是传参的 //相当于 var f = function(v) { return v; }; /*-----------...

    lushan 评论0 收藏0

发表评论

登陆后可评论

0条评论

VishKozus

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<