SeaJS_javascript in JavaScript modular Development

SeaJS is a JavaScript module loading framework that complies with CommonJS specifications. It can implement JavaScript modular development and loading mechanisms. This article introduces SeaJS, a JavaScript modular development framework. For more information, see the following preface.

Eclipeclipseajs is a JavaScript module loading framework that complies with CommonJS specifications. It can implement JavaScript modular development and loading mechanisms. The use of SeaJS can improve the readability and clarity of JavaScript code and solve common problems such as dependency disorder and code entanglement in JavaScript programming, so as to facilitate code compilation and maintenance.

SeaJS itself follows the KISS (Keep it Simple, Stupid) concept for development, and several subsequent version updates are clamoring for this direction.

How to Use SeaJS

Download and install it here. If you do not know it, please go to the official website.

Basic Development Principles
• Everything is a module: the module concept in SeaJS is somewhat similar to the object-oriented class-the module can have data and methods, and the data and methods can be defined as public or private, public data and methods can be called by other modules.

• Each module should be defined in a separate js file, that is, a corresponding module.

Module definition and writing

Module definition function define

Use the define function in SeaJS to define a module. Define can receive three parameters:

/*** Defines a module.* @param {string=} id The module id.* @param {Array.|string=} deps The module dependencies.* @param {function()|Object} factory The module factory function.*/fn.define = function(id, deps, factory) {  //code of function…}

The parameters that define can receive are module IDs, dependent module arrays, and factory functions.

• If there is only one parameter, the value is assigned to the factory.

• If there are two parameters, the second parameter is assigned to the factory, and the first parameter is assigned to the deps if it is an array. Otherwise, the second parameter is assigned to the id.

• If there are three parameters, values are assigned respectively.

However, almost all the places that use define, including examples on the SeaJS official website, only one factory function is passed in, similar to the following code:

define(function(require,exports,module){  //code of the module}) 

Personally, we recommend that you follow the standard of the official SeaJS example and use a define parameter to define the module. What will id and deps do?

The specified upload id is a module identifier string. If define has only one parameter, the id is assigned an absolute path to the js file by default. For example, in the. js file under example.com, use define to define the module, the ID of this module will be assigned to the http://example.com/a.js, there is no special need to do not input the id. Deps generally does not need to be passed in. You can use require to load the required modules.

Factory function Parsing

The Zookeeper factory function is the main body and focus of the module. Its three parameters are:

• Require: module Loading Function, used to record dependency modules
• Exports: interface point. When data or method is defined on it, it is exposed to external calls.
• Module: module metadata

You can select whether to display the specified parameters as needed.

A module is an object that stores the metadata of a module as follows:
• Module. id: module ID
• Module. dependencies: An array that stores the IDs of all modules that this module depends on.
• Module. exports: points to the same object as exports.

Three Writing module Modes

The first is the exports-based mode:

Define (function (require, exports, module) {var a = require ('A'); var B = require ('B'); // introduce module var data1 = 1; // Private Data var fun1 = function () {// Private method return. run (data1);} exports. data2 = 2; // public data exports. fun2 = function () {return 'hello ';}})

The above is a more "authentic" module definition mode. In addition to adding public data and methods to exports, you can also directly return an object representation module. The following code has the same function as the above Code:

Define (function (require) {var a = require ('A'); var B = require ('B'); // introduce module var data1 = 1; var fun1 = function () {return. run (data1) ;}return {data2: 2, fun2: function () {return 'hello ';}}})

If the module definition does not have any other code, only one object is returned. You can also simplify the writing as follows:

define({  data2:2,    fun2:function(){      return 'hello';    }  }) 

The third method is suitable for the module that defines pure JSON data.

Based on different application scenarios, SeaJS provides three loading module APIs: seajs. use, require, and require. async.

Seajs. use

Seajs. use is mainly used to load the entry module. The entry module is equivalent to the main function in C language and also the root of the entire module dependency tree. Seajs. use
The usage is as follows:

// Seajs In the first mode. use ('. /A'); // callback mode seajs. use ('. /A', function (a) {. run () ;}) // multi-module mode seajs. use (['. /','. /B '], function (a, B) {. run (); B. run ();})

The usage of multiple modules is similar to that of the module Loading Method in KISSY. It is written by one person!

Generally, seajs. use Only loads the entry module on the page. SeaJS parses all the dependency modules along the entry module and loads them. If there is only one entry module, you can also omit seajs. use by adding the "data-main" attribute to the script tag that introduces seajs. For example:

  
   TinyApp