改变一切的 Javascript 模式（对我来说......）

前言

大家好，Dev.to 的各位好朋友！欢迎阅读我的第一篇 Dev.to 帖子！
我加入这个社区已经有一段时间了，终于决定贡献一份力量，分享我对这个我热衷的话题的看法。

我仍在学习如何使用即将推出的模式，因此如果您发现任何错误，请随时在下面纠正我。

这篇文章将讨论什么内容？

简短目录：

1) 什么是 IIFE？
2) 改变一切的 JS 模式……
2.1) 优点
2.2) 缺点
3) 示例
4) 结束语

让我们开始吧！

1. IIFE

在我们开始解释任何类型的 javascript 设计模式之前，我认为值得提一下 IIFE。

IIFE 是什么？

IIFE 是立即调用函数表达式或自执行匿名函数的缩写。
简单来说，它是一个在文件执行时立即调用的代码块。
它看起来像这样：


(function() {

})();

用不那么简单的术语来说，这是一种将您的函数封装在一个范围内的方法，使其远离全局范围，这在 JavaScript 世界中可能是一个棘手的地方。

它主要由两部分组成：

第一部分是一个包含在分组运算符()内的匿名函数，它限制了对函数内数据的访问，并且如我们之前所说，使其远离全局范围。
第二部分创建立即执行的函数表达式(); JavaScript 引擎将通过该表达式直接解释该函数。

如果您对此感到好奇并想了解更多，因为我想在这里强调 javascript 模式，您可以阅读更多内容：https://developer.mozilla.org/en-US/docs/Glossary/IIFE ?source=post_page---------------------------

2. 改变一切的 JavaScript 模式

至少对我来说，改变一切的模式是：鼓声

揭示模块模式

例子：


var module = (function() {

    function _setName() {
       console.log("My name is : Slim Shady");
    }

    return {
       init: _setName
    };

})();

module.init();

您可能会看到一些熟悉的东西，如果您猜测是 IIFE，那么您完全正确。

与许多其他 JavaScript 模式一样，揭示模块模式利用 IIFE 从全局范围隐藏代码的功能，并提高一致性和可重用性。

您在 IIFE 范围内声明的所有属性本质上都是私有的，并且您可以决定在代码的返回段中向外部公开什么。

现在让我们分解一下上面的例子。

1) 我们已经通过模块名称声明了一个对象，并且在其中保存了对 IIFE 函数所持有的内容的引用。


var module = (function() {

})();

2) 下一步是创建名为_setName()的私有函数，在本例中，该函数输出一个通用结果。
我更喜欢用下划线来命名私有属性，这样可以帮助我区分它们，也更容易调试。


var module = (function() {

    function _setName() {
       console.log("My name is : Slim Shady");
    }

})();

3）我们示例的关键部分以返回语句的形式出现，其中我们将私有属性的功能显示为公共属性。

由于在这个例子中我们只有一个私有属性，所以我们应该只有一个公共属性，尽管示例可能会根据功能的复杂性而有所不同。


var module = (function() {

    function _setName() {
       console.log("My name is : Slim Shady");
    }

    return {
       init: _setName
    }

})();

最后一步是通过我们的模块对象调用我们需要的任何东西。

通过调用我们的模块对象，我们可以访问返回范围内作为公共返回的所有内容。

因此，如果我们输入module.init() ，我们将在控制台中看到来自_setName()函数的控制台日志。
这是因为我们的init属性存储了_setName函数可能持有的任何值。


var module = (function() {

    function _setName() {
       console.log("My name is : Slim Shady");
    }

    return {
       init: _setName
    }

})();

module.init();

// Console log
// My name is : Slim Shady

要了解超出这个简单示例的更多信息，请查看下面的链接，以深入分析揭示模块模式。

优势

这种模式的一大优势在于它使得脚本的语法更加一致。此外，它还能在模块末尾更清晰地标明哪些函数和变量可以公开访问，从而提高代码的可读性。

缺点

这种模式的一个令人不安的缺点是，如果一个私有函数引用了一个公共函数，那么在需要补丁时，该公共函数就无法被覆盖。这是因为私有函数将继续引用私有实现，而且该模式不适用于公共成员，只适用于函数。

因此，在使用此模式时应小心，因为使用揭示模块模式创建的模块可能比使用原始模块模式创建的模块更脆弱。

3.示例

这里列举了一些模块展示模式的使用示例，
有些是我自己在项目中直接使用MRT的，有些是自己临时拼凑的。

希望您发现它们有用！

示例 #1 - 页脚组件

这段代码显示了一个模块显示模式，其中包含了页脚的结构，并且基本上创建了一个组件，您可以在整个网站中重复使用该组件，从而节省几行 HTML 代码。


var footer = (function() {

    var _footerDesign = function() {

        var html = '';
        html += '<div class="footer-content text-center">';
        html += '<small><b>Copyright &copy; Kristijan Fištrek</b></small>';
        html += '</div>';

        return html;
    }

    var render = function() {
        var footerContainer = document.querySelector('footer');
        footerContainer.innerHTML = _footerDesign();
    }

    return {
        init: render
    }

})();

footer.init();

示例 #2 - 数据存储

此示例描述了一种定义特定数据集并使其结构保持私有的方法。
它唯一公开的部分是返回的对象。


var blogsContainer = (function() {

    var blogs = [
        {
            id: 1,
            name: 'Welcome to my first blog!',
            description: 'Allow me to introduce myself & the content you can expect from me in my blogs. Primarily I will focus on delivering tech driven content, mostly about web development, but I have few ideas about project organization, agile methodology & much more!',
            imgURL: 'assets/img/blogs/1.Welcome/1.Welcome-header.jpg',
            destination: 'pages/blogs/welcome-blog.html'
        }
    ]

    var initialize = function() {
        var contentOfBlogs = blogs;
        return contentOfBlogs;
    }

    return {
        data: initialize
    }
})();

示例 #3 - Addy Osmani 示例


var myRevealingModule = (function () {

        var privateCounter = 0;

        function privateFunction() {
            privateCounter++;
        }

        function publicFunction() {
            publicIncrement();
        }

        function publicIncrement() {
            privateFunction();
        }

        function publicGetCount(){
          return privateCounter;
        }

        // Reveal public pointers to
        // private functions and properties

       return {
            start: publicFunction,
            increment: publicIncrement,
            count: publicGetCount
        };

    })();

myRevealingModule.start();

4. 结束语

很抱歉这篇帖子很长，我真的很想涵盖所有我认为重要的内容。
由于这是我第一次在 Dev.to 上写东西，尽管我非常用心，但内容中还是存在一些错误。

揭示模块模式是一种强大的工具，应该明智地使用，它并不适用于所有场合，但它可能在许多其他场合证明自己是有用的。

你觉得这节课怎么样？
你觉得我讲得够多了吗？
你还想让我讲些什么？

下面我们就来聊聊吧。

大家欢呼，编码愉快。

文章来源：https://dev.to/kristijanfistrek/javascript-pattern-that-changed-everything-for-me-4cfa