es6模块化导入导出
模块化指的就是将一个大程序拆分成若干个互相依赖的小文件,然后在用简单的方法拼装起来。
在 ES6 之前,JS没有模块化系统,社区制定了一些模块加载方案
最主要的有 CommonJS(Asynchronous module definition) 和 AMD(common module definition) 两种。前者用于服务器,后者用于浏览器
/*
CommonJS(node遵循该规范)
->require.js 引入
->module.exports 导出 AMD
比如 -> require.js
CMD
比如 -> sea.js
*/
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量
(CommonJS 模块就是对象,输入时必须查找对象属性)
ES6 模块不是对象,而是通过export
命令显式指定输出的代码,再通过import
命令输入
//import {fn} from './xx.js'; 引入模块
//export function fn(){} 导出模块
模块可以理解为函数代码块的功能,是封装对象的属性和方法的javascript代码,它可以是某单个文件,变量或者函数
在Es6模块中,无论有没有加"use strict",都会自动采用严格模式
Es6中模块导入的基本语法
如果想从一个文件(模块)访问另一个文件(模块)的功能,则需要通过import关键字在另一个模块中引入数据
import {标识符1,标识符2} from "本地模块路径"
导入单个绑定:
// 只导入一个
import {sum} from "./example.js"
导入多个绑定:
// 导入多个
import {sum,multiply,time} from "./exportExample.js"
导入整个模块:
用星号(*
)指定一个对象,所有输出值都加载在这个对象上面
// 导入一整个模块
import * as example from "./exportExample.js"
如果想为输入的变量重新取一个名字,import
命令要使用as
关键字,将输入的变量重命名
import { lastName as surname } from './profile.js';
Es6中模块导出的基本语法
模块的导出,export关键字用于暴露数据,暴露给其他模块
可以将export放在任何变量,函数或类声明的前面,从而将他们从模块导出
// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
在export命令后面,使用大括号指定所要输出的一组变量
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958; export {firstName, lastName, year};
两种方式是等价的,第二种方式。应该优先考虑使用第二种这种写法(在尾部,一眼看清楚输出了哪些变量)
//导出函数
export function sum(num1,num2){
return num1+num2;
}
//导出类
export class People{
constructor(name,age){
this.name = name;
this.age = age;
}
info(){
return `${this.name}${this.age}`
}
}
通常情况下,export
输出的变量就是本来的名字,但是可以使用as
关键字重命名
function v1() { ... }
function v2() { ... } export {
v1 as streamV1,
v2 as streamV2,
};
export default命令
export default命令用于指定模块的默认输出,一个模块只能有一个默认输出
/*第一组*/
export default function crc32() { // 输出
// ...
} import crc32 from 'crc32'; // 输入 /*第二组*/
export function crc32() { // 输出
// ...
}; import {crc32} from 'crc32'; // 输入
第一组使用export default时,对应的import语句不需要使用大括号
第二组是不使用export default时,对应的import语句需要使用大括号
因此export default命令只能使用一次。所以,import命令后面不用加大括号,因为只可能唯一对应export default命令
export default也可以用来输出类
// MyClass.js
export default class { ... } // main.js
import MyClass from 'MyClass';
let o = new MyClass();
export 与 import 的复合写法
如果在一个模块之中,先输入后输出同一个模块,import
语句可以与export
语句写在一起
export { foo, bar } from 'my_module'; // 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
es6模块化导入导出的更多相关文章
- ES6之模块化导入导出
1.概述 在js的历史上一直没有模块(module)体系,无法将一个大程序拆分成相互依赖的小文件,再用简单的方法拼装起来,这对开发大型的.复杂的项目形成了巨大障碍. 在 ES6 之前,社区制定了一些模 ...
- ES5与ES6常用语法教程之 ①函数写法、创建对象、导入导出模块方式
函数写法区别 计算a, b两个数字之和,有返回值 es5 写法 function add(a, b) { return a + b; } es6 写法(箭头函数) let add = (a, b) = ...
- ES6 模块导入import 导出export 和module.export
ES6中新增了模块的导入和导出功能 在实际过程中可以使用 import 和 export 对模块进行导入和导出操作,具体如下 1. 名字导入/导出 (导入名字必须与导出的一致,导入时需要用花括号) ...
- ES6详解八:模块(Module)!--各种导入导出方法
[-] 基本用法 命名导出named exports 默认导出 命名导出结合默认导出 仅支持静态导入导出 各种导入和导出方式总结 modules是ES6引入的最重要一个特性. 所以以后再写模块,直 ...
- ES6模块化
关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...
- CommonJS、AMD、CMD和ES6模块化区别
本文参考自:https://www.cnblogs.com/chenguangliang/p/5856701.html 1.CommonJS NodeJS是CommonJS规范的实现,webpack ...
- 07 . 前端工程化(ES6模块化和webpack打包)
模块化规范 传统开发模式主要问题 /* 1. 命名冲突 2. 文件依赖 */ 通过模块化解决上述问题 /* 模块化就是把单独的一个功能封装在一个模块(文件)中,模块之间相互隔离, 但是可以通过特定的接 ...
- 用NPOI实现导入导出csv、xls、xlsx数据功能
用NPOI实现导入导出csv.xls.xlsx数据功能 直接上代码 首先定义一个接口 如果需要直接操作文件的话,就自己在封装一次 然后定义csv类的具体实现 这个需要引入命名空间LumenWo ...
- commonJS 和 ES6 模块化的不同
commonjs 导出 module.exports={ add:function(){ console.log('add测试') } } 导入 var add=require('./add.js') ...
随机推荐
- 【宝塔linux】 导入mysql 大文件失败的问题
导入数据库有四种方法 1.宝塔网站自带的数据库导入 2.phpmyadmin导入 3.远程到linux服务器用导入命令 使用xshell进入到控制台 1.首先建空数据库 mysql>create ...
- MT【312】特征根法求数列通项
(2016清华自招领军计划37题改编) 设数列$\{a_n\}$满足$a_1=5,a_2=13,a_{n+2}=\dfrac{a^2_{n+1}+6^n}{a_n}$则下面不正确的是( )A ...
- LGP2801 教主的魔法
题目链接 : P2801 教主的魔法 这是第一次A分块的题 就是模板题了 每个块内排序 每个整块仅需维护整块的修改量 询问操作: 对于边缘块 直接暴力找在[l, r]内 且比给定值大的有几个 对于整块 ...
- 【转】STM32: 一种计算CPU使用率的方法及其实现原理
1 前言出于性能方面的考虑,有的时候,我们希望知道CPU的使用率为多少,进而判断此CPU的负载情况和对于当前运行环境是否足够“胜任”.本文将介绍一种计算CPU占有率的方法以及其实现原理. 2 移植 ...
- Nginx代理MysqlCluster集群
-------Nginx代理MysqlCluster 公司有一个公网ip,有公网ip(222.222.222.222)那台服务器上装的nginx,mysql装在公司另外一台服务器上假设ip为192.1 ...
- Haproxy Nginx cluster构建
-----client---------haproxy-------nginx1---------nginx2------192.168.1.250 192.168.1.1 192.168.1.10 ...
- [ZJOI2007]仓库建设(斜率优化)
L公司有N个工厂,由高到底分布在一座山上. 工厂1在山顶,工厂N在山脚. 由于这座山处于高原内陆地区(干燥少雨),L公司一般把产品直接堆放在露天,以节省费用. 突然有一天,L公司的总裁L先生接到气象部 ...
- [NOI2010]超级钢琴(RMQ+堆)
小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙度为Ai,其中Ai可正可负 ...
- Docker部署Jenkins测试环境
安装docker环境 yum install epel-release -y && yum install docker -y 如果是高手需要docker-compose的话就再装个d ...
- WIndows下将文件夹映射为磁盘
subst 盘符 文件夹路径 [/d] 映射 将e:\work映射为z:盘,使用subst z: e:\work 取消映射 取消z盘映射,使用subst z: /d 参考资料:http://mp.we ...