关于 Javascript 模块化模式的问题

Issue regarding Javascript Modular pattern

我正在阅读 javascript 模块化模式 url http://viralpatel.net/blogs/javascript-module-pattern/ 和

http://www.codeproject.com/Articles/247241/Javascript-Module-Pattern

有时我的脑海里出现了混乱。所以在这里我把一些东西放在我感到困惑的地方。请帮助我理解所有。

问题 1

看下面的代码。所有在模块中声明的私有变量和函数都带有 var 关键字。这里的 pub 对象也用 var 关键字声明。 这意味着酒吧是私人的。因此，当 pub 是私有的时，人们如何从外部调用 pub 相关函数，如下面的代码

调用语法

CalcModule.add(2,10);
CalcModule.add(5,15);

CalcModule = (function(){
        var pub = {};
        var mem = new Array(); //private variable

        var storeInMemory = function(val) {  //private function
                            mem.push(val);
                    };

        pub.add = function(a, b) { 
                     var result = a + b;
                     storeInMemory(result); //call to private function
                     return result;
                  };

         pub.sub = function(a, b) {
                     var result = a - b;
                     storeInMemory(result); //call to private function
                     return result;
                  };

         pub.retrieveFromMemory = function() {
                     return mem.pop();
                 };

               return pub;
})();

CalcModule.add(2,10);
CalcModule.add(5,15);
console.log(CalcModule.retrieveFromMemory()); //outputs 20
console.log(CalcModule.retrieveFromMemory()); //outputs 12

问题 2

跨不同 JS 文件的分离模块：扩充

file1.js

var CalcModule = (function($, pub){
                        //jQuery will still be available via $
                        var mem = new Array(); //private variable

                        pub.storeInMemory = function(val){
                                                mem.push(val);
                                            };

                        pub.retrieveFromMemory = function(){
                                     return mem.pop();
                       };

                       return pub;
})(jQuery, CalcModule || {});

file2.js

var CalcModule = (function($, pub){
                       //jQuery will still be available via $
                       pub.add = function(a,b){ 
                                     var result = a + b;
                                     pub.storeInMemory(result);
                                     return result;
                                  };

                       pub.sub = function(a,b){
                                     var result = a - b;
                                     pub.storeInMemory(result);
                                     return result;
                                  };

                       return pub;
}(jQuery, CalcModule || {}));

请参阅此 function($, pub) 语法。为什么那里有美元符号以及为什么酒吧需要通过那里。

问题 3

增强模块和子模块有什么区别？

问题 4

扩展现有模块模块

var Module1 = ( function (oldModule) {
    var 
    //assigning oldmodule in to a local variable.
    parent = oldModule;

    //overriding the existing privileged method.
    parent.privilegedMethod = function ( ){
         //do something different by overriding the old method.
    };

    //private method accessing privileged method of parent module.
    var privateMethod2 = function ( ) {
        parent.privilegedMethod();//can access privileged method of Module
        parent.publicMethod1(); //can access public method of Module
    }
    return {
        newMethod : function ( ) {
          ///do something for this brand new module.
          ///use some functionality of parent module.
          /// parent.privilegedMethod( );
        }
    };
} )(Module);//

模块对象是我要扩展的现有模块。

怎么会有人看懂上面的代码扩展模块。仅通过此语法 (Module) ?

问题 5

如果我们在 5 个单独的 js 文件中编写模块，那么我们需要先加载哪个文件。加载那些与模块相关的文件的顺序是什么？

答案 1

因为最后它会返回 pub 所以你可以访问它的所有方法

CalcModule = (function(){ return pub; }());
CalcModules === pub

答案 2

function($, pub)

这是代码末尾调用的匿名函数的声明

这里我们有有效的调用传递jQuery和你的模块

(jQuery, CalcModule || {}));

N.B.

我们将 jQuery 作为第一个参数传递，将 CalcModule 作为第二个参数传递，否则为空对象（CalcModule 或 {}）。 第一次调用该函数时 CalcModule 不存在，因此您最终将传递一个空对象，第二次调用 CalcModule 存在，因为它已由上一次调用创建。 这样做是为了使其不可知。

所以我们可以推导出

第一次通话

$ === jQuery
pub === {}

第二次和下一次通话

$ === jQuery
pub === CalcModule

您必须将 CalcModule 传递给该函数，以便对其进行扩展。

这个

(function($, pub){...}(jQuery, CalcModule || {}));

正好等于这个

var anonFunc = function($, pub){...};
anonfunc(jQuery, CalcModule || {});

答案 3

扩充：您正在向同一个模块添加功能

pub.add = function(a,b){}
pub.sub = function(a,b){}

子模块：您正在将一个模块添加到另一个模块

subModule.add = function(a,b){}
subModule.sub = function(a,b){}
pub.subModule = function(a,b){ return mySubModule; }

回答 4

你通过了 Module 但它正在创建一个全新的模块，可以使用你已经通过的 Module，这更像是一种继承而不是扩展

回答 5

视情况而定，但通常它无关紧要，因为您只是在声明模块的功能。 唯一需要遵守顺序的情况是功能构造依赖于模块的另一个功能。