Home > Web Front-end > JS Tutorial > Seajs simple documentation provides a simple and ultimate modular development experience_Seajs

Seajs simple documentation provides a simple and ultimate modular development experience_Seajs

WBOY
Release: 2016-05-16 15:05:37
Original
1376 people have browsed it

Unofficial documents are compiled from the text and examples of our own official documents for quick reference.

Why use Sea.js?

Sea.js pursues a simple and natural way of writing and organizing code, and has the following core features:

Simple and friendly module definition specification: Sea.js follows the CMD specification and can write module code like Node.js.
Natural and intuitive code organization: automatic loading of dependencies and concise and clear configuration allow us to enjoy coding more.
Sea.js also provides commonly used plug-ins, which are very helpful for development, debugging and performance optimization, and have rich extensible interfaces.

Compatibility

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

Chrome 3+ 
Firefox 2+ 
Safari 3.2+
Opera 10+ 
IE 5.5+ 

Sea.js can run on the mobile side, including Hybrid mode apps. In theory, Sea.js can run on any browser engine.

seajs.configObject

alias Object

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' }
});
Copy after login

define(function(require, exports, module) {
  //引用jQuery模块
  var $ = require('jquery');
});
Copy after login

paths Object

Set the path to facilitate cross-directory calls. By flexibly setting the path, you can specify a directory without affecting the base.

seajs.config({
  //设置路径
  paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
  },

  // 设置别名,方便调用
  alias: {
    'underscore': 'gallery/underscore'
  }
});
Copy after login
define(function(require, exports, module) {
  var _ = require('underscore');
   //=> 加载的是 https://a.alipayobjects.com/gallery/underscore.js
});
Copy after login

vars Object

Variable configuration. In some scenarios, the module path can only be determined at runtime. In this case, you can use vars variables to configure it.

vars configures the variable value in the module identifier, and {key} is used to represent the variable in the module identifier.

seajs.config({
  // 变量配置
  vars: {
    'locale': 'zh-cn'
  }
});
Copy after login
define(function(require, exports, module) {
 var lang = require('./i18n/{locale}.js');
   //=> 加载的是 path/to/i18n/zh-cn.js
});
Copy after login

map Array

This configuration can map and modify the module path, and can be used for path conversion, online debugging, etc.

seajs.config({
  map: [
    [ '.js', '-debug.js' ]
  ]
});
Copy after login
define(function(require, exports, module) {
  var a = require('./a');
  //=> 加载的是 path/to/a-debug.js
});
Copy after login

preload Array

Using the preload configuration item, you can load and initialize the specified module in advance before loading the ordinary module.

Empty strings in preload will be ignored.

// 在老浏览器中,提前加载好 ES5 和 json 模块
seajs.config({
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ]
});
Copy after login

Note: The configuration in preload needs to wait until use before loading. For example:

seajs.config({
  preload: 'a'
});

// 在加载 b 之前,会确保模块 a 已经加载并执行好
seajs.use('./b');
Copy after login

Preload configuration cannot be placed in module files:

seajs.config({
  preload: 'a'
});

define(function(require, exports) {
  // 此处执行时,不能保证模块 a 已经加载并执行好
});
Copy after login

debug Boolean

When the value is true, the loader will not remove dynamically inserted script tags. Plug-ins can also decide the output of log and other information based on debug configuration.

baseString

When Sea.js parses the top-level identifier, it will be parsed relative to the base path.

Note: Generally, please do not configure the base path. It is often simpler and more consistent to place sea.js in the appropriate path.
charsetString | Function

When getting the module file, the charset attribute of the

Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template