SeaJs.ppt

SeaJs 模块加载器、前段的CommonJs 基础知识 快速入门 常用语法 高级扩展 资源 基础知识 CommonJs 官方JavaScript标准定义的API是为了构建基于浏览器的应用程序，但是对于普通应用程序使用的API并没有任何规范。这个背景下引入了CommonJs来规范化普通程序的开发，最终目标是实现类似Java的标准库。 SeaJs SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制，解决JavaScript中代码对象依赖，同时提供了便利的加载机制。 快速入门(1) 下载SeaJs 引入SeaJs script?src=“js/sea.js?id = “sea” type=text/javascript?charset=utf-8?data-main=js/init/script?? 红色部分表明初始加载模块为js/init.js，可选。 蓝色部分为seajs加入ID便于其快速定位自身，提高性能，官方推荐加上。 快速入门(2) 定义模块(example.js) define(function(require, exports, module) { exports.sayHello = function() { alert(‘Hello world‘); }; }); 使用模块 seajs.use(./example, function(example) { ????????? ?example.sayHello(); ???? }); 常用语法(1) 定义模块 define(id?, deps?, factory); 官方强烈推荐不要设定?id?和?dependencies?参数，由加载器自动处理。 Factory参数为模块的工厂函数。模块初始化时，会调用且仅调用一次该工厂函数。factory 函数在调用时，会始终传入三个参数：require、exports 和 module， 这三个参数在所有模块代码里可用。 define(function(require, exports, module) { }); 常用语法(2) require 访问其他模块提供的 API，即获得依赖。 define(function(require) { var a = require(./a); a.doSomething(); }); 它接受 模块标识 作为唯一参数。 常用语法(3) exports 向外提供模块的 API，即定义对外的接口。 define(function(require, exports) { exports.foo = bar; exports.doSomething = function() {}; }); 除了给?exports?对象增加成员，还可以使用?return?向外提供 API. define(function(require, exports) { return { doSomething: function() {}; }; }); return可以直接返回函数而非对象。 常用语法(4) module 存储模块的元信息，包含如下信息： module.id: 当前模块的唯一标识 module. Dependencies: 依赖列表 module.exports： 可以对export参数进行自定义（继承..） module.constructor: 为所有的module参数对象添加一些公用 属性或方法。 常用语法(5) 使用模块 seajs.use(‘moduleId, function(moduleHandler) { moduleHandler.doSomething(); }); seajs.use函数接受2个参数，其中第一个参数为模块的标识，第二个参数为回调函数。回调函数可选，其参数为模块的引用句柄。 高级扩展(1) 使用未模块化的第三方库(e.g jQuery) define(function(){ /* jQuery源代码 */ return $.noConflict(); }); var $ = require(“jquery”); $(“#id”).click(…….); 高级扩展(2) 模块载入 可以使用require.async方法进行异步加载，参数和功能都与require方法一致。