Modular notes

modular

overall situation function Pattern

1. It can encapsulate different functions into different global functions
2. But easy to pollute

namespace Pattern

1. Simple object encapsulation

2. let obj = {
   	message :'module2'
   	foo(){
   		console.log('foo()',this.message)
   	}
   }
   

3. But it is still easy to modify

IIFE Pattern

1. Wrapping with a closure function , And immediately execute the function

2. (function(window){
         
   let message ='moudle'
   function foo(){
         
   	console.log('foo()',message)
   }
       window.moudle = {
         foo}
       // Bound to a global object 
   })(window)
   

3. Call directly moule.foo() Just use it

IIFE Mode enhancement

How to enhance ： Introduce dependencies

This is the cornerstone of modern modular implementation

(function(window,$){
let message ='moudle'
function foo(){
	console.log('foo()',message)
}
    window.moudle = {foo}
    // Bound to a global object 
    $('body').css('background','red')
})(window,jquery)

load script

1. One page needs to introduce multiple js file
2. problem
   1. Too many requests
   2. Rely on ambiguity
   3. Difficult to maintain
3. These problems can be solved by modern modular programming and project construction
   1. commonjs

commonjs

1. standard
   1. explain
      1. website .....
      2. Each file can be treated as a module
      3. On the server side ： Modules are loaded synchronously at runtime （ Will wait for , It's equivalent to blocking
      4. On the browser side ： Modules need to be compiled and packaged in advance
   2. Basic grammar
      1. Exposure module
         1. exports.xxx = value( Any data type )
         2. moudle.exports = value
         3. What is the exposed module ？
         4. All are exports object
         5. Original time {} Empty objects
         6. The first time to exports Add attributes , The second one is for the module exports Object Assignment
      2. Introduce modules
         1. require（xxx）
         2. Third-party module ：xxx For the module name （ Namely npm The package name ）
         3. Custom module ：xxx Is the module file pathname
2. Realization
   1. Server side implementation
      1. node.js
      2. http://nodejs.cn/
   2. Browser side implementation
      1. Browserify（ Magic Hat （ Amazing
      2. http://browserify.org/
      3. Also known as commonjs Browser side packaging tool
   3. difference Node and Browserify

//package.json
{
    
	// There must be two properties 
	'name':'commonjs_node',
    // Not in Chinese , Don't use capital letters 
    'version':'1.0.0'
}
// Use the terminal to generate ：npm init
// You can write an alternative later 

commonjs-Node

stay node Operation in environment

1. Download third-party modules npm install uniq（–save Is the default property

2. moudle1.exports = {
         
   	msg:'moudle1'
   	foo(){
         
   		console.log(this.msg)
   	}
   }
   

3. moudle2.exports = function(){
   console.log(moudle)
   }
   

4. exports.foo = function(){
         
   	consloe.log('foo() moudles3')
   }
   
   exports.bar = function(){
         
   	consloe.log('bar() moudles3')
   }
   
   // Continue to expose 
   exports.arr=[1,2,2,3,3]
   

5. // Introduce third-party modules , On top of the custom library ( Default )
   let uniq = require('uniq')
   
   // Introduce other modules into 
   let moudle1 = require('./moudle1')
   let moudle2 = require('./moudle2')
   let moudle3 = require('./moudle3')
   
   moudle1.foo();
   moudle2()//moudle2 It's equivalent to a function 
   moudle3.foo()
   moudle3.bar()
   
   let result = uniq(moudle3.arr)
   console.log(result)
   //uniq According to the first digit of the array, the code of waking up 
   

commonjs-Browserify

stay index.html Operation in environment

dist/build( Meaning of construction ) The directory to package the generated files

1. download browserify

    overall situation npm install browserify -g
    Local npm install browserify --save -dev
   // Run dependency and development dependency 
   

   Development depends on -dev (devdependencies)

   Operational dependency --save( Production environment )(dependencies)

2. moudle1.exports = {
         
   	msg:'moudle1'
   	foo(){
         
   	console.log(this.msg)
   	}
   }
   

3. moudle2.exports = function(){
         
   console.log(moudle)
   }
   

4. exports.foo = function(){
         
   	consloe.log('foo() moudles3')
   }
   
   exports.bar = function(){
         
   	consloe.log('bar() moudles3')
   }
   

5. let moudle1 = require('./moudle1')
   let moudle2 = require('./moudle2')
   let moudle3 = require('./moudle3')
   
   moudle1.foo();
   moudle2()//moudle2 It's equivalent to a function 
   moudle3.foo()
   moudle3.bar()
   

6. // stay index.html Lower introduction , However, the source files should be packaged ( use browserify
   

7. 

   -o Output means output

   On the left is the source file

   On the right is the output file ,bundle It means packing , In fact, it doesn't matter what to do with file names , But it's better to

AMD

namely requirejs The basic use method

Introduction of module package ( Too many files created , Can't write )

( Show declared dependency injection

CMD

Omit

ES6

Worst fire , So the point is