Simple use of Seajs

What is Seajs

1. Seajs is a loader http://yslove.net/seajs/
   
   
2. Follow the CMD specification for modular development, relying on the automatic loading, configuration of concise and clear.

3. Compatibility

   • Chrome
   • Firefox
   • Safari 3.2+
   • Opera
   • IE 5.5+

Basic Application Import Seajs Library

1. Go to the official website to download the latest Seajs file, http://seajs.org/docs/#downloads
2. Introduce SEAJS at the end of the page:
   <script src="/site/script/sea.js"></script>

3. Then write the configuration and entrance of the module underneath it.

   // seajs 的简单配置seajs.config({  base: "../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" }});// 加载入口模块seajs.use("../static/hello/src/main");

Configuration and entry

Here the meanings of the configuration and the entrance are explained.

Configuration

The path and alias of the SEAJS are typically modified on the configuration.

The path to the Seajs is relative to the Seajs file that was introduced earlier . If this is the directory structure:

examples/  |-- index.html  |  `--about  |     |-- news.html  |  `-- script        |-- seajs.js |-- jquery.js `-- main.js

We usually if we on the index.html reference main.js path should be written like this script/main.js , from news.html reference main.js will write this way ../script/main.js .

And in the SEAJS is relative to the Seajs file, all direct use main.js is OK, is not very convenient?

Since it's so convenient, what needs to be configured in what situation? The general situation is not to be used. But if your path is particularly deep or if you want to do a path mapping, it will work. Here are a few common configurations.

  seajs . config ({//sea.js The underlying path (modify this is not the path is not relative to the Seajs file) base: Span class= "hljs-string" > ' http://example.com/path/to/base/', //alias configuration (file is represented by a variable, Resolve path level too deep and implement path mapping) alias: { ' Es5-safe ':  ' Gallery/es5-safe/0.9.3/es5-safe ',  ' JSON ':  ' Gallery/json/1.0.2/json ',  ' jquery ':  ' jquery/jquery/1.10.1/jquery '},//path configuration (with variable representation of path, Resolve problem with path level too deep) paths: { ' gallery ':  ' Https://a.alipayobjects.com/gallery '});            

See more

Entrance

The portal is loaded and what files need to be loaded (the module loader) is introduced here. sea.js After the download is complete, the Portal module is loaded automatically.

seajs.use("abc/main");  //导入seajs.js同级的abc文件夹下的main.js模块的（后缀名可略去不写）

Seajs.use () has another way to use it.

Sometimes we write a simple single page does not want to write a single JS file for it, choose to directly put the JS code on the page, SEAJS through the seajs.use() implementation of this. receive two parameters the first is a file dependency (a single string array can be used, multiple arrays are required), and the second is a callback function.

Load a single dependency

//加载模块 main，并在加载完成时，执行指定回调seajs.use(‘./main‘, function(main) { main.init();});

Load multiple dependencies

//并发加载模块 a 和模块 b，并在都加载完成时，执行指定回调seajs.use([‘./a‘, ‘./b‘], function(a, b) { a.init(); b.init();});

Here the parameters of A and B in the function are returned, corresponding to the interface one by one exposed by the previous module. Sometimes it may only be necessary to use the interface of B, but also to write the A parameter. What is exposed interface below will be explained.

Module development

Here is the point, in fact, is also very simple is a writing standard (CMD) just.

// 所有模块都通过 define 来定义define(function(require, exports, module) { // 通过 require 引入依赖 var $ = require(‘jquery‘); var Spinning = require(‘./spinning‘); // 通过 exports 对外提供接口 exports.doSomething = ... // 或者通过 module.exports 提供整个接口 module.exports = ...});

The module is packaged through the Define () method, and the internal pain over require () method introduces the required dependent files (modules). (You can also introduce a. css file Oh ~)

The module is preferably object-oriented, so that the interface of the module can be easily exposed in the end exports.doSomething module.exports . If you are writing the JQ plugin, you do not need this feature, because your interface is written in jquery objects. If you do not need to provide an interface, you can also not use these two properties Oh!

In fact, there are several other parameters in the Define method, which we cannot use in general. See the official API specifically.

Summary

In fact, the basic use of SEAJS is so simple, daily use enough, before the crossing network of 5 minutes of the tutorial is not read, and then think really is 5 minutes to learn ah, the perception is too low--| |

Precautions

1. The function dependencies within the module must be clearly accounted for, preventing the module from loading before the function relies on loading. It also enhances the module's independence.
2. When introducing Seajs, it's a good idea to <script> add an ID to the tag to quickly access the tag (which I used when the module was merged).
3. There are also previous references to using the seajs.use() . HTML page to write JS when there are multiple modules dependent, need to use exposed interface to let the parameters correspond to it.

---restore content ends---

We want a page to be introduced as needed, and what functionality the page needs to introduce. Now there are two main tools, AMD Standard REQUIREJS, CMD specification Seajs.

What is Seajs

1. Seajs is a loader http://yslove.net/seajs/
   
   
2. Follow the CMD specification for modular development, relying on the automatic loading, configuration of concise and clear.

3. Compatibility

   • Chrome
   • Firefox
   • Safari 3.2+
   • Opera
   • IE 5.5+

Basic Application Import Seajs Library

1. Go to the official website to download the latest Seajs file, http://seajs.org/docs/#downloads
2. Introduce SEAJS at the end of the page:
   <script src="/site/script/sea.js"></script>

3. Then write the configuration and entrance of the module underneath it.

   // seajs 的简单配置seajs.config({  base: "../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" }});// 加载入口模块seajs.use("../static/hello/src/main");

Configuration and entry

Here the meanings of the configuration and the entrance are explained.

Configuration

The path and alias of the SEAJS are typically modified on the configuration.

The path to the Seajs is relative to the Seajs file that was introduced earlier . If this is the directory structure:

examples/  |-- index.html  |  `--about  |     |-- news.html  |  `-- script        |-- seajs.js |-- jquery.js `-- main.js

We usually if we on the index.html reference main.js path should be written like this script/main.js , from news.html reference main.js will write this way ../script/main.js .

And in the SEAJS is relative to the Seajs file, all direct use main.js is OK, is not very convenient?

Since it's so convenient, what needs to be configured in what situation? The general situation is not to be used. But if your path is particularly deep or if you want to do a path mapping, it will work. Here are a few common configurations.

  seajs . config ({//sea.js The underlying path (modify this is not the path is not relative to the Seajs file) base: Span class= "hljs-string" > ' http://example.com/path/to/base/', //alias configuration (file is represented by a variable, Resolve path level too deep and implement path mapping) alias: { ' Es5-safe ':  ' Gallery/es5-safe/0.9.3/es5-safe ',  ' JSON ':  ' Gallery/json/1.0.2/json ',  ' jquery ':  ' jquery/jquery/1.10.1/jquery '},//path configuration (with variable representation of path, Resolve problem with path level too deep) paths: { ' gallery ':  ' Https://a.alipayobjects.com/gallery '});            

See more

Entrance

The portal is loaded and what files need to be loaded (the module loader) is introduced here. sea.js After the download is complete, the Portal module is loaded automatically.

seajs.use("abc/main");  //导入seajs.js同级的abc文件夹下的main.js模块的（后缀名可略去不写）

Seajs.use () has another way to use it.

Sometimes we write a simple single page does not want to write a single JS file for it, choose to directly put the JS code on the page, SEAJS through the seajs.use() implementation of this. receive two parameters the first is a file dependency (a single string array can be used, multiple arrays are required), and the second is a callback function.

Load a single dependency

//加载模块 main，并在加载完成时，执行指定回调seajs.use(‘./main‘, function(main) { main.init();});

Load multiple dependencies

//并发加载模块 a 和模块 b，并在都加载完成时，执行指定回调seajs.use([‘./a‘, ‘./b‘], function(a, b) { a.init(); b.init();});

Here the parameters of A and B in the function are returned, corresponding to the interface one by one exposed by the previous module. Sometimes it may only be necessary to use the interface of B, but also to write the A parameter. What is exposed interface below will be explained.

Module development

Here is the point, in fact, is also very simple is a writing standard (CMD) just.

// 所有模块都通过 define 来定义define(function(require, exports, module) { // 通过 require 引入依赖 var $ = require(‘jquery‘); var Spinning = require(‘./spinning‘); // 通过 exports 对外提供接口 exports.doSomething = ... // 或者通过 module.exports 提供整个接口 module.exports = ...});

The module is packaged through the Define () method, and the internal pain over require () method introduces the required dependent files (modules). (You can also introduce a. css file Oh ~)

The module is preferably object-oriented, so that the interface of the module can be easily exposed in the end exports.doSomething module.exports . If you are writing the JQ plugin, you do not need this feature, because your interface is written in jquery objects. If you do not need to provide an interface, you can also not use these two properties Oh!

In fact, there are several other parameters in the Define method, which we cannot use in general. See the official API specifically.

Summary

In fact, the basic use of SEAJS is so simple, daily use enough, before the crossing network of 5 minutes of the tutorial is not read, and then think really is 5 minutes to learn ah, the perception is too low--| |

Precautions

1. The function dependencies within the module must be clearly accounted for, preventing the module from loading before the function relies on loading. It also enhances the module's independence.
2. When introducing Seajs, it's a good idea to <script> add an ID to the tag to quickly access the tag (which I used when the module was merged).
3. There are also previous references to using the seajs.use() . HTML page to write JS when there are multiple modules dependent, need to use exposed interface to let the parameters correspond to it.

Simple use of Seajs