时间戳

首页 > 解决方案 > javascript 设计模式 Revealing Module Pattern 它是如何工作的？

javascript - javascript 设计模式 Revealing Module Pattern 它是如何工作的？

问题描述

我目前正在学习 javascript 和设计模式，并且我阅读了这段我不理解的代码。为什么以及如何访问返回对象？我知道这是函数中的调用函数；我了解范围（我想我了解范围，但显然不是）..在这里我很困惑为什么我们可以访问返回对象内部的内容而不是其余的..为什么返回对象是公共的？

你能帮我解释一下吗，或者给我一个链接？

（英语不是我的母语，这是我在这里的第一个问题，如果我违反了规则，请道歉）

编码 ：

// we write the entire object logic as private members and
// expose an anonymous object which maps members we wish to reveal
// to their corresponding public members

var namesCollection = (function() {



 // private members
    var objects = [];

    function addObject(object) {
        objects.push(object);
    }

    function removeObject(object) {
        var index = objects.indexOf(object);
        if (index >= 0) {
            objects.splice(index, 1);
        }
    }

    function getObjects() {
        return JSON.parse(JSON.stringify(objects));
    }

    // public members
    return {
        addName: addObject,
        removeName: removeObject,
        getNames: getObjects
    };
})();

namesCollection.addName("Bob");
namesCollection.addName("Alice");
namesCollection.addName("Franck");
// prints ["Bob", "Alice", "Franck"]
console.log(namesCollection.getNames());
namesCollection.removeName("Alice");
// prints ["Bob", "Franck"]
console.log(namesCollection.getNames());

来源：https ://www.toptal.com/javascript/comprehensive-guide-javascript-design-patterns

标签： javascriptdesign-patternsrevealing-module-pattern

解决方案

我阅读了您提供的链接和更多链接。此模式用于使代码的可读性更容易。

在以下代码中，namesCollection 有一个列表、3 个函数和一个返回语句。

每当您调用 namesCollection() 时，都没有调用三个函数，并且未使用对象列表，但返回语句正在运行。

返回 { addName: addObject, removeName: removeObject, getNames: getObjects };

每个值都与一个函数相关联

第一行：

namesCollection.addName("Bob");

当您运行此行时，它将转到 return 语句并看到有一个对 addName 的引用。引用指向值为 bob 的 addObject()。addObject(object) 的语法也可以是 addObject(value)。在函数内部，它将“bob”值推送到对象列表中。对象现在作为元素 ['Bob']。

有趣的是 removeName 或 getNames 不会被调用，因为你只调用了 addName。

namesCollection.addName("Alice");
namesCollection.addName("弗兰克");

这两个遵循同样的事情。

现在对象是 ['Bob','Alice','Frankc']

console.log(namesCollection.getNames());

由于 return 语句中的 getNames 引用，该语句触发了 getObjects 函数。它正在返回对象的值，因此当您在 console.log() 中给出它时，它正在打印列表。

如果您将 console.log() 用于 addName() 或 removeName() 它不会打印任何内容，因为它没有打印任何内容。如果您想清楚地了解在函数中添加返回对象并查看自己的输出。

namesCollection.removeName("Alice");

仅触发值为 Alice 的 removeObject()。搜索列表名称“Alice”并将其从列表中删除。

console.log(namesCollection.getNames());

现在这个语句将给出 ['Bob','Frankc']

通过使用这种模式，您不需要知道函数的实际名称，硬核代码中的函数名称会让人难以理解，有时甚至没有任何意义。因此，使用这个简单的名称，例如 addName、removeName、getNames() 而不是 addObject、removeObject、getObjects，以提高可读性和理解性。

推荐阅读