ES6知识点整理之模块化的应用详解

本文实例讲述了ES6知识点整理之模块化的应用。分享给大家供大家参考，具体如下：

目前浏览器还不能完全支持模块化，需要引入很多编译环境，下面在nodejs中来模拟ES6中的模块化

nodejs中针对模块化演示的配置

  • 环境的安装：$ npm install --save babel-cli babel-preset-node6
  • 运行：$ ./node_modules/.bin/babel-node.js --presets node6 ./your_script.js
  • 添加.babelrc文件, 编辑如下
{
 "presets": [
    "node6"
 ]
}

添加了这个文件，无需在运行时添加–presets参数

导出变量的三种模式

test1模块：

// 写法1
export var a = "I am a";
// 写法2
var b = "I am b";
export {b};
// 写法3
var c = "I am c";
export {c as d} // 将c重名为d, 外部也同样需要 import d

index 模块：

import {a, b, d} from './test1';
console.log(a); // I am a
console.log(b); // I am b
console.log(d); // I am c

异步导出模块的测试

test2模块 ：

// 异步写法
var m = "I am m";
export {m};
setTimeout(()=>{
 m = "I am mm";
},1000);

index模块

import {m} from './test2';
console.log(m); // I am m
setTimeout(()=>{
 console.log(m); // I am mm
},1500);

多模块分别导出

test3 模块

var A = 1111,
 B = 2222,
 C = 3333;
var M = 'M';
export default M;
export {A as A1, B as B1, C as C1};

index 模块 ：

import M, {A1, B1, C1} from './multi';
console.log(A1); // 1111
console.log(B1); // 2222
console.log(C1); // 3333
console.log(M); // M

对象的导出

User 模块 ：

export class User{
 constructor(name){
  this.name = name;
 }
 get uname() {
  return this.name;
 }
 set uname(name) {
  this.name = name;
 }
}

index 模块 ：

import {User} from './User';
var user = new User('Joh');
console.log(user.uname); // Joh
user.uname = 'Lily';
console.log(user.uname); // Lily

导出函数模块

func 模块

export function Log(str) {
 console.log(str);
}

index 模块

Log("I am log"); // I am log

重命名默认模块

rename 模块：

export default "rename";

index 模块：

import {default as nr} from './rename';
console.log(nr); // rename

默认模块和其他模块一起导出的方式

combine 模块：

export var a = 1;
export default 111;

方式1：

index 模块：

import {default as com, a as comA} from './com';
console.log(com); // 111
console.log(comA); // 1

方式2：

index 模块：

import t, { a as comA} from './com';
console.log(t); // 111 备注这里t可以以任何名称命名
console.log(comA); // 1

其他注意事项

  • 定义export时必须在顶层定义，其他地方是不能定义的，如函数内部
  • default后面不能带var导出，如：export default var name = ‘Joh'; 这样是不对的
  • 不要import * 导出全部模块，这样非常不好，不利于优化
  • {} 导入的不是默认模块，默认模块不需要带{}
  • 通过default导出的不会再次被修改，如果default导出的是一个数字变量，即使在其他地方修改了，它也不会被修改，保持原值不变
  • http://es6.ruanyifeng.com/#docs/module 这里有其他一些注意事项的总结

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 详谈commonjs模块与es6模块的区别

    到目前为止,已经实习了3个月的时间了.最近在面试,在面试题里面有题目涉及到模块循环加载的知识.趁着这个机会,将commonjs模块与es6模块之间一些重要的的区别做个总结.语法上有什么区别就不具体说了,主要谈谈引用的区别. commonjs 对于基本数据类型,属于复制.即会被模块缓存.同时,在另一个模块可以对该模块输出的变量重新赋值. 对于复杂数据类型,属于浅拷贝.由于两个模块引用的对象指向同一个内存空间,因此对该模块的值做修改时会影响另一个模块. 当使用require命令加载某个模块时,就会运

  • ES6与CommonJS中的模块处理的区别

    ES6和CommonJS都有自己的一套处理模块化代码的措施,即JS文件之间的相互引用. 为了方便两种方式的测试,使用nodejs的环境进行测试 CommonJS的模块处理 使用require来引入其他模块的代码,使用module.exports来引出 // exportDemo.js count = 1; module.exports.count = count; module.exports.Hello = function() { var name; this.setName = funct

  • ES6新特性之模块Module用法详解

    本文实例讲述了ES6新特性之模块Module用法.分享给大家供大家参考,具体如下: 一.Module简介 ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能. 在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种.前者用

  • ES6模块化的import和export用法方法总结

    ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案. ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以

  • NodeJS模块与ES6模块系统语法及注意点详解

    社区模块规范: 1.CommonJS规范 规范实现者: NodeJS 服务端 Browserify 浏览器 2.AMD规范 全称 异步模块定义 规范实现者: RequireJS 浏览器 3.CMD规范 通用模块定义 规范实现者: seaJS 服务端和浏览器通用 官方模块规范 1.ESM规范 就是ES6 Module 各浏览器和服务端 目前常用的就是浏览器端的RequireJS.NodeJS.以及ESM CommonJS语法分析 module.export 关键 1.module.exports实

  • ES6使用export和import实现模块化的方法

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了几个链接: 现在ES6自带了模块化, 也是JS第一次支持module, 在很久以后 ,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块: 现代浏览器对模块(module)支持程度不同, 目前都是

  • ES6中module模块化开发实例浅析

    本文实例讲述了ES6中module模块化开发.分享给大家供大家参考,具体如下: 多人开发JavaScript时伴随着命名冲突等问题,先后有了模拟块级作用域.命名空间.模块化开发等方法. 之前,模块化开发一直是由第三方库来模拟的,比较知名的有AMD规范和CMD规范. 两个规范分别对应requirejs和seajs. 而现在,ES6提出了自己的模块化统一标准. 一个ES6的模块是一个包含了js代码的文件.ES6里没有所谓的module关键字,一个模块就是一个普通的脚本文件,除了以下两个区别: 1.

  • 如何让node运行es6模块文件及其原理详解

    最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制.而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目,所以,node 不能运行 es6 模块文件就会很不便. 让 node 运行 es6 模块文件的方式有两种: 转码 es6 模块为 commonjs 模块 hook node 的 require 机制,直接让 node 的 require 加载 import/expor

  • 详解CommonJS和ES6模块循环加载处理的区别

    CommonJS模块规范使用require语句导入模块,module.exports导出模块,输出的是值的拷贝,模块导入的也是输出值的拷贝,也就是说,一旦输出这个值,这个值在模块内部的变化是监听不到的. ES6模块的规范是使用import语句导入模块,export语句导出模块,输出的是对值的引用.ES6模块的运行机制和CommonJS不一样,遇到模块加载命令import时不去执行这个模块,只会生成一个动态的只读引用,等真的需要用到这个值时,再到模块中取值,也就是说原始值变了,那输入值也会发生变化

  • ES6新特性：使用export和import实现模块化详解

    ES6新特性：使用export和import实现模块化详解

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了几个链接: 现在ES6自带了模块化, 也是JS第一次支持module, 在很久以后 ,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块: 现代浏览器对模块(module)支持程度不同, 目前都是

  • ES6新特性之解构、参数、模块和记号用法示例

    本文实例讲述了ES6新特性之解构.参数.模块和记号用法.分享给大家供大家参考,具体如下: 一.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=arr[0]; var y=arr[1]; 使用这个语法,可以一次性给多个变量赋值.一个很好的附加用处是可以很简单的交换变量值: let x=1,y=2; [x,y]=[y,x];x=2 y=1 解构也可以用于对

随机推荐