小编典典

JavaScript模块模式示例[关闭]

javascript

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

因此,我想问一下是否有人有时间编写示例来解释模块如何协同工作。


阅读 234

收藏
2020-05-01

共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

目的是隐藏外界的可变可访问性。

希望这可以帮助。祝好运。

2020-05-01