## JS Modular
Modular appreciated *
* What is a module?
* Will be a complex process based on certain rules (specification) packaged into several blocks (files), and combined with
internal data block * / private implementation is only to external exposure some interfaces (methods) to communicate with the other modules external
* a module composed
* data ---> internal attributes
* operation data behavior ---> internal function
* modular
* coding is a coding according to a block the entire project is a modular project
Modular evolution *
* Global function modes:
* encoding: global variables / functions
Problem: Pollution global namespace naming conflict prone / data is insecure
* namespace mode:
* encoding: a data / object behavior encapsulated
* Solution: naming conflicts (reducing global variable)
* question: unsafe data (external data can be modified directly inside the module)
* IIFE mode / enhanced
* IIFE: immediately call a function expression ---> call from an anonymous function
* Code: the behavior data and encapsulated into an internal function, by adding an attribute to the interface window is exposed outwardly
* rely introduced: module dependent parameter introduced functional form
`` `
(function (window, Module2) {
var data = 'atguigu.com '
function foo () {
module2.xxx ()
the console.log (' foo () '+ Data)
}
function bar () {
the console.log (' bar () '+ Data)
}
window.module = {foo}
})(window, module2)
```
* Modular Specification
The CommonJS *
* Node.js: server
* Browserify: also referred to as a browser js packaging tools
* Basic syntax:
* defined exposure module: Exports
`` `
exports.xxx value =
module.exports value =
` ``
intake module : the require
`` `
var module = the require ( 'module / module relative path')
` ``
* introduction module happened at what time?
* the Node: run-time, dynamic synchronous pull-
* Browserify: the module is compiled before running / translational processing / packed (contained in the module dependency has come),
running the generated packed js, remote from the need to rely on the introduction of the runtime module is not present
* AMD: browser
* require.js
* basic syntax
* defined exposure module: define ([dependency module name], function () {return Object Module})
* introduction module: require ([ 'Module 1', '2 module ',' module 3 '], function (m1, m2) {// Object usage module})
* configuration:
`` `
require.config ({
// base path
the baseUrl:' JS / '
// path name identifies mapping
Paths: {
'module 1': 'modules / module 1',
'module 2': 'modules / module 2',
'Angular': 'libs / Angular',
'Angular-messages':' libs / angular- messages'
},
// non AMD module
shim:{
'angular' : {
exports : 'angular'
},
'angular-messages' : {
exports : 'angular-messages',
deps : ['angular']
}
}
})
```
* CMD: browser
* sea.js
* basic syntax
* defined exposure module:
`` `
DEFINE (function (require, Module1, Exports) {
by dependent modules require introducing
to expose module Module1 / Exports
exports.xxx = value
} )
`
* usage module seajs.use ([ 'module 1', 'module 2'])
For ES6 *
* built modular implementation for ES6
* basic syntax
* defined exposure module: Export
* exposing an object:
`` `
Export default objects
`
* plurality of exposure:
`
Export var = XXX VALUE1
Export the let yyy = value2
var XXX = VALUE1
the let yyy = value2
Export {XXX, yyy}
`` `
* introduced using modules: Import
* default module:
`
Import XXX from 'module path / module name'
`
* other modules
`
import {xxx, yyy} from 'path module / module name'
import * as module1 from 'module path / module-name'
`` `
* Question: All browsers can not directly identify ES6 modular grammar
* Solution:
* Use Babel will ES6 ---> ES5 (used CommonJS) - - browser is not directly Branch
* use Browserify ---> packing process ---- browsers can run