Requirejs Getting Started 1

Requirejs Getting Started

With JavaScript in the development of a larger proportion of the need for a team to division, collaboration, for everyone's code can better use each other, this time the modular programming becomes an urgent need. But JavaScript itself is not a modular language. It doesn't support classes, let alone modules.

Since the module is so important, the team development should be to develop a norm, to constrain everyone, so that it is easy for everyone to use each other. If everyone according to their own wording, it must be a mess, the current JavaScript official no specification, the common JavaScript module specification only two: Commonjs and AMD

COMMONJS Overview

COMMONJS is the server-side module specification, it loads the module sequence is synchronous, must wait for one to load the next, node. JS is to obey the COMMONJS specification

Amd

AMD is a browser-side module that loads asynchronously without waiting.

The difference between the two is: COMMONJS is the server-side module specification, the loading module sequence is synchronous; AMD is a browser-side module that loads asynchronously. The two can be transformed between each other (not in this explanation).

What is Requirejs?

Requirejs is a JavaScript file, a module loader, and it can be used in other JavaScript environments, like node and so on, when the browser executes fast.

It complies with the AMD module specification

Why to use Requirejs

1. As mentioned in the first paragraph, the need for JavaScript modularity, the need for demand

The code below must have been read by everyone:

 <Scriptsrc= "1.js"></Script> <Scriptsrc= "2.js"></Script> <Scriptsrc= "3.js"></Script> <Scriptsrc= "4.js"></Script>

This kind of writing has a lot of shortcomings. First of all, when loading, the browser stops the page rendering, the more files loaded, the longer the Web page loses its response, and secondly, due to the existence of a dependency between the JS files, so the load order must be strictly guaranteed (such as the above example 1.js to the front of 2.js), the most dependent module must be put to the last load, Code writing and maintenance can become difficult when dependencies are complex

2. Implement the asynchronous loading of JS file to avoid the webpage losing its response;

3. Managing dependencies between modules for easy code writing and maintenance

How to use Requirejs

1. Go to the official website next Requirejs file, like JS file add

1 <script data-main= "Script/main" src= "Script/require.js" ></script>

We find that this code is more than a Data-main property, this is like the main function in C, Main.js will be the first to be require.js loaded, because the require.js default filename suffix is js, so you can simply call Main.js as main

So let's see how the main function is written.

Defining modules: A module name a file

1. If the module does not have any dependencies, it is simply a collection of name/value that can be defined as an object form

define ({      color:"Black",      Size:"Unisize" })

2. If there is no dependency on this module, just one way to handle some simple logic

1 define (function() {2        var a=1,b=2; 3        document.write (A +b); 4  })

3. Define a dependent module, the first parameter is an array, the second parameter is a method function, the first parameter corresponding to the JS file is loaded, the second parameter of the function will be executed

1 define (["./cart", "./inventory"],function(cart,inventory) {2      return {                      // can also return a function3           cart:cart.add (3,4); 4           Inventory:inventory.minus (3,45     }6  

4. Define a module to convert Commonjs

1Definefunction(Require, exports, module) { //three parameters in the method, need to be written in sequence and corresponding to the name, otherwise there will be confusion, you can discard exports and module, but you want to use the use, must be written in order 2         varA = require (' a '),3b = require (' B ');4 5         //Return the module value6         return function () {};7     }8);