ES6的介绍以及模块导出与导入
# ES6
> 1.介绍
>
> ECMAScript(简称ES)的几个重要版本
>
> ES5 : 2009年发布
>
> ES6 2015年发布 ES2015 在ES5基础上拓展了很多新特性
>
> ES7 2016年发布 ES2016 (变化不大)
>
> 1.指数 3**3=27
>
> 2.数组的原型方法includes()用来判断一个数组是否包含一个指定的值,
>
> var arr=[1,2,3,4,] console.log(arr.includes(2))
>
> ECMAScript 6.0(以下简称 ES6)是 JavaScript语言的下一代标准,在2015年6月正式发布的。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言
> 2.babel
```javascript
1.安装转码工具
cnpm install -g babel-cli
cnpm install --save -dev babel-cli babel-preset-latest
2.安装转换规则
cnpm install -g babel-preset-latest
3.指定转换规则 新建.babelrc
{
"presets":["latest"]
}
cnpm install --save-dev babel-cli babel-preset-latest
babel工具在项目中是在开发阶段使用的工具
jquery工具在项目中是在产品阶段使用的工具
4.也可以将ES6转换为ES5之后的文件输入到另一个文件当中
babel 2-hello.js --out-file 2-helloo.js
5.将整个src目录下的es6文件转换成es5文件到dist目录
babel src --out-dir dist
6.babel-polyfill垫片 可以将es6的功能转换为es5代码实现
cnpm install --save-dev babel-polyfill
```
> 3.模块化
>
> 模块化机制(commonjs与es6)
>
> 包管理机制 (npm、cnpm、yarn)
```javascript
ES6模块化代码 import
NodeJS内有自己的模块化机制,实现CommonJS模块化规范 require('babel-polyfill')
```
```javascript
a.js b.js b.js要使用a.js中的变量
1.html文档引入 a.js b.js --
2.模块化的导入与导出,模块之间就可以通信了
a.js将name导出
b.js里将name导入
```
```javascript
CommonJs模块化规范(服务器端)
AMD模块化规范(客户端的--浏览器)
ES6模块化规范
导入模块 import 'babel-polyfill'
导出模块
export {firstName,lastName};//列表导出
export {firstName as first,lastName as last};//重命名导出
export var a=3;导出单个属性;
export functions(){}//导出单个属性
默认导出
一个模块只能有一个默认导出,不能使用 var、let 或 const 用于导出默认值 export default。
export default{}
export default function foo(){}
错误写法
var a=1;
export a; 没有提供对外的接口 export{a}
```
```javascript
1-module1.js
let fristName = 'ren'
let lastName = 'terry';
export { fristName, lastName }
console.log('这是module1模块')
2-module2.js
import './1-module1'
import { fristName, lastName } from './1-module1'
// es6 静态加载 编译时加载
console.log('module2打印', fristName, lastName)
先转码 再运行
babel src --out-dir dist
node dist/module/2-module2.js
ES6导出的是一个接口,接口存放的是一个变量
```
> 4.CommonJS模块化
>
> CommonJS 模块就是对象,输入时必须查找对象属性。
>
> 模块化对象
>
> Node内部提供一个Module构建函数。所有模块都是Module的实例。每个模块内部,都有一个module对象,代表当前模块。它有以下属性。module.id 模块的识别符,通常是带有绝对路径的模块文件名。
> module.filename 模块的文件名,带有绝对路径。
> module.loaded 返回一个布尔值,表示模块是否已经完成加载。
> module.parent 返回一个对象,表示调用该模块的模块。
> module.children 返回一个数组,表示该模块要用到的其他模块。
> module.exports 表示模块对外输出的值。
```javascript
//nodejs模块导出 commonJS规范
let firstname = 'ren';
let lastname = 'terry';
// module.exports.firstname = firstname;
module.exports = {
firstname: firstname,
lastname: lastname
};
console.log(exports === module.exports);
```
```javascript
// Nodejs模块导入
let { firstname, lastname } = require('./module3');
console.log(firstname, lastname);
console.log(module.id);
console.log(module.filename);
console.log(module.loaded);
console.log(module.parent);
console.log(module.children);
```
```javascript
ES6模块与CommonJS模块的差异:
1、CommonJS 模块输出的是一个值的拷贝/复制,ES6 模块输出的是值的引用。
2、CommonJS 模块是运行时加载,ES6 模块是编译时输出接口.
```
```javascript
1.CommonJS模块化规范 值的拷贝
1.1导出模块
let firstname='ren';
let lastname='terry';
setTimeout(()=>{
firstname:'zhao'
},2000)
module.exports={
firstname,
lastname
};
1.2导入模块
let {firstname,lastname}=require('./module1.js');
console.log(firstname,lastname);
setTimeout(()=>{
console.log(firstname,lastname);//ren terry
},4000)
```
```javascript
2.ES6模块 值得引用
2.1导出模块
let firstname='ren';
let lastname='terry';
setTimeout(()=>{
firstname='zhao'
},2000)
export {
firstname,
lastname
};
2.2导入模块
import {firstname,lastname} from './module3.js';
console.log(firstname,lastname);
setTimeout(()=>{
console.log(firstname,lastname);//zhao terry
},4000)
```
ES6的介绍以及模块导出与导入相关推荐
- VMware如何导出和导入OVF文件
开源虚拟化格式(OVF文件)是一种开源的文件规范,是一种开源.安全.有效.可拓展的便携式虚拟打包格式,由ovf文件.mf文件.cert文件.vmdk文件和iso文件等组成,可以用于虚拟机在不同虚拟化平 ...
- 【收藏】GeoMesa整体架构模块介绍、创建Schema并导入数据
geomesa-accumulo:基于 Apache Accumulo的DataStore 实现 geomesa-archetypes: Maven构建模板 geomesa-arrow: 基于 Apa ...
- nodejs导出导入_NodeJS导出和导入模块
nodejs导出导入 In my previous posts, we have discussed about "How to install Enide Studio 2014 IDE& ...
- oracle 的导入导出,Oracle 导入导出详细介绍
数据库version 导入导出工具 ( from )导出数据库 ( to )导入数据库 Expdp/Impdp 11.2.0.2.0 10.2.0.3.0 From 11g(11.2.0.2.0) t ...
- ES6详细介绍及使用
ES6详细介绍及使用 一. ES6概念及发展史 1.ES6概念 以前学习JavaScript的时候,对ES5是有了解过的,但是在学习Vue的时候,就会发现有很多新的写法是ES6中的,真是让人捉急.所以 ...
- python哪里下载import包-【Python实战】模块和包导入详解(import)
1.模块(module) 1.1 模块定义 通常模块为一个.py文件,其他可作为module的文件类型还有".pyo".".pyc".".pyd&qu ...
- JS module的导出和导入
最近看了些Vue框架写的程序,发现自己的前端知识还停留在几年以前,发现现在Javascript程序里有各种各样的对module的导入和到处,导入乍一看跟python的语法挺像的无非就是把from和im ...
- 【ES6(2015)】Module模块
文章目录 1. 模块化的发展 2. export 3. as 4. export default 5. import 1. 模块化的发展 随着前端的发展,web技术日趋成熟,js功能越来越多,代码量也 ...
- JS module的导出和导入 1
最近看了些Vue框架写的程序,发现自己的前端知识还停留在几年以前,发现现在Javascript程序里有各种各样的对module的导入和到处,导入乍一看跟python的语法挺像的无非就是把from和im ...
最新文章
- python代码示例图形-Python画高斯分布图形实例代码
- gradient杂谈
- rocketmq集群安装部署过程(4.0.0版本)、安装中的常见问题举例
- java 调用cpp_java jni 调用cpp文件中的方法 | 学步园
- 大分区表高并发性能提升100倍?阿里云 RDS PostgreSQL 12 解读
- 令人难以置信的竞争性编程-您无需学习
- WordPress WP cleanfix插件‘eval()’函数跨站请求伪造漏洞
- 在Linux上配置xampp后远程访问域名报错
- 13. Blade 模板引擎
- 加载八叉树索引文件_mysql innodb索引原理
- SCI等英文文献免费下载方法总结
- vscode中的中文乱码问题
- 【时间序列】时序分析之移动平均-python实战
- 计算机作业实验报告dw感想,Dreamweaver实验报告.doc
- AI矢量绘图_Illustrator 2022矢量图形编辑制作
- Kinect使用系列
- OSChina 周二乱弹 —— 我的手机指纹解锁和别人不一样
- Could not enlist in transaction on entering meta-aware object
- 论文翻译(5)-Contextual Inter-modal Attention for Multi-modal Sentiment Analysis
- IT男需要学习文哲史