我常用的JavaScript表示一个模块的方法

JavaScript中的模块

js中的模块,归根结底其实只有一个,那就是全局的根对象。浏览器环境的`window`,nodejs环境的`global`。我们看见的所有构造器,所有全局函数,所有的全局属性,其实都是这个全局根对象的方法或者属性而已。

所以,模块的实质就是一个对象而已。只不过这个对象可以是函数,可以是构造器,也可以仅仅是一个字符串。

如何表示

只要清楚模块的实质,那么它的表示方法就很多了。

最简单的模块可以像下面这些一样直接定义

var module = new Object();
var module = {};
var module = function(){};
var module = 1111;

上面这些简单的表示方法,并不能清楚的看出来模块的依赖有哪些,模块有没有私有属性等内容。

更友好的表示方法

模块友好的表示方法,可以清楚的看出模块的导出是什么,模块的依赖有哪些,哪些是模块的私有属性,哪些是模块的公用属性等。

下面介绍我常用的一个方法,使用闭包立即执行函数。

(function (win,_Ycc) {
    // 私有属性
    var privateA = 111;
    // 私有方法
    function privateB(){}

    win.myModule = {}; //全局的模块
    
    _Ycc.module = function(){}; // Ycc的子模块
    
})(window||global,Ycc);  // 模块的依赖window和Ycc

这样表示有很多好处:

1. 上面的闭包立即执行函数有两个实际参数window和Ycc,他们就是这个模块的依赖。而函数的形参win和_Ycc只是实际参数的别名而已,这样就可以在闭包的内部忽略实参的名称,只需要关注参数的属性和方法。

2 .函数的开头就是我们定义模块时需要用到的私有属性和方法,在闭包内定义的变量是不会影响到闭包外的,所以这样就避免了变量的全局污染,变量或方法名的命名就可以更随意了。

3. 一般情况下,一个模块或者一个包只会有一个全局模块(全局对象),其他模块都是全局模块的子模块。上面方法中也说明了,如果模块是全局模块,那么把子模块附加给win。如果模块是Ycc的子模块,附加给Ycc就可以了。

结语

如今的模块化已经是前端开发的一个共识了。在webpack,nodejs大行其道的当今,只要理解了模块的本质,这些东西都是很好上手的。而在其他编程语言中,比如Java、python、go等,模块的引入早就根深蒂固,这也是很多人觉得JavaScript语言相对简单的根因所在。



打赏作者

发表评论

电子邮件地址不会被公开。 必填项已用*标注