CommonJS与ES6模块化的具体使用方式

JavaScript08

CommonJS与ES6模块化的具体使用方式,第1张

所以:只需要将需要暴露给外部的变量或者方法 设置为exports的属性 就行,

可以把exports看做一个全局对象,把所有暴露出来的函数和变量都存放在里面

1.先写个6.js文件

CommonJS规范规定,每个模块内部,module变量代表当前模板,这个变量是一个对象,他的 exports 属性(相当于 module.exports )是对外的接口。 这里详情请看我的另一篇文章: module、exports 和 require的关系

加载某个模块,其实是加载该模块的module.exports属性。require方法用于加载模块

ES6模块化的使用方法:(注!因为CommonJS类库众多,以及 CommonJS 和 ES6 之间的差异,所以无法直接兼容es6。)

直接/按需导出:可使用多个 用变量/常量的方式

导入:需要用按需导入 {解构} 的方式获取

默认导出:只能使用一个 (default属性只有es6才有)可以用引入对象定义多个属性,但这样在引入后调用的时候,更麻烦。

导入:优点:可以直接使用文件做接收参数且不用结构。

重命名export和import

如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,为了解决该问题,ES6为提供了重命名的方法,当你在导入名称时可以这样做:

如果想看CommonJS与ES6模块化的原理 可以去看我另一篇文章

[秦圆圆]大佬写的 require和import的区别

[大孩子气]大佬写的 require/exports、import/export 的区别

[七分sunshine!]大佬写的# 前端模块化工具 requireJs的使用

如今backbone、emberjs、spinejs、batmanjs

等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript扑面而

来。web前端已经演变成大前端,web前端的发展速度之快。

1)我们来看看什么是模块化?

模块化是一种将系统分离成独立功能部分的方法,可将系统分割成独立的功能部分,严格定义模块接口、模块间具有透明性。javascript中的模块在一些C、PHP、java中比较常见:

c中使用include 包含.h文件php中使用require_once包含.php文件

java使用import导入包

此中都有模块化的思想。

2)模块化的优缺点:

a>优点:

可维护性

1.灵活架构,焦点分离

2.方便模块间组合、分解

3.方便单个模块功能调试、升级

4.多人协作互不干扰

可测试性

1.可分单元测试

b>缺点:

性能损耗

1.系统分层,调用链会很长

2.模块间通信,模块间发送消息会很耗性能

3)最近的项目中也有用到模块化,

使用的是seajs,但是当引用到jquery,jquery easyui/或者jquery

UI组件时,有可能会用到很多jquery插件,那这样要是实现一个很复杂的交互时,模块间的依赖会很多,使用define()方法引入模块会很多,不知

有么有什么好的方法?

4)附:

内聚度

内聚度指模块内部实现,它是信息隐藏和局部化概念的自然扩展,它标志着一个模块内部各成分彼此结合的紧密程度。好处也很明显,当把相关的任务分组后去阅读就容易多了。 设计时应该尽可能的提高模块内聚度,从而获得较高的模块独立性。

耦合度

耦合度则是指模块之间的关联程度的度量。耦合度取决于模块之间接口的复杂性,进入或调用模块的位置等。与内聚度相反,在设计时应尽量追求松散耦合的系统。