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

This article is about how to try the Node.js module format in the browser. I think it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it with the editor.

As mentioned earlier, Node.js has a concise set of format writing modules that follow Moudles.

What about the JavaScript in the browser? Although the language itself does not support modules for the time being, it can be written in existing API wrappers.

There is no doubt that the first thing that comes to mind is Node.js 's Modules format, which is emulated by *. Because the front and rear end has a unified way to write JS module is not happy!

But there were some problems at the beginning.

1. The JS module file on the server side is local, and the browser side needs to request through the network.

2, the server side can easily implement synchronous or asynchronous request module, while the browser side has a lot of problems.

As follows

Var event = require ("event"); event.bind (el, 'click', function () {/ / todo})

If the require in this code is executed asynchronously, the execution of the event.bind may go wrong.

Wouldn't it be all right to implement synchronous require?

It is true that you can use XHR to load module JS files synchronously. But the disadvantage of XHR is also obvious, it can not cross-domain, which is difficult to accept, because some scenarios require modules to be deployed on different servers.

Then module loading can only be achieved through script tag!

But script tag is asynchronous by default, and it is difficult, almost impossible, to achieve the exact same Modules of Node.js.

At this point, another module format appears: Modules/Wrappings, as the name implies, the wrapped module. The specification is as follows

1. The module variable is used to define the module, which has a method declare

2. Factory accepts a parameter of a function type, such as a function

3Makefactory has three parameters: require, exports, module

4 the API is exported by using the return value and exports

5if it is an object type, output the object as a module

The description is mouthful, but the code is simple, using a function wrapper module (the Node.js module does not need to be wrapped).

A basic module definition

Module.declare (function (require, exports, module) {exports.foo = "bar";})

Directly use the object as a module

Module.declare ({foo: "bar"})

The advent of Modules/Wrappings makes it possible to implement it in browsers, with wrapped functions as callbacks. Even if script tag is used as the module loader, the callback is completed after the script is downloaded, and the module is defined in the callback.

Well, so far we've seen two styles of module definitions: Modules and Modules/Wrappings.

There are three versions of CommonJS Modules: 1.0,1.1 and 1.1.1.

Node.js and SproutCore implement Modules 1.0.

SeaJS, AvocadoDB, CouchDB and so on have implemented Modules 1.1.1.

SeaJS and FlyScript implement Modules/Wrappings.

Note:

1meme SeaJS did not implement all Modules 1.1.1. For example, the main,paths attribute of the require function is not in SeaJS. But SeaJS added async, resolve, load, constructor to require.

Instead of using module.declare in Modules/Wrappings to define the module, JS uses the define function (which looks like define in AMD, but is not).

The above is how to try the Node.js module format in the browser. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.