Front-end modularity – Specification details

preface

1 Why is the front-end modular?

Ps: You can skip the first chapter if you have a good foundation

1.1 Primitive age without modularization

<script>
 if(true) {... }else{... }for(var i=0; i< 100; i++){
   ...
 }
 document.getElementById('button').onClick = function() {... } </script>Copy the code

1.2 Catastrophic problems caused by code explosion

// Suppose Pumbaa defines a variable name ='pengpeng'; // Then we define name ='dingman'; // Later, Pumbaa began to use the variables he definedif(name === 'pengpeng'){
  ...
}Copy the code

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>Copy the code

1.3 Early solutions

moduleA = function() {var a,b;return {
      add: function (c){
         return a + b + c;
      };
   }
}()Copy the code

app.tools.moduleA.add = function(c){
   return app.tools.moduleA.a + c;
}Copy the code

• Securely wrap a module’s code to avoid global contamination
• Uniquely identifies a module
• Gracefully expose the module API
• Easy to use modules

2 Server modularization

2.1 Relationship between Nodejs and CommonJS

• Nodejs modularity can be a mature attitude due to the influence of CommonJS specification
• On the server side, CommonJS can be written into the project code of various companies in a common manner, due to the excellent performance of Node
• Node is not fully implemented as a specification, but has made some trade-offs from the module specification and added a few features of its own

The above three points are taken from Simple Nodejs by Ling Park.

2.2 CommonJS Specification Introduction

var add = require('./add.js');
var config = require('config.js');
var http = require('http');Copy the code

module.exports.add = function() {... } module.exports =function () {
  return. }Copy the code

var add = require('./add.js');
module.exports.increment = function () {
  return add(val, 1);
}Copy the code

• It has to be a string
• Can be started with./.. / relative path at the beginning
• It could be an absolute path
• You can omit the suffix

2.3 Nodejs modular implementation

functionModule (id, parent) {this.id = id; this.exports = {}; this.parent = parent;if(parent && parent.children) {
    parent.children.push(this);
  }
  this.filename = null;
  this.loaded = false; this.children = []; Var module = new module (filename, parent);Copy the code

2.4 Node Module Classification

Figure 1 Module classification

• Path analysis
• File location
• Compile implementation

2.5 How does NodeJS require path analysis, file location and compilation execution?

// core module require('http') ---------------------------- // File module // to. The relative path at the beginning, (without the extension) require('./a.js') / /.. The relative path at the beginning, (without the extension) require('.. /b.js'// Absolute path starting with /, (can be without extension) require('/c.js'// External module name require('express'// external module require('codemirror/addon/merge/merge.js');Copy the code

• Node preferentially searches memory for matching core modules and does not continue the search if a match is found

• If the core module does not match, it is classified as a file module

//test.js
console.log(module.paths);Copy the code

node test.jsCopy the code

Figure 2 Module path

• Node_modules directory in the current path
• Node_modules directory in the parent directory
• Parent directory Node_modules directory in the parent directory
• Recurse up the path to the node_modules directory in the root directory

• Extension analysis

• Packet processing

• .js file – the fs module reads the file synchronously and compiles it for execution
• .node file — An extended file written in C/C++ that loads the files generated by the final compilation through the dlopen() method.
• Json — After reading the file synchronously through the FS module, parse the returned result with json.parse ().
• Other extension files. They’re all loaded as.js files.

(function(exports, require, module, __filename, __dirname){
  var express = require('express'); exports.method =function (params){
   ...
  };
});Copy the code

3. Front-end modularization

3.1 What is the difference between front-end and server modularity?

• The server loads a module and reads it directly from disk or memory, taking negligible time
• The browser needs to download this file from the server, so if you use CommonJS require to load the module, you need to wait for the code module to download and run before you get the required API.

3.2 Why does CommonJS not apply to front-end modules?

3.3 Asynchronous Module Definition (AMD) & RequireJS

// Separate module definition define({method1:function() {}
  method2: function() {}}); / / or define (function() {return {
    method1: function() {},
    method2: function() {},}});Copy the code

define(['math'.'graph'].function(math, graph){
  ...
});Copy the code

require(['a'.'b'].function(a, b){
  a.method();
  b.method();
})Copy the code

3.4 CommonJS and AMD comparison:

• CommonJS is generally used on the server side and AMD is generally used on the browser client side
• Both CommonJS and AMD are run time loaded

3.5 What is Run-time loading?

• Both CommonJS and AMD modules can only determine dependencies between modules at run time
• When require a module, the module is executed first and returns an object that is loaded as a whole

/ / CommonJS modulelet { basename, dirname, parse } = require('path'); / / equivalent to thelet _path = require('path');
let basename = _path.basename, dirname = _path.dirname, parse = _path.parse;Copy the code

//a.js
define(function(){
  console.log(A. 's execution');
  return {
    hello: function(){
      console.log('hello, a.js'); }}}); //b.js require(['a'].function(a){
  console.log('b.j s execution');
  a.hello();
  $('#b').click(function(){
    b.hello();
  });
});Copy the code

//a.js execute //b.js execute //hello, a.jsCopy the code

3.6 CMD(Common Module Definition) & SeaJS

define(['dep1'.'dep2'].function(dep1, dep2){
  return function() {}; })Copy the code

define(factory);Copy the code

define(function(require, exports, module){var a = require(exports, module)'./a'); // call the a.method() method of module A; })Copy the code

3.7 Universal Module Definition (UMD) Universal Module specifications

(function (global, factory) {
   typeof exports === 'object'&& typeof module ! = ='undefined' 
       ? module.exports = factory()          // Node , CommonJS
       : typeof define === 'function'&& define.amd ? define(factory) //AMD CMD : (global.CodeMirror = factory()); }(this, ()function() {... })Copy the code

3.8 ES6 module

export var name = 'pengpeng';Copy the code

export function foo(x, y){}Copy the code

// person.js
const name = 'dingman';
const age = '18';
const addr = 'The Forest of Calster';

export { firstName, lastName, year };Copy the code

const s = 1;
export {
  s as t,
  s as m, 
}Copy the code

import { name, age } from './person.js';Copy the code

import { name as personName } from './person.js';Copy the code

getName();

import { getName } from 'person_module';Copy the code

//person.js
export name = 'xixi';
exportage = 23; // load import {age, name} from one by one'./person.js'; // load import * as person from'./person.js';
console.log(person.name);
console.log(person.age);Copy the code

//person.js
export function getName() {... } //my_module import {getName} from'./person.js'; -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- comparison -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - / / person. Jsexport default function getName(){
 ...
}
//my_module
import getName from './person.js';Copy the code

/ / errorexport default var a = 1;Copy the code

//person.js
export name = 'dingman';
export default function getName(){
  ...
}

//my_module
import getName, { name } from './person.js';Copy the code

3.9 Difference between ES6 module and CommonJS module loading

//ES6 module import {basename, dirname, parse} from'path'; / / CommonJS modulelet { basename, dirname, parse } = require('path');Copy the code

• When requiring the path module, CommonJS will actually run the path module once and return an object that will be cached. This object contains all the APIS for the path module. Any subsequent loading of the module will take the cached value, which is the result of the first run, unless manually cleared.
• ES6 loads only three methods from the Path module and no others, which is called compile-time loading. ES6 can load modules at compile time. When ES6 encounters an import, it does not execute the module as CommonJS does. Instead, it generates a dynamic read-only reference that is evaluated in the module when it is really needed.

//person.js
var age = 18;
module.exports ={
  age: age,
  addAge: function () {
    age++;
  }
} 

//my_module
var person = require('./person.js'); console.log(person.age); person.addAge(); console.log(person.age); // The output is 18, 18Copy the code

//person.js
export let age = 18;
export function addAge(){
  age++;
}

//my_module
import { age, addAge } from './person.js'; console.log(age); addAge(); console.log(age); // The output is 18, 19Copy the code

conclusion

reference