(function (global, factory) {
  typeof exports= = ='object' && typeof module! = ='undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.Vue = factory()); } (this.function () {
      //do something
  }));

Copy the code

The module pattern

Closures and IIFE (Immediately-Invoked Function Expression) module pattern uses a feature of JavaScript called Closures. Some popular JS libraries today often see the following form of code:

(function (argument) {// module code // return something; }) (parameters);Copy the code

The code above defines an anonymous Function and calls itself Immediately. This is called the self-invoked Anonymous Function (SIAF) or, more accurately, called the Immediately-invoked Function Expression (IIFE — read “iffy”).

In closures, you can define private variables and functions that cannot be accessed externally, thus hiding and isolating private members. By returning an object or function, or passing in an object as a parameter and manipulating the object inside the function, we can expose the exposed methods and data that we want to expose.

This, in fact, is the essence of the modular pattern.

Parameter input JavaScript has a feature called implied Globals. When a variable name is used, the JavaScript interpreter reversely traverses the scope chain to find the declaration of the variable, and if none is found, assumes that the variable is global. This feature allows us to reference global variables anywhere in a closure

For module independence and encapsulation, references to other objects should be introduced as arguments. If you need to use other global objects within your module, you should refer to them explicitly as parameters rather than directly by their names within your module. In the case of jQuery, it is possible to make an error if you reference $directly in the module without entering a jQuery object in the argument. The correct way would be something like this:

; (function (q, w) {// q is jQuery // w is window //)(jQuery, window);Copy the code

As opposed to implicit global variables, reference objects are used as arguments to distinguish them from other local variables within the function. As an added bonus, we can give those global objects an alias

Module Export

Sometimes we don’t just use global variables. We also declare and output objects in a module. This can be done by returning statements from anonymous functions, which form a complete module pattern.

var MODULE = (function () { var my = {}, privateVariable = 1; function privateMethod() { // ... } my.moduleProperty = 1; my.moduleMethod = function () { // ... }; return my; } ());Copy the code

This code declares a variable MODULE with two accessible properties: moduleProperty and moduleMethod. The rest of the code is wrapped in a closure and remains private. The reference takes the parameter input mentioned earlier, and we can also reference other global variables through the parameter.

Many times we return an object as the output of a module, as in the example above.

In addition, it is common to use Object Literal Notation to express JavaScript objects. Var x = {p1:1, p2: “2”, f: function(){/… /}}

Many times we see modular code like this:

var Module1 = (function () {
  var private_variable = 1;
  function private_method() { / *... * / }

  var my = {
    property1: 1.property2: private_variable,
    method1: private_method,
    method2: function () {
        // ...}};returnmy; } ());Copy the code

In addition, for simple modular code, it is also possible to express a module directly using object direct quantities without involving private members, etc. :

var Widget1 = {
  name: "who am i?".settings: {
    x: 0.y: 0
  },
  call_me: function () {
    // ...}};Copy the code

But this is just a simple form, and you can think of it as a basic simple representation of the module pattern, and the closure form as an encapsulation of it.

Output functions Sometimes we want to return not an object, but a function. There are two requirements that require us to return a function. One is when we need it to be a function, such as jQuery, which is a function rather than a simple object. The other case is that we need a “class” instead of a direct quantity, which we can then instantiate with “new”.

var Cat = (function () {
  // Private member and code...

  return function(name) {
    this.name = name;
    this.bark = function() { / *... * / }
  };
}());

var tomcat = new Cat("Tom");
tomcat.bark();

Copy the code

Why not just define a function instead of putting it inside a closure? In the simpler case, we don’t really need the IIFE form, but in the more complex case, when we need to define some private functions or “classes,” we need to use the IIFE form.

In addition, in ECMAScript 5, the object.create () method is introduced. You can then treat an Object as a “class” and instantiate it with object.create () instead of using “new”.

The object.create () object.create () method creates a new Object, using an existing Object to provide the __proto__ of the newly created Object.

const person = {
  isHuman: false.printIntroduction: function() {
    console.log(`My name is The ${this.name}. Am I human? The ${this.isHuman}`); }};const me = Object.create(person);

me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

Copy the code