REQUIREJS Modular Loading Framework uses

Source: Internet
Author: User

Requirejs is a modular loading framework that follows the AMD specification

As with Seajs above, here is a brief introduction to its related usage

Again, the first thing is to download the Require.js--and Http://requirejs.org/docs/download.html#requirejs.

The AMD specification is pre-loaded, which means that all modules are loaded immediately.

The notation is similar to SEAJS, except that the module name is typically placed in the first parameter when it is necessary to include a module. And not directly require see

(The new version also has the CMD version require contains the way to rely, but the essence is still the same, the following will be mentioned)

Or an example:

Directory structure Sibling

Index.html:

Notice that the script tag here has a Data-main attribute (plus no suffix js can), which identifies the reference main module entry Main.js

(You can also not use this kind of reference entry method, below will introduce another way, notice ~)

<!DOCTYPE HTML><HTML><Head>    <title>Require</title>    <styletype= "Text/css">    </style></Head><Body><Scripttype= "Text/javascript"Data-main= ' main 'src= "./require.js"></Script></Script></Body></HTML>

Main.js:

Place two modules into parameter 1 and pass in as callback

define ([' main1 ', ' main2 '],function(main1,main2) {     console.log (' module of Main: ');    Main1.say ();    Main2.say ();});

Main1.js:

Define (function(require,exports,module) {     console.log (' module of main1: ');     = {         function() {             console.log (' Main1--hello ');        }    };});

Main2.js:

Define (function(require,exports,module) {     console.log (' module of main2: ');     return {         function() {             console.log (' Main2--hello ');        }    };});

The browser opens index.html to discover the results:

It's a messy order, isn't it?

In fact, this is because the AMD specification pre-loaded rules, pre-all dependencies are executed (although we do not have to use)

And this load is parallel, (by default) Main1 and main2 are not sequential.

Assuming that the Main.js file is delayed due to network problems, the following results may occur

Module of Main2:

Module of Main1:

Module of main:

...

However, we can also for its dependencies, such as main1 rely on main2, then can guarantee the "so-called order"-main2 before the Main1

such as changing index.html to

<!DOCTYPE HTML><HTML><Head>    <title>Require</title>    <styletype= "Text/css">    </style></Head><Body><Scripttype= "Text/javascript"src= "./require.js"></Script><Scripttype= "Text/javascript">require.config ({shim:{'main1': {deps: ['main2']          }      }  }); Require (['Main'],function(Main) {Console.log (main.num); });</Script></Script></Body></HTML>

Main.js:

define ([' main1 ', ' main2 '],function(main1,main2) {     console.log (' module of Main: ');    Main1.say ();    Main2.say ();     return {Num:10};});

At this point the result:

As mentioned above, Requirejs also updated the policy of following the CMD specification, but ostensibly followed, essentially, AMD's

Why do you say that? Citation

So use Requirejs to be honest with AMD, if you want to use the way of CMD, use Seajs Bar

REQUIREJS Modular Loading Framework uses

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.