zoukankan      html  css  js  c++  java
  • Understanding the Module Pattern in JavaScript

    Understanding the Module Pattern in JavaScript

    Of all the design patterns you are likely to encounter in JavaScript, the module pattern is probably the most pervasive遍布的,充斥各处的. But it can also look a little strange to developers coming from other languages.

    Let's walk through an example to see how it works. Suppose that we have a library of utility functions that looks something like this:

    var batman = {
        identity: "Bruce Wayne",
    
        fightCrime: function () {
            console.log("Cleaning up Gotham.");
        },
    
        goCivilian: function () {
            console.log("Attend social events as " + this.identity);
        }
    };

    This version of batman is perfectly serviceable. It can fight crime when you call upon it. However, it has a serious weakness. This batman's identity property is publicly accessible.

    Any code in your application could potentially overwrite it and cause batman to malfunction. For example:

    // Some joker put this in your codebase
    batman.identity = "a raving lunatic";
    
    // Outputs: "Attend social events as a raving lunatic"
    batman.goCivilian();

    To avoid these sorts of situations we need a way to keep certain pieces of data private. Fortunately, JavaScript gives us just such a tool. We've even talked about it before: the immediately invoked function expression (IIFE).

    A standard IIFE looks like this:

    (function () {
        // Code goes here
    })();

    The advantage of the IIFE is that any vars declared inside it are inaccessible to the outside world. So how does that help us? The key is that an IIFE can have a return value just like any other function.

    var batman = (function () {
        var identity = "Bruce Wayne";
    
        return {
            fightCrime: function () {
                console.log("Cleaning up Gotham.");
            },
    
            goCivilian: function () {
                console.log("Attend social events as " + identity);
            }
        };
    })();
    // Outputs: undefined
    console.log(batman.identity);
    
    // Outputs: "Attend social events as Bruce Wayne"
    batman.goCivilian();

    As you can see, we were able to use the IFFE's return value to make batman's utility functions publicly accessible. And at the same time we were able to ensure that batman's identityremains a secret from any clowns who want to mess with it.

    You might be wondering when using the module pattern is a good idea. The answer is that it works well for situations like the one illustrated here. If you need to both enforce privacy for some of your data and provide a public interface, then the module pattern is probably a good fit.

    It is worth considering, though whether you really need to enforce data privacy, or whether using a naming convention to indicate private data is a better approach. The answer to that question will vary on a case by case basis. But now you're equipped to enforce data privacy if necessary.

    Thanks for reading!

    Josh Clanton

    扩展阅读

    Javascript中的Module(模块)模式

  • 相关阅读:
    C# winform 获取标题栏,状态栏,菜单栏的高度
    <转载>OleDb操作Access数据库:新增记录时获取自动编号的主键值
    《名利场》:微软 “ 失落的十年”
    Lisp的永恒之道(转)
    Google Earth KML数据格式转换成Shp数据格式(转)
    【转】ArcGIS投影转换与坐标转换
    利用Mono.Cecil动态修改程序集来破解商业组件(仅用于研究学习)
    C# mouseDoubleClick与DoubleClick的关系
    ACCESS通用操作数据类
    VS2010单元测试入门实践教程
  • 原文地址:https://www.cnblogs.com/chucklu/p/11094576.html
Copyright © 2011-2022 走看看