es6学习笔记-module_v1.0_byKL
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
es6学习笔记-module_v1.0_byKL相关推荐
- es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
- es6学习笔记-顶层对象_v1.0_byKL
es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象 顶层对象,在浏览器环境指的是window对象,在Node指的是global对象. ES5之中,顶层 ...
- ES6学习笔记(五):轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- ES6学习笔记04:Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...
- ES6学习笔记03:变量的解构赋值
ES6学习笔记03:变量的解构赋值 如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值 其实,Python也 ...
- ES6学习笔记02:let 与 const
ES6学习笔记02:let 与 const 用var声明的变量会造成全局污染,于是就产生了新的声明方式. 1.let 用let声明变量,必须先声明后使用. 在for循环头里用let定义循环变量i,那么 ...
- ES6学习笔记01:Symbol数据类型
ES6学习笔记01:Symbol数据类型 1.Symbol定义 浏览demo01.html: 2.Symbol作对象属性名 Symbol函数可以接收一个字符串作为参数,表示对Symbol实例的描述,输 ...
- ES6学习笔记二arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
最新文章
- JS获取当月每天的日期,JS获取本周每天的日期
- JupyterLab 3.0发布!
- “非深度网络”12层打败50层,普林斯顿+英特尔:更深不一定更好
- ROW_NUMBER 函数
- java随机数转换_Java获取随机数的3种方法(转)
- 零售下一个十年:刀兵仍在,锋芒遮蔽
- linux2.6内核分析,linux2.6内核分析——LRU链表
- python cookie池_Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
- 算法笔记_面试_0.刷leetcode攻略
- 数模美赛分享(时间安排+获奖技巧+比赛思路)
- Axure RP 介绍
- 个人喜欢的sublime主题Boxy
- 前端案例:蓝色CSS3二级导航菜单
- 自媒体必看:这3个领域别做,起步慢、收益低
- 【元宇宙】元宇宙的概念距离我们有多远
- 路由器输入宽带账号密码上网
- 修理机器人基维斯_《魔兽世界》魔兽世界机器人攻略
- 获取微信公众号access_token(curl_打印不出来内容)
- 卡巴斯基KAV/KIS 6.0/7.0 授权许可文件永久免费更新方法
- aws lambda使用_使用AWS Lambda,无服务器框架和Go的按需WebSockets
热门文章
- java filehelper_Spring 发送邮件 使用File指定附件
- 复习笔记(五)——C++多态和虚函数
- c语言怎么编程极差,我是一个编程能力很差的计算机专业的孩子。。==
- JDK,JRE,JVM及设置PATH
- oracle 分布键,DWS使用技巧:根据ORACLE主键和唯一健批量修改DWS分布列字段的方法...
- native字体尺寸自适应 react_react-native中 屏幕以及字体 大小适配
- vr降噪器英文是什么_CR渲染器和VR渲染器在3d效果图上的区别
- 河南理工大学计算机学院地图,计算机科学与技术0812-河南理工大学计算机科学与技术学院.PDF...
- 定义一个类mymath_C++:模板类
- 《STL源码剖析》学习--STL体现的思想