Seajs 简易文档 提供简单、极致的模块化开发体验


Posted in Javascript onApril 13, 2016

非官方文档,整理来自己官方文档的文字与实例,方便速查。

为什么使用 Sea.js ?

Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:

简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。
自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。

兼容性

Sea.js 具备完善的测试用例,兼容所有主流浏览器:

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

Sea.js 可运行在 Mobile 端,包括 Hybrid 模式的 App 上。理论上,Sea.js 可以运行在任何浏览器引擎上。

seajs.configObject

alias Object

别名配置,配置之后可在模块中使用require调用 require('jquery');

 

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

 

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

 paths Object

设置路径,方便跨目录调用。通过灵活的设置path可以在不影响base的情况下指定到某个目录。 

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

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

vars Object

变量配置。有些场景下,模块路径在运行时才能确定,这时可以使用 vars 变量来配置。

vars 配置的是模块标识中的变量值,在模块标识中用 {key} 来表示变量。

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

map Array

该配置可对模块路径进行映射修改,可用于路径转换、在线调试等。

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

preload Array

使用preload配置项,可以在普通模块加载前,提前加载并初始化好指定模块。

preload中的空字符串会被忽略掉。

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

注意:preload中的配置,需要等到 use 时才加载。比如:

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

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

preload 配置不能放在模块文件里面:

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

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

debug Boolean

值为true时,加载器不会删除动态插入的 script 标签。插件也可以根据debug配置,来决策 log 等信息的输出。

baseString

Sea.js 在解析顶级标识时,会相对 base 路径来解析。

注意:一般请不要配置 base 路径,把 sea.js 放在合适的路径往往更简单一致。
charsetString | Function

获取模块文件时,<script> 或 <link> 标签的charset属性。 默认是utf-8

charset还可以是一个函数:

seajs.config({
  charset: function(url) {
    // xxx 目录下的文件用 gbk 编码加载
    if (url.indexOf('http://example.com/js/xxx') === 0) {
     return 'gbk';
    }

    // 其他文件用 utf-8 编码
    return 'utf-8';
  }
});

seajs.use Function
用来在页面中加载一个或多个模块。seajs.use(id, callback?)

// 加载一个模块
seajs.use('./a');

// 加载一个模块,在加载完成时,执行回调
seajs.use('./a', function(a) {
 a.doSomething();
});

// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a', './b'], function(a, b) {
 a.doSomething();
 b.doSomething();
});

注意:seajs.use 与 DOM ready 事件没有任何关系。如果某些操作要确保在 DOM ready 后执行,需要使用 jquery 等类库来保证。比如

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

注意:use方法第一个参数一定要有,但是可以是null,也可以是一个变量

var bootstrap = ['bootstrap.css', 'bootstrap-responsive.css', 'bootstrap.js'];

seajs.use(bootstrap, function() {
  //do something
});

seajs.cache Ojbect
通过 seajs.cache,可以查阅当前模块系统中的所有模块信息。

比如,打开 seajs.org,然后在 WebKit Developer Tools 的 Console 面板中输入 seajs.cache,可以看到:

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

这些就是文档首页用到的模块。展开某一项可以看到模块的具体信息,含义可参考:CMD 模块定义规范 中的 module 小节。

seajs.reslove Function
类似require.resolve,会利用模块系统的内部机制对传入的字符串参数进行路径解析。

seajs.resolve('jquery');
// => http://path/to/jquery.js

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

seajs.resolve 方法不光可以用来调试路径解析是否正确,还可以用在插件开发环境中。

seajs.data Object
通过 seajs.data,可以查看 seajs 所有配置以及一些内部变量的值,可用于插件开发。当加载遇到问题时,也可用于调试。

常见问题
关于模块标识

Seajs模块标识主要以小驼峰字符串、.或..

// 在 http://example.com/js/a.js 的 factory 中:
require.resolve('./b');
 // => http://example.com/js/b.js

// 在 http://example.com/js/a.js 的 factory 中:
require.resolve('../c');
 // => http://example.com/c.js

分为 相对 与 顶级 标识。以.或..开头,则为相对标识 。以小驼峰字符串开关,则为顶级标识。

// 假设 base 路径是:http://example.com/assets/

// 在模块代码里:
require.resolve('gallery/jquery/1.9.1/jquery');
 // => http://example.com/assets/gallery/jquery/1.9.1/jquery.js

关于路径

Seajs除了相对与顶级标识之外,还可以使用普通路径来加载模块。

就到当前页面的脚本分析(可以右键查看源码)

//sea.js的路径,即 base 路径,相对于当前页面
<script src="http://yslove.net/actjs/assets/sea-modules/seajs/2.1.1/sj.js"></script>

<script type="text/javascript">
//配置Seajs
seajs.config({
  alias: {
    //顶级标识,基于 base 路径
    'actjs': 'actjs/core/0.0.7/core.js',
      // => http://
    'position': 'actjs/util/0.0.2/position.js'
  }
});

seajs.config({
  alias: {
    //普通路径,相对于当前页面
    'affix': '../../actjs/assets/widget/src/widget-affix.js',

    //相对标识,相对于当前页面
    'init': './src/init.js'
  }
});
</script>

开始的时候会觉得Seajs的路径有点不习惯,由其是Base路径。切记Base路径就是sea.js的那个文件的上级路径,然后所有顶级标识,相对标识都是相对于这个Base来调整。 

Javascript 相关文章推荐
Bootstrap每天必学之日期控制
Mar 07 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
原生js编写autoComplete插件
Apr 13 #Javascript
JS中的eval 为什么加括号
Apr 13 #Javascript
jQuery操作属性和样式详解
Apr 13 #Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 #Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 #Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 #Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 #Javascript
You might like
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
jQuery使用方法
2017/02/04 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
js实现查询商品案例
2020/07/22 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
详解python做UI界面的方法
2019/02/27 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python 字符串常用方法汇总详解
2019/09/16 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
办公室文员工作自我鉴定
2014/09/19 职场文书
门市房租房协议书
2014/12/04 职场文书
人事文员岗位职责
2015/02/04 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技