Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use javascript AMD". In daily operation, I believe many people have doubts about how to use javascript AMD. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use javascript AMD"! Next, please follow the editor to study!

Modules/Wrappings makes the implementation a reality. Although it is not completely consistent with the module writing of NodeJS, there are many similarities that make programmers familiar with NodeJS have some intimacy.

But NodeJS is the server-side JavaScript after all, so there is no need to put these rules into the browser JavaScript environment. At this point, AMD was born, and its full name is asynchronous module definition. Judging from the name, it is suitable for script tag. It can also be said that AMD is a specification designed specifically for the JavaScript environment in browsers. It absorbs some of the advantages of CommonJS, but does not copy its format. At the beginning, AMD existed as the transport format of CommonJS and existed independently because it could not reach an agreement with CommonJS developers. It has separate wiki and discussion groups.

AMD designed a concise write module API:define.

Define (id?, dependencies?, factory)

Where:

◆ id: module identification, which can be omitted.

◆ dependencies: the module you depend on, which can be omitted.

◆ factory: the implementation of a module, or a JavaScript object.

Id follows CommonJS Module Identifiers. The order of the dependencies elements corresponds to the factory parameter one by one.

The following is a simple three-tier structure (base library / UI layer / application layer) developed using the AMD pattern:

Base.js

Define (function () {return {mix: function (source, target) {}};})

Ui.js

Define (['base'], function (base) {return {show: function () {/ / todo with module base})

Page.js

Define (['data',' ui'], function (data, ui) {/ / init here})

Data.js

Define ({users: [], members: []})

The above demonstrates three uses of define at the same time

1. Define undependent modules (base.js)

2. Define dependent modules (ui.js,page.js)

3, define the data object module (data.js)

If you are careful, you will find that there is another kind that has not appeared, that is, the named module.

Define ('index', [' data','base'], function (data, base) {/ / todo})

Named modules are not recommended most of the time and are generally used by packaging tools when merging multiple modules into a single js file.

I mentioned earlier that the order of dependencies elements corresponds to factory one-to-one, but it's not very rigorous. AMD began to put forward its own module style in order to get rid of the shackles of CommonJS. But then made a compromise, compatible with CommonJS Modules/Wrappings. That is, it can be written like this.

Define (function (require, exports, module) {var base = require ('base'); exports.show = function () {/ / todo with module base}})

Regardless of the extra layer of functions, the format is quite similar to NodeJS. Use require to get dependency modules, and use exports to export API.

In addition to define, AMD retains the keyword require. Require, as a global identifier reserved by the specification, can be implemented as module loader. It may not be realized.

At present, the libraries that implement AMD include RequireJS, curl, Dojo, bdLoad, JSLocalnet, Nodules and so on.

There are also many libraries that support the AMD specification, which is about to exist as a module, such as MooTools, jQuery, qwery, bonzo, and even firebug.

At this point, the study on "how to use javascript AMD" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.