Talking about Requirejs

Talking about Requirejs Requirejs 2016-04-26 21:44 by Monkey Ape, 429 reads, 0 comments, Favorites, compilation

Most of the projects use modular development, REQUIREJS as a model for AMD module development, so it is necessary to learn. By using Requirejs to write the demo in one step, we learn a whole development process of requirejs and some feelings of self-use Requirejs.

AMD : A module-based asynchronous load JavaScript the mechanism of the Code, which recommends that the developer JavaScript code encapsulated into modules, the global object of the depends on other modules, without having to declare a whole bunch of global variables. Resolve dependencies for each module by delaying and on-demand loading. the advantages of the modular JavaScript code are obvious, the loose coupling of each functional component can greatly improve the reusability and maintainability of the code. This non-blocking, concurrent, fast-loading JavaScript Code makes other Web pages Independent of JavaScript of the Code UI elements, slices, CSS and other DOM the node can be loaded first, Web pages load faster and users get a better experience.

1. Download Requiejs

We need to prepare something before we use REQUIEJS Modular development. That must be the download require.js file, hahaha, because it is based on its development.

2. Create an HTML file

After creating an HTML file, importing Requirejs is definitely using the <script> tag, which is no doubt. Then there is a Data-main attribute in this tag, and it acts as an entry and exit, that is, after loading the Requirejs, from the Data-main attribute.

such as the following:

<! DOCTYPE html>    
When I pass the load js/require.js, then go to execute the Js/main JS file. Main it is also a JS file, we can omit its. js suffix, Requirejs will add it.
3. Data-main
When the program executes <script data-main= ' Js/main ' src= ' js/require.js ' ></script>, go through Data-main to Main.js to execute main.js. What's in the main.js?
Please look at the code:
/*    Require.config Execute baseUrl as ' js ',    baseUrl refers to the root directory of the module file, can be absolute path or relative path */require.config ({    baseUrl: ' JS ',    paths: {        jquery: ' Jquery-1.8.2.min '}    });/*    here through require, introduce Monkey.js,    and then assign them parameters by following the anonymous function, As Monkey-->mk*/require here    ([' Monkey '],function (MK) {    mk.init ();   });
From the above code, you can see that the main.js contains the Require.config and require two modules.
The function of Require.config is to configure some parameters of the Requirejs and then public references.
For example, above the BaseURL, its role is to use it as the base path, under this path, to find the file. I put all the. js files in the JS folder. Therefore, after configuring this property, the future files are in the JS this path to find content.
As follows:
Require ([' monkey '], function (monkey) {    monkey.init ();});
It refers to the monkey, not the Js/monkey, when referencing monkey.
What about the role of paths? is to use some of the usual JS files, replaced by generic names. For example Jquery-1.8.2.min.js, we can not call it every time, we write this Phala bar, so for convenience, will be jquery instead of jquery-1.8.2.min.js, we will be able to use jquery directly, fast and convenient.
OK, require.config basically mixed a face ripe, a word, its function is to configure Requirejs well.
What about the Require?
Require's role is to execute. For example, I only need monkey.js to execute, so I import the monkey, and then through the Mk parameter, get the return value after monkey execution. If there is a return value, then we can do the corresponding processing of Mk.
Hey, what's in the monkey?
Let's see:
    /* Define parameter is an anonymous function that returns an object */define ([' jquery '],function ($) {    var init = function () {        Console.log ($). browser);    };    return {        init:init    };});
define! Its function is to define a JS module for use by other modules or require. It refers to other JS module method and require is similar, all will need to introduce the JS file, and then the parameter one by one corresponds. It is important to note that the methods or variables defined in the define are not accessible to other modules, so if you want other modules to be accessible, you can throw the corresponding method (return) object or function. Here, I return an object that provides init for other modules to invoke.
Okay, here's the detailed code.
Talking about Requirejs