JS Template Loading Framework Sea.js Learning Notes

SEAJS implements the module development of JavaScript and loads it by module. Used to solve the tedious JS naming conflicts, file dependencies and other issues, the main purpose is to make JavaScript development modular and easy to load.

Official Document: http://seajs.org/docs/#docs

First look at how SEAJS is developing the module. Using Seajs basically there is only one function "define"

function (ID, deps, factory) {    //function...}

Use the Define function to define a module that defines the specification according to the CMD (Common module definition) module. A file is a module. So there is only one define in a JS file, that is, a file is a module, the concept of a module in Seajs is somewhat similar to the object-oriented class--modules can have data and methods, data and methods can be defined as public or private, and public data and methods can be called by other modules.

In the official instance, define only passes one parameter: one factory function

Define (function(require, exports, module) {    //   the module ...});

Before we look at the parameters, let's look at how define handles the parameters:

Fn.define = function (ID, deps, Factory)

The parameters that can be received by define are module ID, module array and factory function, respectively;

If there is only one argument, assign the value to factory.

If there are two parameters, the second is assigned to factory, and the first one is assigned to Deps if it is an array, otherwise it is assigned to the ID.

If there are three parameters, the values are assigned to Id,deps and factory respectively.

According to the official example, the proposal or according to the official to pass a parameter, that is, only the factory parameter, so that the module ID default to the JS file path.

Take a look at the parameters of the factory function:

Require,  exports, module

require-module load function for documenting dependent modules. This parameter is for loading the other modules.

exports-the interface point at which the data or method is defined to expose it to an external call. This parameter is used to expose the method of this module

Module-the meta-data of the modules. It is an object that has properties:

module.id--The ID of the module.

module.dependencies-An array that stores the list of IDs of all modules that this module relies on.

Module.exports--points to the same object as exports.

Use of parameters using factory:

Define (function(require, exports, module) {    var a  = require ('./a ');   introduce a module            exports.fun2function() {            alert ("fun2");            A.dosomething (); }    }

The Require object is used to load the module, but the regular expression is used to validate the load, so its argument must be a specific string and cannot be an expression.

Seajs will automatically add ". js" to the Require parameter to load, i.e. no suffix is required, but in some cases seajs will not add ". js" to it:

1. Load CSS:

Require ("./module1-style.css");

2. The path contains the "? ”：

Require (<a  href= "Http://example/js/a.json?b=func" >http://example/js/a.json?cb=func</ a>);

3. The path ends with "#":

Require ("http://example/js/a.json#");

Use exports to expose methods, or properties, to the outside. There are several ways to expose attributes, such as the one in the above example, and the other:

Use return:

Define (function(require) {    var// private Data    var func1  function// Private method         returna.run (data1);    }     // Exposed    return {        2,        func2:function() {            return' Hello ' ;        }    }; });

Return the JSON object directly:

define ({    1,    func:function() {        return' Hello ';    }});

page, call Seajs

The seajs used to solve the module development, and cumbersome file dependencies, so all the file dependencies are loaded through the Require object, or you can use Require.async ("./a") to load asynchronously, that is, when the use of the time to load,

Note: either require () or require.async () can have a second parameter called the callback function, which is invoked when the file is loaded successfully:

require.async(‘/path/to/module/file‘,function(m) {

     //code of callback... });With this load-dependent approach, we don't have to write a lot of <script ></script> tags on the page, just using a

<script src= "./sea.js" data-main= "./init" ></script>

, where data-main= "./init" is the ingress module, which means that the module is loaded, and the module that it depends on is iterated, using this property can omit Seajs.use. This one says later.

Use Seajs.config for global configuration:

Seajs.config ({    base:' path/to/jslib/',    alias: {      ' app ': ' path/to/app/'    },    CharSet:' Utf-8 ',    20000,    debug:false});

This is a global configuration of the SEAJS,

base Base Address path when base address is addressed

alias can set abbreviations for longer common paths.

CharSet represents the CharSet property of the script tag when downloading JS.

Timeout indicates the maximum length of time, in milliseconds, to download a file.

Debug Indicates whether it is working in debug mode.

Use Seajs.use to load the ingress module, which is equivalent to the main function of Java,

// Single module mode seajs.use ('./a'/// callback mode seajs.use ('./a ',function(a {  // Multi-module mode seajs.use (['./a ', './b '),function(A, b) {  a.dosomething ();  B.dosomething ();});

The following can be seen in its official simple example of the page how to write, basically understand how sea.js is used:

<Scriptsrc=".. /sea-modules/seajs/seajs/2.2.0/sea.js "></Script><Script>  //Set ConfigurationSeajs.config ({base:".. /sea-modules/", alias: {"jquery": "Jquery/jquery/1.10.1/jquery.js"    }  }); //For Development  if(Location.href.indexOf ("? Dev") > 0) {Seajs.use (".. /static/hello/src/main"); }  //For production  Else{seajs.use ("Examples/hello/1.0.0/main"); }</Script>

Mian.js

// hello/mian.jsdefine (function(require) {  var Spinning = require ('./spinning ');   var New Spinning (' #container ');  S.render ();});

Reference: SEAJS Guide to using Tutorials

API Quick Reference

The value of front-end modular development

JS Template Loading Framework Sea.js Learning Notes