seaJS 使用随笔

来源：互联网发布：mac如何查看后台程序编辑：程序博客网时间：2024/06/14 07:37

seaJS 使用随笔

与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

SeaJS的作者是前淘宝UED,现支付宝前端工程师玉伯。

SeaJS本身遵循KISS（Keep It Simple, Stupid）理念进行开发，其本身仅有个位数的API，因此学习起来毫无压力。在学习SeaJS的过程中，处处能受到KISS原则的精髓——仅做一件事，做好一件事。

为什么使用 SeaJS

SeaJS 追求简单、自然的代码书写和组织方式，具有以下核心特性：

简单友好的模块定义规范：SeaJS 遵循CMD规范，可以像Node.js一般书写模块代码。
自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣。

SeaJS 还提供常用插件，非常有助于开发调试和性能优化，并具有丰富的可扩展接口。

兼容性

SeaJS 具备完善的测试用例，兼容所有主流浏览器：

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

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

下载

所有版本的 zip 包请在这里下载：seajs/tags
　　解压后，目录说明如下：

dist -- sea.js 等压缩好的文件，直接可用
　　docs -- 使用文档
　　lib -- 给 Node.js 用的版本
　　src -- 源码
　　tests -- 测试集
　　tools -- 压缩等工具，可查看 build.xml 得到源码合并顺序
　　Makefile -- 可执行构建、测试等命令

使用

使用 SeaJS，可以规范模块的书写格式、能自动处理模块的依赖，还非常有助于代码组织、开发调试和性能优化。SeaJS 期待能给你提供简单、极致的模块化开发体验。

SeaJS 遵循MIT 协议，无论个人还是公司，都可以免费自由使用。

注：如上内容引用自：http://baike.baidu.com/

一 . seaJs 相关配置

配置语法请查考：http://yslove.net/seajs/

二. 示例学习

目录结构图：

1. 导入Seajs库

2. 路径及jquery 库配置

seajs.config({
//设置路径，方便跨目录调用。通过灵活的设置path可以在不影响base的情况下指定到某个目录
paths: {
'javascript': 'http://10.33.23.4:8087/javascripts'
},
alias:{
'jquery': 'javascript/jquery-1.8.2.min.js',
charset:'utf-8'
},

//map Array

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

//原始路基等相关配置可不用改动

//路径转换（切换）

//在javascripts 同级目录下创建文件夹js_src,并把对应会映射到达js未加密文件放置在该目录下

map: [
['http://192.168.1.100:8087/javascripts', 'http://192.168.1.100:8087/js_src']

//配置后，原本应访问的路径： http://192.168.1.100:8087/javascripts/init.js 将变成配置映射的路径:

//http://192.168.1.100:8087/js_src/init.js
]
//调试切换

//map:[

// ['.js','-debug.js']

// 配置后原本应访问的文件：http://192.168.1.100:8087/javascripts/init.js将变为配置映射后的路径

//http://192.168.1.100:8087/javascripts/init-debug.js

// ]
});

注：

（1）默认下载的jquery库并不遵循seajs CMD规范, 索引引入jquery时会返回null/undefinde。

可以通过如下方式解决:

define(function () {
//jquery源代码

return $.noConflict();

});

3. 在页面中引入主库或模块

seajs.use('./javascripts/init', function (init) {
init.init();
});

或者：

seajs.use('./javascripts/init');

4. 自定义模块

init.js :

//seajs 通过define 语法定义模块

//工厂函数是模块的主体和重点。在只传递一个参数给define时（推荐写法），这个参数就是工厂函数，此时工厂函数的三个参数分别是：
//1.require——模块加载函数，用于记载依赖模块。
//2.exports——接口点，将数据或方法定义在其上则将其暴露给外部调用。
//3.module——模块的元数据。
//这三个参数可以根据需要选择是否需要显示指定。
//下面说一下module。module是一个对象，存储了模块的元信息，具体如下：
//1.module.id——模块的ID。
//2.module.dependencies——一个数组，存储了此模块依赖的所有模块的ID列表。
//3.module.exports——与exports指向同一个对象。

//3个参数名不能修改，也不能被重新定义。否则的话会影响错误加载的

define(function (require, exports, module) {

// 通过require 来引入符合cmd规范的第三方或自定义依赖模块
var doSome = require('/javascripts/doSome');
var $ = require('/javascripts/jquery-1.8.2.min');
doSome && doSome.show();
$ && console.log("$"+$("a").html());

//通过exports 向全局或指定作用域暴露方法(接口)或对象
exports.init = function(){
alert("特么，终于成功了....");
}
});

doSome.js

define(function (require, exports, module) {
exports.show = function () {
console.log("引用seajs ok!");
}
});

5. 页面完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="lib/sea.js"></script>
<script type="text/javascript">

seajs.config({
//设置路径
paths: {
'javascript': 'http://10.33.23.4:8087/javascripts'
},
alias:{
'jquery': 'javascript/jquery-1.8.2.min.js',
charset:'utf-8'
}
});

seajs.use('./javascripts/init', function (init) {
init.init();
});

</script>
</head>
<body>
<a href="javascript:">点击</a>
</body>
</html>

待续........

0 0