This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

JS modular

Modular understanding

  • What is a module?
    • Encapsulate a complex program into several blocks (files) according to certain rules (specifications) and combine them together
    • The internal data/implementation of the block is private, exposing only interfaces (methods) to communicate with other external modules
  • The composition of a module
    • Data –> Internal attributes
    • The behavior of manipulating data –> internal functions
  • modular
    • Coding is done module by module, and the whole project is a modular project

Evolution of modularity

  • Global function mode:
    • Encoding: global variables/functions
    • Problem: Contaminate the global namespace, causing naming conflicts/data insecurity
  • The namespace mode:
    • Encoding: Encapsulating data/behavior into objects
    • Resolution: naming conflicts (reduced global variables)
    • Problem: Data is not secure (external data can be directly modified inside the module)
  • IIFE mode/enhancement
    • IIFE: call function expression immediately –> Anonymous function call itself
    • Encoding: Encapsulates data and behavior inside a function, exposing the interface by adding properties to the window
    • Importing dependencies: Importing dependent modules through function parameters 
      (function(window, module2){
  var data = 'atguigu.com'
  function foo() {
     module2.xxx()
     console.log('foo()'+data)
  }
  function bar() {
     console.log('bar()'+data)
  }
  
  window.module = {foo}
})(window, module2)
Copy the code
  • Modular specification
    • CommonJS
      • Node.js: server side
      • Browserify: Browser-side packaging tool also known as JS
      • Basic syntax:
        • Define the exposed module: exports 
          exports.xxx = value
module.exports = value
Copy the code

        Introduce the module: require

        Var module = require(' module name/module path ')Copy the code
      • When does the introduction of modules take place?
        • Node: Dynamic synchronization is introduced at runtime
        • Browserify: Compile/translate/package modules before they run (dependent modules are already included), run packaged JS, there is no need to import dependent modules remotely at runtime

AMD: browser side

* require.js * Basic syntax * Defines exposed modules: define([dependent module name], function(){return module object}) * Introduces modules: Require ([' module 1 ', 'module 2', 'module 3], the function (m1, m2) {/ / use the module object}) * configuration: ` ` ` require. Config ({/ / baseUrl basic path: Paths: {'module 1' : 'modules/ module 1', 'module 2' : 'modules/ module 2', 'Angular' : 'libs/angular', 'angular-messages' : 'libs/angular-messages'}, // non-AMD modules shim: {'angular' : {exports: 'angular' }, 'angular-messages' : { exports : 'angular-messages', deps : ['angular'] } } }) ```Copy the code

CMD: indicates the browser side

* Sea-.js * Basic syntax * Defines exposed modules: ``` define(function(require, module, Exports. XXX = value}) * seajs.use([' export1 ', 'export2 ']) {require exports. XXX = value})Copy the code

ES6

* ES6 has a modular implementation built in * Basic syntax * defines exposed modules: export * exposes one object: export default object * exposes multiple: Export var XXX = value1 export let yyy = value2 var XXX = value1 let yyy = value2 export {XXX, yyy} ' '* Import * default module: ' 'import XXX from' module path/module name ' '* other modules'' 'import {XXX, Yyy} from 'module path/module name' import * as module1 from 'module path/module name' 'problem: all browsers are not yet able to directly recognize ES6 modular syntax * * Use Babel to set ES6-- >ES5(using CommonJS) ---- browser can't branch directly yet * Use Browserify-- > package handling ---- browser can runCopy the code