模块化

1.什么是模块化

模块化是指把一个复杂的系统分解到一个一个的模块,再用一定的方式拼装起来。

2.模块化开发的优点

(1)一个单独的文件就是一个模块,是一个单独的作用域,只向外暴露特定的变量和函数。这样可以避免污染全局变量,减少变量命名冲突。

(2)代码复用,让我们更方便地进行代码管理、同时也便于后面代码的修改和维护。

3.js模块化规范

Js模块化规范有:CommonJS、AMD、CMD、以及本文要总结的ES6的模块系统。

其中,CommonJS是服务端的模块规范,AMD和CMD是浏览器端的模块规范。

CommonJS加载模块是“运行时加载”:CommonJS的模块就是对象,导入时,实际是整体加载模块的所有方法,生成一个对象,然后再从这个对象读取对应的方法。因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。

ES6加载模块是“编译时加载”。ES6模块不是对象,导入时只加载指定的方法,其他方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高,并使得静态分析成为可能。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。

关于模块化的更多内容,可以看下之前我总结的一览js模块化:从CommonJS到ES6

导出的语法

(1) 导出的基本语法、导出时重命名

export关键字,可以导出变量、函数、类给其他模块。

as关键字,可以指定变量、函数、类在模块外应该被称为什么名称。

// 导出变量–写法1

export let name = “Peter”;

// 导出变量–写法2:先定义,再导出

let name = “Peter”;

export { name }

// 导出变量–写法3:重命名

let name = “Peter”;

export { name as PersonName}

这里export时记得加花括号,不加则会报错。

// 导出函数–写法1

export function sum(a, b) {

return a + b;

}

// 导出函数–写法2:先定义、再导出

function sum(a, b) {

return a + b;

}

export { sum };

// 导出函数–写法3:重命名

function sum(a, b) {

return a + b;

}

export { sum as add };

(1)模块是自动运行在严格模式下、并且无法退出运行的js代码。

即ES6 的模块是自动采用严格模式,不管有没有在模块头部加上"use strict";

(2)在ES6的模块中,在模块顶层创建的变量只在模块的顶层作用域中存在,不会自动被添加到全局作用域中。

(3)在模块顶层,this的值是undefined,即不要在顶层代码使用this。

(4)模块不支持HTML风格的代码注释。

type=“module”

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

相关阅读更多精彩内容

友情链接更多精彩内容