JavaScript modularization

In understanding AMD,CMD Before the norm , Let's first briefly understand what modularity is , Modular development .

Modularity refers to solving a complex problem or a series of hybrid problems , According to a classification thinking, the problem is systematically decomposed and dealt with . Modularization is a way to deal with complex system decomposition into code structure , A more maintainable way to manage modules . Imagine a huge system code , When it is divided into logical modules by integrated optimization , What kind of existence is for software . For the software industry : Decouple the complexity of software systems , So that no matter how big the system is , You can also manage , Development , Maintenance becomes more and more important “ There is a reason to follow ”.

Some professional definitions of modularity are : Modularity is the property of software system , The system is broken down into a set of high cohesion , Low coupling modules .

    Since it's modular design , So the capabilities required for a modular system :

  1. Define encapsulated modules .
  2. Define the dependencies of the new module on other modules .
  3. It can support the introduction of other modules .

The mind has , There must be something to build a modular regulatory system , Otherwise, all kinds of module loading methods will only make the game more chaotic .avaScript There are some specifications of non-traditional module development methods in CommonJS Module specification of ,AMD(Asynchronous Module Definition),CMD(Common Module Definition)

AMD

    Asynchronous Module Definition, In vernacular, it means Asynchronous module definition , about JSer Come on , Asynchronous is a familiar word , All modules will be loaded asynchronously , Module loading does not affect the subsequent statement running . All statements that depend on certain modules are placed in callback functions .
 
    AMD The specification defines a free variable, or global variable define Function of . 

define( id?, dependencies?, factory );

     The first parameter id Is a string type , Indicates the module identification , Is an optional parameter . If not, the module ID should be defined by default as the ID of the requested script in the loader . If there is , Then the module ID must be top level or an absolute ID .
     The second parameter ,dependencies , Is a current module dependent , Array literals identified by the module defined by the module .
     The third parameter ,factory, Is a function or an object that needs to be instantiated .
 
     Create a module identified as alpha Module , Depend on require, export, And marked as beta Module  
define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
export.verb = function(){
return beta.verb();
// or:
return require("beta").verb();
}
});
  An asynchronous module that returns the literal value of an object
define(["alpha"], function( alpha ){
return {
verb : function(){
return alpha.verb() + 1 ;
}
}
});
A dependency free module can be defined directly using the literal quantity of an object  
define( {
add : function( x, y ){
return x + y ;
}
} );

Similar to CommonJS Mode definition

define( function( require, exports, module){
var a = require('a'),
b = require('b'); exports.action = function(){};
} );

 require();  

    require API Introduce   https://github.com/amdjs/amdjs-api/wiki/require
 
     stay AMD Normative require Function and general CommonJS Medium require Different . Load asynchronously due to dynamic detection dependency , For callback based require There is a strong demand .
 

  Local And overall situation Of require

     Local require Need to be in AMD In the pattern define In the factory function require.
define( ['require'], function( require ){
// ...
} );
or:
define( function( require, exports, module ){
// ...
} );
  Local require Need other specific API To achieve .
     Overall require Function is the only variable in global scope , image define equally . Overall require It's not the norm , But if it's global require function , Then it needs to have and local require function The following restrictions are the same :
    1. Module identification is considered absolute , Instead of corresponding to another module ID .
    2. Only when it's asynchronous ,require The callback method is used as an interactive operation . Because it's impossible for him to get through in sync require(String) Loading modules from the top .
     Dependent on related API Will start module loading . If multiple loaders need to be interoperable , So the overall situation reqiure It should be replaced by loading the top module . 
require(String)
define( function( require ){
var a = require('a'); // Load module a
} ); require(Array, Function)
define( function( require ){
require( ['a', 'b'], function( a,b ){ // Load module a b Use
// rely on a b The running code of the module
} );
} ); require.toUrl( Url )
define( function( require ){
var temp = require.toUrl('./temp/a.html'); // Loading page
} );

amdjs Of API   https://github.com/amdjs/amdjs-api/wiki

AMD And CMD What's the difference ? 

     Look at the above AMD,requireJS And CMD, seaJS It's a little fuzzy to give a brief introduction to , It always feels similar . Because like requireJS It's not just AMD Inherent thought , It also has CMD Normative thinking , It's just a recommendation AMD It's just the standard way , seaJS Is the same .
 
     Here's Yubo's response to AMD And CMD The explanation of the difference :
 
    AMD yes RequireJS The standardized output of module definition in the promotion process .
    CMD yes SeaJS The standardized output of module definition in the promotion process .
 
     Similar to that CommonJS Modules/2.0 standard , yes BravoJS In the process of promotion, there are still many standardized outputs of module definition ??
 
     The purpose of these specifications is to JavaScript Modular development , Especially on the browser side .
     At present, the realization of these specifications can achieve the goal of browser side modular development . 
 
     difference : 
    1. For dependent modules ,AMD It's ahead of time ,CMD It's delayed execution . however RequireJS from 2.0 Start , It can also delay execution ( According to the way of writing , Different ways of handling ).CMD To promote as lazy as possible.
    2. CMD Advocate dependence on proximity ,AMD Respect dependence before .
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// Omitted here 100 That's ok
var b = require('./b') // Dependence can be written nearby
b.doSomething()
// ...
}) // AMD The default recommendation is
define(['./a', './b'], function(a, b) { // Dependencies must be written at the beginning
a.doSomething()
// Omitted here 100 That's ok
b.doSomething()
// ...
})

3. AMD Of API The default is one when more than one is used ,CMD Of API Strictly distinguish between , Promote single responsibility . such as AMD in ,require Divide the whole situation require And parts require, All call require.CMD in , There is no overall situation require, But according to the completeness of the module system , Provide seajs.use To load and start the module system .CMD in , Every API It's all simple and pure .

4. There are also some differences in details , See the definition of this specification , Not much .

in addition ,SeaJS and RequireJS The difference of , You can refer to : https://github.com/seajs/seajs/issues/277

JavaSript modularization -AMD Specification and CMD More articles related to norms

  1. JavaSript The module specification - AMD Specification and CMD Specification introduce ( turn )

    JavaSript The module specification - AMD Specification and CMD Specification introduce JavaSript modularization In understanding AMD,CMD Before the norm , We still need to understand what modularity is first , Modular development ? Modularity refers to solving a complex problem or ...

  2. AMD Specification and CMD The difference between norms

    AMD Specification and CMD What's the difference between norms ?     Before the comparison , We need to understand first what is AMD standard ? What is? CMD standard ? Of course, first of all , I'm just summarizing , It's also the information you see on the Internet , Summarize or sort out by yourself , for ...

  3. turn :AMD Specification and CMD What's the difference between norms ?

    AMD Specification and CMD What's the difference between norms ?     Before the comparison , We need to understand first what is AMD standard ? What is? CMD standard ? Of course, first of all , I'm just summarizing , It's also the information you see on the Internet , Summarize or sort out by yourself , for ...

  4. JavaSript The module specification - AMD Specification and CMD Specification introduce

    JavaSript modularization   In understanding AMD,CMD Before the norm , We still need to understand what modularity is first , Modular development ?        Modularity refers to solving a complex problem or a series of hybrid problems , According to a sort of thinking, put the problem ...

  5. JavaSript The module specification - AMD Specification and CMD Specification introduce ( Reprint lovenyf.blog.chinaunix.net)

    JavaSript modularization   In understanding AMD,CMD Before the norm , We still need to understand what modularity is first , Modular development ?        Modularity refers to solving a complex problem or a series of hybrid problems , According to a sort of thinking, put the problem ...

  6. 【 turn 】JavaSript The module specification - AMD Specification and CMD Specification introduce

    JavaSript modularization   In understanding AMD,CMD Before the norm , We still need to understand what modularity is first , Modular development ?        Modularity refers to solving a complex problem or a series of hybrid problems , According to a sort of thinking, put the problem ...

  7. JavaSript The module specification - AMD Specification and CMD Specification introduce [ turn ]

    Original address :http://blog.chinaunix.net/uid-26672038-id-4112229.html JavaSript modularization In understanding AMD,CMD Before the norm , I still need to know something first ...

  8. JavaSript The module specification - AMD Specification and CMD Specification introduce ( turn )

    JavaSript modularization   In understanding AMD,CMD Before the norm , We still need to understand what modularity is first , Modular development ?        Modularity refers to solving a complex problem or a series of hybrid problems , According to a sort of thinking, put the problem ...

  9. Modular development of Amd Normative and Cmd standard

    CMD standard : yes SeaJS In the process of generalization, the standardization output of module definition is analyzed . AMD standard : yes RequireJS In the process of generalization, the standardization output of module definition is analyzed // CMD define(function(require ...

Random recommendation

  1. canvas Summary

    I didn't have much to do in the company some time ago , I studied it canvas, It hasn't been formally applied in actual development , But I've felt its charm . Let's write about it. I think canvas The more important point in the book , If there is a mistake in understanding , Welcome to correct . First canvas yes h5 ...

  2. Detailed explanation Spring frame AOP( Section oriented programming )

    Studying recently AOP, I didn't understand before , What is? AOP? Why use AOP, What does it do ? After learning, I have a little feeling and my own understanding , So here I would like to share with you AOP(Aspect-Oriented Pr ...

  3. IO flow - Byte output stream OutputStream exception handling

    package it.cast_01; import java.io.FileNotFoundException; import java.io.FileOutputStream; import ja ...

  4. mysql Sort by a specific value of a field

    such as : surface :user Field :orders ( The value is 1,2,3) The requirement is based on the field  orders Press 2 -> 1 -> 3 Sort Use the following statement to implement SELECT *FROM userORDER ...

  5. August 15th 2016 Week 34th Monday

    Why not discovering as there is glorious faraway scenery? There are poems in the distance , Why not discover ? An advertisement of Land Rove ...

  6. HTML5 Learning summary

    The use of basic tags <!doctype html> <!-- This is a HTML5 The statement of , It can be in both case --> <html> <head> <title> ...

  7. Ecshop The list of orders in the background is increased ” Trade name ” Search fields

    In the near future ecshop Websites do activities , There is no option to search by commodity name when counting the quantity of commodity orders , You can only manually query . It's inefficient , And it's easy to make mistakes . Now add a simple “ Search by trade name ” Form items . The effect is as follows involves 2 File , Namely ...

  8. Please use GameBench.jar File to start the GameBench service

    Please use GameBench.jar File to start the GameBench service On the computer JAVA JRE:http://www.oracle.com/technetwork/java/javase/downlo ...

  9. $.getJSON() Methodical callback explain

    $.getJSON() Methods cross domain   To get the server's json When the object ,url At the end of the suffix with a "callback=?" As a successful callback function : Such as : var url = "${ ...

  10. be based on jquery in children() And find() What's the difference

    This article introduces , be based on jquery in children() And find() The difference between , Friends in need of reference .children(selector) The method is to return all child elements of each element in the set of matching elements ( Only sons ). Parameters can be chosen ...