ES6中模块模块化开发实例浅析 - 行业资讯 - 肥雀云

本文实例讲述了ES6中模块模块化开发。分享给大家供大家参考,具体如下:

多人开发JavaScript时伴随着命名冲突等问题,先后有了模拟块级作用域,命名空间,模块化开发等方法。

之前,模块化开发一直是由第三方库来模拟的,比较知名的有AMD规范和CMD规范。

两个规范分别对应requirejs和seajs。

而现在,ES6提出了自己的模块化统一标准。

一个ES6的模块是一个包含了js代码的文件,除了以下两个区别:

1。ES6中的模块自动开启严格模式。
　　2. 进口和出口模块中可以使用。

<>强导入和导出

我们可以通过进口和出口关键字将函数或<强> 。
　　先来说说出口,在模块中声明的任何东西都是默认私有的,<强> 强。最简单的方法就是添加一个出口关键字:

　　　　//kittydar.js 　　导出功能detectCats(画布,选项){ 　　var kittydar=new kittydar(选项); 　　返回kittydar.detectCats(画布); 　　} 　　出口类Kittydar { 　　…几种方法做图像处理… 　　}//这个helper函数不是出口。　　函数resizeCanvas () { 　　… 　　} 　　… 　　　　之前　　　　

不再有跨文件或跨模块的全局变量,。而在另外一个文件中,我们可以导入这个模块并且使用detectCat方法:

　　　　//演示。js - Kittydar演示程序　　从“进口{detectCats} kittydar.js”; 　　函数去(){ 　　画布var=. getelementbyid (“catpix”); 　　猫var=detectCats(画布); 　　drawRectangles(帆布、猫); 　　} 　　　　之前　　　　

如果需要导入多个模块中的接口,如下:

　　　　　　从“kittydar.js”进口{detectCats, Kittydar}; 　　　　之前　　　　

我们也可以通过一行代码将本模块所有需要公开的方法公开:

　　　　　　出口{detectCats, Kittydar}; 　　　　之前　　　　

这样就不用一个个地添加出口关键字了。

<>强命名冲突

上面介绍了模块中的导入和导出,那么如果导入的变量名和模块中的变量名冲突了应该如何是好呢?放心,:

　　　　　　从“eggs.js”进口{翻转为flipOmelet}; 　　从“real-estate.js”进口{翻转为flipHouse}; 　　　　之前　　　　

这样就将从卵模块来的,从房地产模块来的<强> 强,从而避免了冲突。

同样的,我们也可以在模块导出变量名时进行重命名:

　　　　　　函数v1 () {…} 　　函数v2 () {…} 　　{出口　　v1 streamV1, 　　v2 streamV2, 　　v2, streamLatestVersion 　　}；　　　　之前　　　　

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