sea.js
[TOC]
代表sea.js
一、CMD规范：
1、申明
一个模块就是一个文件，申明自己的文件js的时候，使用require(function(){})或者是require(factory)
2、 定义define
define是一个全局函数，用来定义模块的，就像是上边的申明一样
-
当参数是一个对象的时候，返回的就是json模版，或者是字符串模版
define({name:'baipu'})又或者是define（"my name is {{name}}"） -
参数是方法的时候，表示模块的构造方法
define(function(){ //这里是模块的代码 }) -
多个参数时候，define(id?,deps?,factory); id表示标识符，deps表示依赖，注意：这里的参数不属于cmd范畴，而是modules/transport规范
3、factory函数
3.1、require
require是facatory的第一个参数，表示一个方法，用来引用其他的参数
define(function(require,exports,module){
//一、直接加载
var a = require("./a");//这里引用js模块
//二、异步加载模块
var b= require.async(["./b,./c"],function(){
c.doSomeThing();
b.doSomeThine();
})；
//三、使用模块系统内部的路径解析机制来解析并返回模块路径。该函数不会加载模块，只返回解析后的绝对路径。
console.log(require("./d"));//http://example.com/path/to/d.js
//这里是模块的代码
});
3.2 exports
-
是一个对象，用来对外提供接口
define(function(require,exports,module){ //对外提供了foo变量 exports.foo = "123"; exports.dosomething = function(){}; });
-
通过return提供接口
define(function(require,exports,module){ //对外提供了foo变量 //inner code return { foo:"123", dosomething:function(){} } }); //可以简化 define({ foo:"123", dosomething:function(){} }) //注意以下为错误方法： define(function(require,exports,module){ //对外提供了foo变量 //inner code exports = { foo:"123", dosomething:function(){} } });
-
module.exports
//modules.export.define(function(require,exports,module){ //对外提供了foo变量 //inner code module.exports = { foo:"123", dosomething:function(){} } });
3.3 module
是一个对象，上面存储了与当前模块相关联的一些属性和方法。
-
Module.id//模块的唯一标示 -
module.uri//模块地址的绝对路径 -
module.dependencie//当前模块的依赖 -
module.exports对外提供的接口// 的赋值需要同步执行，不能放在回调函数 -
module.constructor、给所有module` 参数对象添加一些公用属性或方法
二、sea.js 规范
1、require
正确拼写require用require不更换名字如req 也不赋值如：var req = require;然后以后用req 也不覆盖 也就是require = function(){}
2、 use
直接加载启动
seajs.use('./main', function(main) {
main.init();
});
也可以批量加载
seajs.use(['./a', './b'], function(a, b) {
a.init();
b.init();
});
3、config
seajs.config({
// 别名配置
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'
},
// 路径配置
paths: {
'gallery': 'https://a.alipayobjects.com/gallery'
},
// 变量配置
vars: {
'locale': 'zh-cn'
},
// 映射配置
map: [
['http://example.com/js/app/', 'http://localhost/js/app/']
],
// 预加载项
preload: [
Function.prototype.bind ? '' : 'es5-safe',
this.JSON ? '' : 'json'
],
// 调试模式
debug: true,
// Sea.js 的基础路径
base: 'http://example.com/path/to/base/',
// 文件编码
charset: 'utf-8'
});
-
alias当模块标识很长时，可以使用alias来简化。 这样引用的时候就方便多了var $ = require('jquery'); -
paths当目录比较深，或需要跨目录调用模块时，可以使用paths来简化书写。seajs.config({ paths: { 'gallery': 'https://a.alipayobjects.com/gallery', 'app': 'path/to/app', } }); define(function(require, exports, module) { var underscore = require('gallery/underscore'); //=> 加载的是 https://a.alipayobjects.com/gallery/underscore.js var biz = require('app/biz'); //=> 加载的是 path/to/app/biz.js }); -
vars 模块路径在运行时才能确定，这时可以使用
vars变量来配置。seajs.config({ vars: { 'locale': 'zh-cn' } });define(function(require, exports, module) { var lang = require('./i18n/{locale}.js'); //=> 加载的是 path/to/i18n/zh-cn.js }); -
map该配置可对模块路径进行映射修改，可用于路径转换、在线调试等。seajs.config({ map: [ [ '.js', '-debug.js' ] ] }); define(function(require, exports, module) { var a = require('./a'); //=> 加载的是 path/to/a-debug.js }); -
Preload可以在普通模块加载前，提前加载并初始化好指定模块。
// 在老浏览器中，提前加载好 ES5 和 json 模块 seajs.config({ preload: [ Function.prototype.bind ? '' : 'es5-safe', this.JSON ? '' : 'json' ] });seajs.config({ preload: 'a' }); // 在加载 b 之前，会确保模块 a 已经加载并执行好 seajs.use('./b'); -
Debug. 值为
true时，加载器不会删除动态插入的 script 标签。插件也可以根据 debug 配置，来决策 log 等信息的输出。 -
Base 设置基础路径
-
Charset获取模块文件时，
<script>或<link>标签的charset属性。 默认是utf-8也可以是一个函数，看返回值
网友评论