JavaScript 模块模式与示例 [已关闭]

javascript module

2022-08-30 04:08:54

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

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

答案 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。

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

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

答案 2

我真的会推荐任何进入这个主题的人阅读Addy Osmani的免费书：

“学习 JavaScript 设计模式”。

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

当我开始编写更易于维护的JavaScript时，这本书给了我很大的帮助，我仍然使用它作为参考。看看他不同的模块模式实现，他很好地解释了它们。