深入理解ES6之模块

一:模块背景:

JS"共享一切"的代码加载方式是该语言混乱且容易出错的原因之一,这种方式导致了诸多问题,例如命名冲突,安全问题等。ES6模块化就是要解决作用域问题,让JS变的更有条理。
模块的特点
1:模块代码自动运行在严格模式下,并且没有任何办法退出严格模式。
2:在模块顶层作用域创建的变量,不会被自动添加到共享的全局作用域,他们只会在模块的顶层作用域内部存在。
3:模块的顶层作用域this值为undefined。
4:对于需要让模块外部访问的内容,模块必须导出他们。
5:允许模块从其他模块导入绑定。

二:模块使用:

1:模块导出

//导出变量
export var color = "red"
//导出函数
export function sum(num1,num2){
    return num1+num2;
}
//导出类
export class Rectangle{    
}

function multiply(num1,num2){
}
export {multiply};

注意
1:导出的函数声明与类声明必须要有名称。
2:不仅能导出声明还能导出引用。
2:模块导入

import {sum} from './example.js';//导入单个
import {sum,multiply,color} from './example.js';//导入多个
import * as example from './example.js';//全部导入

注意

import {sum} from './example.js';//导入单个
console.log(sum(1,2))   // 3
sum = 1;                         // 错误

1:当导入一个模块绑定时,不能再定义另一个同名变量,不能在对应的import前使用此标识符,更不能修改它的值。
2:export和import都有一个重要的限制,那就是他们必须用在其他语句或表达式的外部。不能任何方式动态使用,export和import关键字被设计为静态的,以便让文本编译工具之类的工具能判断哪些信息可用。
3:重命名导入与导出

//导出
function sum(num1,num2){
return num1+num2;
}
export {sum as add}

//引用
import {add} from './example';
//重命名引用
import {add as sum} from './example';

4:模块默认值

//导出默认值
export default function(num1,num2){
   return num1+num2;
}
export let color = "red"
//导入默认值
import sum,{sum} from './example'
//import语句中默认名称必须位于非默认名称之前

5:绑定的再导入

export {sum} from "./example.js"

6:无绑定的导入
有些模块也许没有进行任何导出,相反只是修改全局作用域的对象。尽管这种模块的顶级变量,函数或类最终并不会自动加入全局作用域,但这并不意味着该模块无法访问全局作用域。

//没有导出与导入模块
Array.prototype.pushAll = function(items){
 if(!Array.isArray(items)){//items必须是一个数组
      throw new TypeError("Argument must be an array.");
}
//使用内置的push()与扩展运算符
return this.push(...items)}

这是一个有效的模块,尽管没有任何导入与导出。

import "./example.js";
let colors = ["red","green","blue"];
let items = [];
items.pushAll(colors);
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 3,720评论 2 27
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,437评论 19 139
  • 以下内容是我在学习和研究ES6时,对ES6的特性、重点和注意事项的提取、精练和总结,可以做为ES6特性的字典;在本...
    科研者阅读 3,259评论 2 9
  • 好几天没有记录点东西了。说是没有时间是瞎说,其实就是沉不下心来,庆幸的是,当我开始想要打第一个字的时候,我就已经战...
    张小凡Carrie阅读 123评论 1 0
  • 1 酥角是广东潮汕地区一道特色小吃。不同的地方,酥角的大小也不一样,一般是圆形饺子皮对折包好的那么大,有个别地方做...
    四丫xmh阅读 2,526评论 9 5

友情链接更多精彩内容