1. Implement early modularity ideas based on closures

  • Singleton Design Pattern (modular concept)
  • AMD => require.js
  • CMD => sea.js
  • CommonJS => Node itself is implemented based on this specification
  • ES6 Module
- No object, describes the basic information, needs to create the same information repeatedly - before there is no object type value, it is easy to cause global variable pollutionlet name = 'paul';
let age = 22;
let money = false;

let name = 'anthney';
let age = 25;
let money = true;
Copy the code

2. Conflict resolution

2.1 Use of closure protection mechanisms

  • Disadvantages: do not expose the global can not access each other, too much exposure is easy to conflict
- Each is a heap memory, independent (function() {
  let name = 'paul';
  let age = 22;
  let money = false;
  const skill = function() {}
  const skill2 = function() {}
  
  // Expose the global
  window.skill2 = skill2; }) (); (function() {
  let name = 'anthney';
  let age = 25;
  let money = true;
  skill();  // A private error is reported on skill
  window.skill2();  / / can
  skill2(); / / can}) ();Copy the code

2.2 Using Objects to resolve conflicts

  • The object acts as a grouping here
  • New name: person1/person2 namespace, where attributes describing the same thing are stored in the same namespace, to reduce global variable pollution
  • Each Object is an instance of the Object class, and Person1 / Person2 are two completely different instances, so this approach can be calledThe singleton pattern, single instance
  • New XXX => constructor schema
let person1 = {
  let name = 'paul';
  let age = 22;
  let money = false;
  const skill = function() {}}let person2 = {
    let name = 'anthney';
  let age = 25;
  let money = true;
  person1.skill();  / / can
}
Copy the code

3. Singleton mode

  • High-level singleton design pattern: One of the earliest modular development ideas in JS is independence and interoperability between modules

    • Divide a complex or large product into modules according to its functional features
    • Each module is independent and the information between each other is not interfering with each other
    • For some common methods that need to be used by other modules, we can implement mutual calls

  • a baidu demo

    • Global variables interfere with each other
/* leader -> public method */

let isWindoow = true;
    num = 0;
// Get elements quickly, anonymous function named
const queryElement = function queryElement(selector) {}const formatTime = function formatTime(time) {}/* coderA -> search function */
let num = 10;
const checkValue = function checkValue() {}
const submit = function submit() {}


/*
  coderB -> 换肤功能
*/
let num = 0;
const submit = function submit() {}

Copy the code

  • With closed package up, to achieve independence

/* leader -> public method */

(function() {
  let isWindoow = true;
      num = 0;
  const queryElement = function queryElement(selector) {}
  const formatTime = function formatTime(time) {}
})();

/* coderA -> search function */
(function() {
  let num = 10;
  const checkValue = function checkValue() {}
  const submit = function submit() {}
})();


/*
  coderB -> 换肤功能
*/
(function() {
  let num = 0;
  const submit = function submit() {}
})();
Copy the code
  • Each other cannot be called to achieve interoperability
    • Each module is a closure that stores its own private variables and methods
/* leader -> public method */

let utils = (function() {
  let isWindoow = true;
      num = 0;
  const queryElement = function queryElement(selector) {}
  const formatTime = function formatTime(time) {}
  // Store methods that need to be called outside in a namespace (object)
  return {
    queryElement,
    formatTime
  }
})();

/* coderA -> search function */
let searchModal = (function() {
  let num = 10;
  const checkValue = function checkValue() {
    / / access
    utils.formatTime();
  }
  const submit = function submit() {}
  
  return{ checkValue }; }) ();/*
  coderB -> 换肤功能
*/
let skinMoadl = (function() {
  let num = 0;
  const submit = function submit() {
    searchModal.checkValue();
  }
  return{}; }) ();Copy the code