Seajs simple documentation provides simple and ultimate modular development experience _ Seajs

This article mainly introduces the simple documentation of Seajs, which provides a simple and ultimate modular development experience. Non-official documentation is used to organize the text and examples of your own official documents for convenient fast query. You can refer to unofficial documents to sort out the text and examples of your official documents for quick query.

Why is Sea. js used?

Sea. js pursues simple and natural code writing and organization methods and has the following core features:

Simple and user-friendly module definition specification: Sea. js follows the CMD specification and can write module code like Node. js.
The natural and intuitive Code Organization Method: Automatic dependency loading and concise and clear configuration allow us to enjoy coding more.
Sea. js also provides common plug-ins, which are very helpful for development and debugging, performance optimization, and rich extensible interfaces.

Compatibility

Sea. js has complete test cases and is compatible with all mainstream browsers:

Chrome 3 +
Firefox 2 +
Safari 3.2 +
Opera 10 +
Internet Explorer 5.5 +

Sea. js can run on Mobile terminals, including apps in Hybrid mode. Theoretically, Sea. js can run on any browser engine.

Seajs. configObject

AliasObject

Alias configuration. After configuration, you can use require in the module to call require ('jquery ');

seajs.config({  alias: { 'jquery': 'jquery/jquery/1.10.1/jquery' }});

Define (function (require, exports, module) {// reference jQuery module var $ = require ('jquery ');});

PathsObject

Set the path to facilitate cross-directory calls. You can specify a directory without affecting the base by setting the path flexibly.

Seajs. config ({// set the path paths: {'gallery ': 'https: // a.alipayobjects.com/gallery'}, // you can call alias: {'underscore ': 'gallery/underscore '}});

Define (function (require, exports, module) {var _ = require ('underscore '); // => load https://a.alipayobjects.com/gallery/underscore.js });

VarsObject

Variable configuration. In some scenarios, the module path can be determined at runtime. You can use the vars variable for configuration.

Vars configures the variable value in the module ID. {key} is used in the module ID to represent the variable.

Seajs. config ({// variable configuration vars: {'locale': 'zh-cn '}});

Define (function (require, exports, module) {var lang = require ('. /i18n/{locale }. js '); // => load path/to/i18n/zh-cn.js });

MapArray

This configuration can be used to map and modify the module paths, such as path conversion and online debugging.

seajs.config({  map: [    [ '.js', '-debug.js' ]  ]});

Define (function (require, exports, module) {var a = require ('./A'); // => load path/to/a-debug.js });

PreloadArray

You can use the preload configuration item to load and initialize a specified module in advance before loading a common module.

Null strings in preload are ignored.

// Load ES5 and seajs. config ({preload: [Function. prototype. bind? '': 'Es5-safe ', this. JSON? '': 'Json']});

Note: The configuration in preload will not be loaded until use. For example:

Seajs. config ({preload: 'A'}); // before loading B, ensure that module a has loaded and executed seajs. use ('./B ');

Preload configuration cannot be placed in the module file:

Seajs. config ({preload: 'A'}); define (function (require, exports) {// when executed here, it cannot be ensured that module a has been loaded and executed properly });

DebugBoolean

When the value is true, the loader does not delete the script tag that is dynamically inserted. The plug-in can also determine the output of log and other information based on the debug configuration.

BaseString

When parsing top-level identifiers, Sea. js parses these identifiers relative to the base path.

Note: Generally, do not configure the base path. Placing sea. js in a proper path is usually simpler and more consistent.
CharsetString | Function

When getting module files, script or The charset attribute of the tag. The default value is UTF-8.

Charset can also be a function:

Seajs. the files in the config ({charset: function (url) {// xxx directory are encoded with gbk to load if (url. indexOf ('HTTP: // example.com/js/xxx') = 0) {return 'gbk';} // return 'utf-8' encoded with UTF-8 for other files ';}});

Seajs. useFunction
It is used to load one or more modules on the page. Seajs. use (id, callback ?)

// Load a module seajs. use ('. /A'); // load a module. When loading is complete, run the callback seajs. use ('. /A', function (a) {. doSomething () ;}); // load multiple modules. When loading is complete, run the callback seajs. use (['. /','. /B '], function (a, B) {. doSomething (); B. doSomething ();});

Note: seajs. use has nothing to do with the DOM ready event. If you want to perform some operations after DOM ready, you need to use a class library such as jquery. For example

seajs.use(['jquery', './main'], function($, main) {  $(document).ready(function() {    main.init();  });});

Note: The first parameter of the use method must be available, but it can be null or a variable.

var bootstrap = ['bootstrap.css', 'bootstrap-responsive.css', 'bootstrap.js'];seajs.use(bootstrap, function() {  //do something});

Seajs. cacheOjbect
With seajs. cache, you can view information about all modules in the current module system.

For example, open seajs.org and enter seajs. cache in the Console panel of WebKit Developer Tools. You can see:

Object > http://seajs.org/docs/assets/main.js: x > https://a.alipayobjects.com/jquery/jquery/1.10.1/jquery.js: x > __proto__: Object            

These are the modules used on the document homepage. Expand an item to view the specific information of the module. For more information, see the module section in the CMD module definition specification.

Seajs. resloveFunction
Similar to require. resolve, path resolution is performed on input string parameters using the internal mechanism of the module system.

seajs.resolve('jquery');// => http://path/to/jquery.jsseajs.resolve('./a', 'http://example.com/to/b.js');// => http://example.com/to/a.js

The seajs. resolve method can be used not only to debug whether path Parsing is correct, but also in the plug-in development environment.

Seajs. dataObject
With seajs. data, you can view all seajs configurations and the values of some internal variables, which can be used for plug-in development. It can also be used for debugging when loading encounters problems.

FAQs
Module ID

The Seajs module ID is mainly a small camper string,... or ..

// In the factory of the http://example.com/js/a.js: require. resolve ('. /B '); // => http://example.com/js/ B .js// in factory of http://example.com/js/a.js: require. resolve ('.. /c '); // => http://example.com/c.js

It can be classified into relative and top-level identifiers. It starts with "..." and is a relative identifier. The top-level identifier is used to switch the string to a small hump.

// Assuming the base path is: http://example.com/assets/// in the module code: require. resolve ('gallery/jquery/1.9.1/jquery '); // => http://example.com/assets/gallery/jquery/1.9.1/jquery.js

About path

In addition to relative top-level identifiers, Seajs can also use common paths to load modules.

Go to the script analysis on the current page (right-click to view the source code)

// The path of sea. js, that is, the base path, relative to the current page