Modular Design Patterns in JavaScript

Core points

• Member type understanding: Master the differences between public, private, privileged and protected members in JavaScript. They provide different levels of access and security for attributes and methods within the module respectively.
• Module Mode Variations: Learn about the nuances between basic module modes and revealing module modes, which provide a consistent internal coding style and flexible control of the disclosure.
• Using Privileged Members: Use privileged members to safely expose private variables through public methods, allowing controlled access while maintaining encapsulation.
• Protect member policy: Enable protection in JavaScript by temporarily exposing data within a controlled scope and then reverting to private data, thus sharing data between multiple modules without external access, without external access. member.
• Enhanced Technology: Explore methods such as apply() for binding additional modules into a single context, thereby achieving shared state and management while maintaining module independence and manageability. Behavior.

This article will explain the structure and advantages of the extension module design pattern, which includes four main member types:

• Public Member: Members accessible from anywhere.
• Private Member: Members that can only be accessed from within an object.
• Private Members: Members that can only be accessed directly from the object, but can be accessed indirectly from the outside through the public method . Protect members:
Members that can only be accessed from inside objects or from any of their modules.
• This article is not about object-oriented programming, because the structure we will create is a singleton pattern, which is a single instance structure that cannot be instantiated multiple times. In fact, it is not instantiated at all (from the perspective of owning a constructor), so it is an object-based pattern, not an object-oriented pattern.
For more information on the differences between object-based and object-oriented programming, and an introduction to object-oriented programming in JavaScript, I suggest you read Ryan Frishberg's article: JavaScript object-oriented programming.

Modular design pattern

Here will be used as the basic design pattern, which is a variant of the classic module pattern but with more control. Although quite a few articles have described these patterns, few really explain how they work, and few have such a complete feature set!

Basic module mode

Classic module pattern wraps all the code of the script in an anonymous function literal that is assigned to a single variable when returned. A function literal is just a function that calls itself, so the final assignment of a function literal is not a function, but any value returned by the function. To give a simple example, the function literal contains a calculation, so the value assigned to sum is the result of that calculation:

<code class="language-javascript">var sum = (function() { return 6 * 7; })();</code>

To illustrate the meaning of this syntax, the following is the same code, abstracted into a named function:

<code class="language-javascript">function calculate() { return 6 * 7; }
var sum = (calculate)();</code>

In this case we don't actually need to put brackets around calculate, but when using anonymous functions, we need to do so in order to evaluate it as a single expression without pre-assignment.

Public and private members

So, in function literals we can put any other code—such as variables, properties, and functions—and the different types of syntax used to define internal data determine the public members and The division between private members. Here is an example:

Since we return an attribute object, and the object is assigned to

<code class="language-javascript">var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  return {
    myPublicData : 42,
    myPublicFunction : function() {
      alert('public');
    }
  };
})();</code>

, these attributes can be accessed from outside the object, such as

and MyModule. But we simply cannot access MyModule.myPublicData or MyModule.myPublicFunction because variables can only be accessed within their original scope. The scope of a variable is to define its context, determined by the myPrivateData statement. In this example, the scope of private variables is myPrivateFunction objects, so they can only be accessed from within that object. var MyModule

Revealing module mode

Using module mode, we use two different syntaxes to create the difference between public and private members. Revealing the module pattern is a variant of this pattern that allows us to use the same syntax for all internal constructs, deferring only to the object literal notation at the end to return (or reveal) public members. Let's look at that object again, but this time using reveal module mode:

The division between public and private members is still the same, but this time it is not implemented by the original syntax used to define these members, but simply by the returned content. This makes revealing module pattern a useful variant, as it allows for the use of internally consistent coding styles. This also means you can change the name of the public member when you return, and even change which members will be public members at any time.

<code class="language-javascript">var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  var myPublicData = 42;
  function myPublicFunction() {
    alert('public');
  }
  return {
    myPublicData : myPublicData,
    myPublicFunction : myPublicFunction
  };
})();</code>

This pattern was innovated by Christian Heilmann, who explained this pattern and its underlying module pattern in his article: again using the module pattern – reveal something to the world.

(The following content will be output in segments due to the length of the article)

The above is the detailed content of Modular Design Patterns in JavaScript. For more information, please follow other related articles on the PHP Chinese website!