Writing browsers and node. js generic JavaScript modules

For a long time, the JavaScript language itself does not provide modular support, ES6 finally gives the from, import and other keywords to the modular Code organization. But Commonjs, AMD and other specifications have been widely used, if you want your JavaScript to support both browser and node. js, now there are only a few ways:

Conversion is done through tools such as browserify. Provides a browser-side CommonJS framework, such as this simple CommonJS implementation. Use careful coding to support multiple environments.

Browserify can almost guarantee that the code passed under node. JS will still work in the browser. But the downside is also obvious: it's easy to generate redundant code and generate a huge JavaScript library. For miniature JavaScript tools, it's no longer appropriate to code carefully! See below.

Avoid global namespaces

COMMONJS, local variables in each source file are not visible in other files. However, all the variables in the global namespace are visible to all JavaScript files in the browser. This means that we need to wrap all the code. For example:

(function () {//Your code goes here ...}) ();

Unlike a common programming language, JavaScript takes a function scope and wraps your code with a functions to hide the local variables inside.

If you are disgusted with the code that the entire file is indented, you can add the above code at build time. For example in makefile:

Person.js:index.js Echo ' (function () {' > [email protected] cat $^ >> [email protected] echo '}) (); ' >> [em AIL protected]

If you're interested in make building a front-end project, take a look at Harttle's attempt: Makefile building a front-end project

A simple class

Of course, "class" refers to a function. Let's say that our JavaScript module provides a class called Person:

(function () {function person () {this.name = ' harttle ';}}) ();

The following will consider how this class can be provided to other modules for use.

Detecting COMMONJS environments

To use typeof to detect if a variable has been declared, because an if is thrown an error for an undeclared variable. For example:

Uncaught Referenceerror:foo is not definedif (foo = = undefined) {console.log (' Foo does not exist ');} Normal operation if (typeof foo = = ' undefined ') {console.log (' Foo does not exist ');}

To detect COMMONJS we only need to check the module, exports, require whether it exists, such as:

Commonjsif (typeof module!== ' undefined ' && typeof module.exports!== ' undefined ') {module.exports = person;} Detecting browser environments

The browser environment also includes the introduction of the AMD framework, as well as the lack of modularity. For the former we should use the AMD framework to declare a module, and for the latter we only need to expose a global variable.

Browserif (typeof define = = = ' function ' && define.amd) {define (' person ', [], function () {return person;});} else {window. person = person;}

Of course, these browser detection related logic should also be wrapped in the function.

Writing browsers and node. js generic JavaScript modules