Seajs教程

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 = ...

});

时间: 2024-08-29 18:22:15

Seajs教程的相关文章

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

原文: 资源 免费的计算机编程类中文书籍 免费编程书籍 计算机科学论文 codeparkshare Python初学者书籍.视频.资料.社区推荐 Python资料汇总 app应用推荐 码农周刊整理 500 Lines or Less 一些不错的代码 前端 node.js中文资料导航 了不起的Nodejs Nodejs的各种资源 AngularJS-Learning-zh_CN 一些关于 AngularJS 的博客,文章,视频,书籍等 了不起的React React的各种资源 腾讯移动Web前端知

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

SeaJS入门教程系列之使用SeaJS(二) 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-03我要评论 这篇文章主要介绍了SeaJS入门教程系列之使用SeaJS,着重介绍了SeaJS的使用方法.关键方法的使用等,需要的朋友可以参考下 下载及安装 要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置.SeaJS项目目前托管在GitHub上,主页为 https://github.com/seajs/seajs/ .可以到其git库的buil

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

一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾.这个例子包含如下文件: 1.index.html——主页面.2.sea.js——SeaJS脚本.3.init.js——init模块,入口模块,依赖data.jquery.style三个模块.由主页面载入.4.data.js——data模块,纯json数据模块,由init载入.5.jquery.js——jquery模块,对 jQuery库的模块化封装,由init载入.6.s

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

前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载.SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑.SeaJS可以与jQuery这类框架完美集成.使用SeaJS可以

前端资源教程合集

综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 En类资源汇总 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS函数式编程指南 JavaScript Promise迷你书

简单的使用Seajs

什么是Seajs Seajs是一个加载器 http://yslove.net/seajs/ 遵循 CMD 规范模块化开发,依赖的自动加载.配置的简洁清晰. 兼容性 Chrome 3+ Firefox 2+ Safari 3.2+ Opera 10+ IE 5.5+ 基本应用 导入Seajs库 去官网下载最新的seajs文件, http://seajs.org/docs/#downloads 在页尾引入seajs: <script src="/site/script/sea.js"

seajs模块压缩问题

在优化整理项目代码时,想使用seajs来把代码模块化.看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么问题.等一同事说把代码打包个放到设备上去测试一下,发现怎么也跑不起来,郁闷了. 于是单步调试一把,发现模块一直加不进来.看了一下seajs的原码,明白了是怎么回事. define模块解析依赖有两种途径,一种是从define(id, deps, factory)中的deps来:还有一种是解析define代码,从require中来.来看一下代码: 1 Module.defi

迷你MVVM框架 avalonjs 入门教程(司徒正美)

迷你MVVM框架 avalonjs 入门教程 关于AvalonJs 开始的例子 扫描 视图模型 数据模型 绑定属性与动态模板 作用域绑定(ms-controller, ms-important) 模板绑定(ms-include) 数据填充(ms-text, ms-html) 类名切换(ms-class, ms-hover, ms-active) 事件绑定(ms-on,……) 显示绑定(ms-visible) 插入绑定(ms-if) 双工绑定(ms-duplex) 样式绑定(ms-css) 数据绑

用spm2构建seajs项目的过程

前言 Javascript模块化规范有CommonJs规范,和主要适用于浏览器环境的AMD规范,以及国内的CMD规范,它是SeaJs遵循的模块化规范.因为以前项目中用SeaJs做过前端的模块管理工具,所以这里总结一下自己的使用心得. 在试用SeaJs和官方推荐的CMD包管理工具——Spm2.x的过程中,遇到了很多高低版本不兼容和配置参数没弄明白的问题,后来在网上各处找资料才大概弄懂.这里我强调一下版本,是因为可能有的同学项目开始较早,用了以前版本的Seajs,再去看Seajs官网的API有些地方