Require.js Simple Introduction

Original address: http://blog.sae.sina.com.cn/archives/4382

Objective

Mentioned require.js Most people will say that the mention of modular development, AMD and so on, in fact, Require.js does not have so many complex concepts, here I would like to exclude these concepts, from a practical point of view to simply say what Require.js is doing, how we want to use it.

1. Why Use Require.js

Most front-end developers have used jquery, so before using jquery we first have to load jquery into the page, and then we can use it in the next JS $ , which we know two reasons, one is we can not put all the JS code in a file, Some things can be presented separately as a module, such as jquery. Another reason, part of JS is dependent on another part of JS, such as $ relying on the loading of jquery files. In fact, the main thing Require.js do is these two points.

When your JS project is large enough, complex enough, rely on the library enough, you need such a tool to do these JS management, otherwise your project extensibility is poor, the structure is very bad, it is difficult to find the place to change.

In fact, many other programming languages have implemented similar functions in the code, such as this python.

123	Import Web db = web. Database(dbn=' SQLite ', db="todos.db")

Well understood, we imported the Web object and then we could use it in the next code.web.database

2. How to use Require.js?

The first page to load require.js, this can't use it to rely on its own

1	<script Data-main="js/app.js" src="Js/require.js"></script>

Since the purpose of using require this mode is to divide the file into understandable chunks, then our JS file will be divided into a part, called the module, the official API instance directory structure is this:

• www/
  • Index.html
  • js/
    • app/
      • Sub.js
    • lib/
      • Jquery.js
      • Canvas.js
    • App.js

Here is an app, but the common page development can also be borrowed from the concept, that is, JS according to the function and purpose of the open, the library files put together, sub-modules put together, the entrance JS and then to selectively load.
Note here that the purpose of modular development is to make it easier for developers to understand and improve efficiency, and if the reader thinks that there is no need to do it completely, it does not have to be hard to do so, instead of increasing the cost of development in order to use any concept or method.

Defining modules

jquery This kind of library file is not mentioned first, we say how we define a module, that is, the Sub.js file

12345

//define Objects    define({ color: "Black", size: "unisize" });

123456789

//Definition methoddefine(function () { //do setup work here return { color: "Black", size: "unisize"     }});

If we define something that has dependencies, like jquery, we can do that.

1234567891011

define([".. /lib/jquery "], function($) { return { color: "Blue", size: "Large", addToCart: function() { /c6> $('. Cart-color '). Append(color)             }        }    });

Think about it, here's the concept, the first parameter, the object in the array is the module that I'm going to depend on, the parameters of the callback function, and then the passing of the objects in the preceding array.

Calling module

Remember the above directory structure, we still extract the official website of the example, App.js is the entry of the project, the content is as follows

12345678910111213141516171819

require. Config({ //by Default load any module IDs from Js/lib baseUrl: ' js/lib ', //except, if the module ID starts with "app", //load it from the Js/app directory. Paths //config is relative to the BASEURL, and //never includes a ". js" extension since //the paths Config could is for a directory. paths: { app: '.. /app '     }});//Start the main app logic.require([' jquery ', ' canvas ', ' app/sub '), function ($, canvas, sub) { /c7> //jquery, Canvas and the App/sub module is all //loaded and can be used. });

require.configconfiguration file, which defines the BaseURL, etc.

Next we require call, note here is the call, above is the definition of define, but see Code discovery and similar before, the same is the first parameter is an array of dependent objects, the callback will execute, the parameters are previously dependent on the object.

3. Give me a chestnut.

Practice is the only standard to test the truth, it is useless to see other people's practice, do it by yourself to read the ten-year book. I have written a simple example, if the reader is interested can also write a

I have an intermediate module, I call him sth, this module is placed inside the sth.js, as follows

12345678

define(function(require){ var p1 = require(' Part/part1 '); var p2 = require(' Part/part2 '); return { F1: p1. Dosome, f2: p2. DoOther     }})

It require two additional submodules, Part1 and Part2, and took their methods out and put them in the middle block and returned
We look at the part1,part2 long what kind, first they are part1.js and Part2.js file, Require.js think you loaded are JS script files, so unified omitted. js

12345678

//part1.jsdefine(function(){ return { dosome: function(){ console. Log(' dosome ')         }    }})

12345678

//part2.jsdefine(function(){ return { doother: function(){ console. Log(' DoOther ')         }    }})

And then we're in the main file, like Index.html,main.js ... Call STH

1234567

require([' sth ',' Check '],function(sth,check){ if(check. OK){ sth. F1() }else{ sth. F2()     }})

Let's say there's another check object here, and if check is true, execute STH.F1
, or execute sth.f2 think about it, F1,F2 is actually in two files inside.

Here is just a fictitious example of me, the actual application in accordance with their actual needs to design their own projects, remind again, do not use for use.

At last

All right, ladies and gentlemen, are you interested in require.js, then go crazy here?
http://requirejs.org/

Require.js Simple Introduction