JavaScript 模块模式与示例

Question

我找不到任何可访问的示例来说明两个(或更多)不同的模块如何连接在一起工作。

所以，我想问一下是否有人有时间编写一个示例来解释模块如何协同工作。

Answer 1

为了接近模块化设计模式，您需要先了解这些概念:

立即调用函数表达式 (IIFE):

(function() {
      // Your code goes here 
}());

您可以通过两种方式使用这些功能。 1. 函数声明 2. 函数表达式。

这里是使用函数表达式。

什么是命名空间？ 现在，如果我们将命名空间添加到上面的代码中，那么

var anoyn = (function() {
}());

什么是 JS 中的闭包？

这意味着如果我们在另一个函数中声明任何具有任何变量范围的函数(在 JS 中我们可以在另一个函数中声明一个函数!)，那么它将始终计算该函数范围。这意味着将始终读取外部函数中的任何变量。它不会读取同名的全局变量(如果有的话)。这也是使用模块化设计模式避免命名冲突的目的之一。

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

现在我们将应用我上面提到的这三个概念来定义我们的第一个模块化设计模式:

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

jsfiddle for the code above.

目标是向外界隐藏变量可访问性。

希望这会有所帮助。祝你好运。