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(模块)模式

  • 相关阅读:
    专家视角 | 小荷的 Oracle Database 18c 新特性快速一瞥
    java.lang.ClassCastException: com.xx.User cannot be cast to com.xx.User
    上传单个文件
    极速体验:Oracle 18c 下载和Scalable Sequence新特性
    开工大吉:Oracle 18c已经发布及新特性介绍
    CentOS7编译安装NodeJS
    .NET 同步与异步之锁(ReaderWriterLockSlim)(八)
    .NET 同步与异步之锁(ReaderWriterLockSlim)(八)
    .NET 同步与异步之锁(ReaderWriterLockSlim)(八)
    .NET 同步与异步之锁(ReaderWriterLockSlim)(八)
  • 原文地址:https://www.cnblogs.com/chucklu/p/11094576.html
Copyright © 2011-2022 走看看