Teach you step by step how to write common modules using JS (detailed code explanation)

In the previous article "A brief analysis of the timestamp operation method in JavaScript (with code)", we learned about the timestamp operation method in js. The following article will show you how to use JS to write common modules. Let's see how to do it together.

The problem of modularity did not exist from the beginning. When WWW first came out, html, JavaScript, CSS (JS and CSS were later introduced into the browser at Netscape) are extremely simple existences and do not require Modular.

The demand for modularization is a product of scale. When web page evolves to web application, the logic processed by the browser becomes more and more complex, and the display style and There are more and more animations, and the requirements for engineering are getting higher and higher. Then the need for modularization came into being. The significance of modularization:

• Reuse of components reduces development and maintenance costs

• Components are developed individually to facilitate division of labor and cooperation

• Modularity follows standards to facilitate automated dependency management, code optimization, and deployment

JavaScript has long been considered a simple script Language, in fact, the situation has changed a long time ago. In the latest version of the ECMA-262 (ES6) document, it is emphasized that JavaScript is a general programming language rather than a scripting language. Scripting languages, such as shell, are not used to complete complex functions. They are only used to perform some automated control and do not require modularization. General-purpose programming languages ​​(such as Java) used to build complex systems generally have module implementations.

Before ES6, the JS language was not modular. How to make JS not only run in the browser, but also manage the code more effectively? , So CommonJS came into being

CommonJS

This specification defines three global variables:

• require，exports，module

  require
is used to introduce a module

• exports
The interface of the externally exposed module can be of any type

• module
is the module itself When the object

is introduced with require, what is obtained is the interface exposed by this module (

exports

) Node.js uses the

CommonJS

specification: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var foo = require(&quot;foo&quot;); var out = foo.sayName(); module.exports = out;</pre><div class="contentsignin">Copy after login</div></div> on the browser side, unlike Node.js internal support CommonJS, How to modularize, so there are two methods CMD and AMD, the main representatives are seajs and

requirejs

, they both define A global function define is used to create a module: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">//CMD define(function (require, exports, module) { var foo = require(&quot;foo&quot;); var out = foo.sayName(); module.exports = out; }); //AMD define([&quot;foo&quot;], function (foo) { var out = foo.sayName(); return out; });</pre><div class="contentsignin">Copy after login</div></div> It can be seen that CMD completely retains the style of CommonJS, And AMD uses a more concise way of dependency injection and function return to achieve modularity. Apart from different styles, the biggest difference between the two is the way to load dependent modules. CMD is lazy loading, and dependencies will be loaded only when require. And

AMD

is preloading, which loads all dependencies in advance when defining the module. We need to implement a module so that it can be introduced in both the seajs (CMD) environment and the requirejs (AMD) environment. Of course, It can be used in Node.js(CommonJS), and can also be imported globally using the

script

tag in an environment without modularity.

First make a module<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var factory = function () { var moduleName = {}; return moduleName; };</pre><div class="contentsignin">Copy after login</div></div>Of course

return

The output can be any value, object, class, etc.First satisfy Node.js or ES6, we can use the global variables module and

exports

to determine where <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var factory = function () { var moduleName = {}; return moduleName; }; if (typeof module !== &quot;undefined&quot; &amp;&amp; typeof exports === &quot;object&quot;) { module.exports = factory; }</pre><div class="contentsignin">Copy after login</div></div> is in CMD# In ## and AMD, we need to provide a factory function and pass in define to define the module. When there is no global variable mentioned above and there is a define global variable, We think it is AMD or CMD, you can directly pass factory into define

:

var factory = function () {
  var moduleName = {};
  return moduleName;
};
if (typeof module !== "undefined" && typeof exports === "object") {
  module.exports = factory;
} else if (typeof define === "function" && (define.cmd || define.amd)) {
  define(factory);
}

Note : CMD actually also supports the return module interface, so both can be used interchangeably.

Then we also need to meet the global import of the script tag. We can place the module on window, so that the module can be used internally in the browser and Node Global objects can be used in .js

. We can make this judgment:

var global = typeof window !== "undefined" ? window : global;

We use a closure function that is executed immediately to include all code to avoid polluting the global space and The global

object is passed into the closure function, and it eventually becomes like this:

(function (global) {
  var factory = function () {
    var moduleName = {};
    return moduleName;
  };
  if (typeof module !== "undefined" && typeof exports === "object") {
    module.exports = factory;
  } else if (typeof define === "function" && (define.cmd || define.amd)) {
    define(factory);
  } else {
    global.factory = factory;
  }
})(typeof window !== "undefined" ? window : global);

Note: The semicolon before the closure is to fill in the holes for the previous module. There is no problem if there are too many semicolons. , if less, the statement may change.

Then, you can happily call

//Node.js
var myModule = require('moduleName')

//Seajs
define(function(require,exports,module){
  var myModule = require('moduleName')
})

// Browser global
<script src=&#39;moduleName.js&#39;></script>

[End]

Recommended learning: JavaScript Advanced Tutorial

## #

The above is the detailed content of Teach you step by step how to write common modules using JS (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!