API 快速参考

该页面列举了 Sea.js 的常用 API。只要掌握这些用法,就可以娴熟地进行模块化开发。

seajs.config

用来对 Sea.js 进行配置。

seajs.config({

// 设置路径,方便跨目录调用

paths: {

'arale': 'https://a.alipayobjects.com/arale',

'jquery': 'https://a.alipayobjects.com/jquery'

},

// 设置别名,方便调用

alias: {

'class': 'arale/class/1.0.0/class',

'jquery': 'jquery/jquery/1.10.1/jquery'

}

});

seajs.use

用来在页面中加载一个或多个模块。

// 加载一个模块

seajs.use('./a');

// 加载一个模块,在加载完成时,执行回调

seajs.use('./a', function(a) {

a.doSomething();

});

// 加载多个模块,在加载完成时,执行回调

seajs.use(['./a', './b'], function(a, b) {

a.doSomething();

b.doSomething();

});

define

用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:

define(function(require, exports, module) {

// 模块代码

});

require, exports 和 module 三个参数可酌情省略,具体用法如下。

require

require 用来获取指定模块的接口。

define(function(require) {

// 获取模块 a 的接口

var a = require('./a');

// 调用模块 a 的方法

a.doSomething();

});

require.async

用来在模块内部异步加载一个或多个模块。

define(function(require) {

// 异步加载一个模块,在加载完成时,执行回调

require.async('./b', function(b) {

b.doSomething();

});

// 异步加载多个模块,在加载完成时,执行回调

require.async(['./c', './d'], function(c, d) {

c.doSomething();

d.doSomething();

});

});

exports

用来在模块内部对外提供接口。

define(function(require, exports) {

// 对外提供 foo 属性

exports.foo = 'bar';

// 对外提供 doSomething 方法

exports.doSomething = function() {};

});

module.exports

与 exports 类似,用来在模块内部对外提供接口。

define(function(require, exports, module) {

// 对外提供接口

module.exports = {

name: 'a',

doSomething: function() {};

};

});

SeaJS使用说明

在页面中加载模块

在 hello.html 页尾,通过 script 引入 sea.js 后,有一段配置代码:

// seajs 的简单配置

seajs.config({

base: "../sea-modules/",

alias: {

"jquery": "jquery/jquery/1.10.1/jquery.js"

}

})

// 加载入口模块

seajs.use("../static/hello/src/main")

sea.js 在下载完成后,会自动加载入口模块。页面中的代码就这么简单。

模块代码

这个小游戏有两个模块 spinning.js 和 main.js,遵循统一的写法:

// 所有模块都通过 define 来定义

define(function(require, exports, module) {

// 通过 require 引入依赖

var $ = require('jquery');

var Spinning = require('./spinning');

// 通过 exports 对外提供接口

exports.doSomething = ...

// 或者通过 module.exports 提供整个接口

module.exports = ...

});

Seajs教程的更多相关文章

  1. seajs教程(一):基本用法

    介绍 SeaJS 是一个适用于 Web 浏览器端的模块加载器.使用 SeaJS,可以更好地组织 JavaScript 代码. Sea.js 遵循 CMD 规范,模块化JS代码.依赖的自动加载.配置的简 ...

  2. Seajs教程 配置文档

    seajs.config Obj alias Obj 别名配置,配置之后可在模块中使用require调用require('jQuery'); seajs.config({ alias:{ 'jquer ...

  3. 思考 ”前端开发人员都在关注的 GitHub 资源“

    点这里 原文: 资源 免费的计算机编程类中文书籍 免费编程书籍 计算机科学论文 codeparkshare Python初学者书籍.视频.资料.社区推荐 Python资料汇总 app应用推荐 码农周刊 ...

  4. SeaJS入门教程系列之使用SeaJS(二)

    SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJ ...

  5. SeaJS入门教程系列之SeaJS介绍(一)

    前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装 ...

  6. SeaJS入门教程系列之完整示例(三)

    一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件: 1.index.html——主页面.2.sea.j ...

  7. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  8. 用spm2构建seajs项目的过程

    前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具, ...

  9. 快速上手seajs——简单易用Seajs

    快速上手seajs——简单易用Seajs   原文  http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...

随机推荐

  1. KMP算法,Boyer-Moore算法

    http://www-igm.univ-mlv.fr/~lecroq/string/node19.html 首先看普通的串的模式匹配算法开始讲起,才能更深入的了解KMP算法及其优点. 1. 普通的串的 ...

  2. 【最短路】埃雷萨拉斯寻宝(eldrethalas) 解题报告

    问题来源 BYVoid魔兽世界模拟赛 [问题描述] 一万两千年前,当精灵还是在艾萨拉女王的统治下的时候,辛德拉就是是女王手下一名很有地位的法师了.他受任建造了一座城市,来保存女王的法师们进行魔法研究的 ...

  3. python 代码格式化工具:YAPF

    学习资料: https://github.com/google/yapf 背景 现在的大多数 Python 代码格式化工具(比如:autopep8 和 pep8ify)是可以移除代码中的 lint 错 ...

  4. RabbitMQ-优先级(priority)队列/消息

    就像在日常生活中,事情有轻重缓急一样.我们对于需要处理的消息也有这样的需求. 例如重要的消息我要尽快的得到处理,当然我们可以给重要的消息开个“VIP通道”,但是VIP数量很多,并且VIP也分层次呢? ...

  5. SpringBoot 配置文件 application.properties(二)

    mvc spring.mvc.async.request-timeout设定async请求的超时时间,以毫秒为单位,如果没有设置的话,以具体实现的超时时间为准,比如tomcat的servlet3的话是 ...

  6. 代码讲解Android Scroller、VelocityTracker

    在编写自定义滑动控件时常常会用到Android触摸机制和Scroller及VelocityTracker.Android Touch系统简介(二):实例详解onInterceptTouchEvent与 ...

  7. Eclipse debug经常使用基本技巧

    1.F5单步调试,步入,进入函数体内部 2.F6单步调试.步过.不进入函数体 3.F7返回 4.F8运行到最后 5.退出时.右键点击右上角Debug选择退出就可以 $(function () { $( ...

  8. 第四篇:R语言数据可视化之折线图、堆积图、堆积面积图

    折线图简介 折线图通常用来对两个连续变量的依存关系进行可视化,其中横轴很多时候是时间轴. 但横轴也不一定是连续型变量,可以是有序的离散型变量. 绘制基本折线图 本例选用如下测试数据集: 绘制方法是首先 ...

  9. CDOJ 92 Journey(LCA&RMQ)

    题目连接:http://acm.uestc.edu.cn/#/problem/show/92 题意:给定一棵树,最后给加一条边,给定Q次查询,每次查询加上最后一条边之后是否比不加这条边要近,如果近的话 ...

  10. IntentFilter

    当Intent在组件间传递时,组件如果想告知Android系统自己能够响应和处理哪些Intent,那么就需要用到IntentFilter对象. 顾名思义,IntentFilter对象负责过滤掉组件无法 ...