答案1

Question

我正在从此网址http://viralpatel.net/blogs/javascript-module-pattern/和

中读取javascript模块化模式

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文件中写入模块，那么我们首先需要加载哪个文件。加载那些与模块相关的文件的顺序是什么？

Answer 1

答案1

因为最后它会返回pub，因此您可以访问其所有方法

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

答案2

function($, pub)

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

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

(jQuery, CalcModule || {}));

N.B。

我们将jQuery作为第一个参数传递，而CalcModule仅作为第二个传递，否则为空对象（CalcModule OR {}）。第一次调用该函数时，CalcModule不存在，因此您最终会传递一个空对象，第二次CalcModule存在，因为它是由前一个调用创建的。这样做是为了使它与命令无关。

所以我们可以推断

First Call

$ === 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

取决于，但通常它无动于衷，因为您只是声明了您的模块的功能。您需要遵守订单的唯一情况是功能构造取决于模块的其他功能。

有关Javascript模块化模式的问题

问题1

问题2