轻轻谈一下seaJs——模块化开发的利器 有趣的前端题目。看了不懊悔 移动端前端开发概述 浅谈 标签的语义化 浅谈鼠标滚轮事件 不积跬步无以至千里----高度自适应的textarea sass和less,优秀的前端样式预处理器 视差滚动的那些事儿 关于那些常见的坑爹的小bug
“仅做一件事,做好一件事。”
这个应该就是seaJs的精髓了。
我在自己的一些项目中使用过seaJs。对其算是了解一二。如今就班门弄斧。轻轻地谈一下。
首先上一段度娘的话:
“seaJs是一个遵循CommonJs规范的JavaScript模块载入框架,能够实现JavaScript的模块化开发及载入机制。与jQuery等JavaScript框架不同。SeaJS不会扩展封装语言特性,而仅仅是实现JavaScript的模块化及按模块载入。SeaJS的主要目的是令JavaScript开发模块化并能够轻松愉悦进行载入,将前端project师从繁重的JavaScript文件及对象依赖处理中解放出来。能够专注于代码本身的逻辑。SeaJS能够与jQuery这类框架完美集成。使用SeaJS能够提高JavaScript代码的可读性和清晰度。解决眼下JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。”
1.下载seaJs
下载url:https://github.com/seajs/seajs
我们能清楚地看到,docs是文档。dist是压缩好的、用于浏览器端的SeaJS代码;src则是源码。
package.json + Gruntfile.js就是Grunt构建工具所须要的文件。用来合并压缩等等。
看完代码结构,如今就開始说一下里面的基本使用方法。
2.seaJs的基本使用方法
2.1 用seajs.config来进行路径和文件依赖的配置。
譬如:
seajs.config({ // 别名配置 alias: { 'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe', 'json': 'gallery/json/1.0.2/json', 'jquery': 'jquery/jquery/1.10.1/jquery' }, // 路径配置 paths: { 'gallery': 'https://a.alipayobjects.com/gallery' }, // 变量配置 vars: { 'locale': 'zh-cn' }, // 映射配置 map: [ ['http://example.com/js/app/', 'http://localhost/js/app/'] ], // 预载入项 preload: [ Function.prototype.bind ?'' : 'es5-safe', this.JSON ? '' : 'json' ], // 调试模式 debug: true, // Sea.js 的基础路径 base: 'http://example.com/path/to/base/', // 文件编码 charset: 'utf-8' });
更加具体的配置 ,能够參考:https://github.com/seajs/seajs/issues/262
2.2 用seajs.use在页面中载入一个或多个模块,callback 參数可选。省略时,表示无需回调。
继续看代码:
// 载入模块 common,并在载入完毕时,运行指定回调 seajs.use('./common', function(main) { common.init(); }); // // 并发载入模块 x 和模块 y。并在都载入完毕时,运行指定回调 seajs.use(['./x', './y'], function(x, y) { x.init(); y.init(); });
2.3 用define定义模块和获取模块。
详细调用例如以下:
define(function(require, exports, module) { // 你要写的模块代码 });
2.4用require
获取指定模块的接口。
define(function(require) { // 获取模块 x 的接口 var x = require('./x'); // 调用模块 x 的方法 x.doSomething(); });
2.5 用require.async在模块内部异步载入一个或多个模块。
define(function(require) { // 异步载入一个模块,在载入完毕时。运行回调 require.async('./b', function(b) { b.doSomething(); }); // 异步载入多个模块,在载入完毕时。运行回调 require.async(['./c', './d'], function(c, d) { c.doSomething(); d.doSomething(); }); });ps:此段代码copy自官网參考文档。
2.6用exports在模块内部对外提供接口。
define(function(require, exports) { //这一句对外提供了一个属性todo exports.todo = 'wt'; });
3.注意和规范
肤浅地过了一遍主要的使用方法之后,接下来就说一下要注意的东西了。
3.1模块工厂构造方法的第一个參数 必须 命名为 require 。
// 错误! define(function(req) { // ... }); // 错误! define(function(r) { // ... }); // 正确! define(function(require) { // ... });
3.2不要给 require
又一次赋值或者不能把这个函数重命名。
// 错误 var yilai = require, a= yilai ("./mod"); // 错误 require = function() {}; // 错误 function todo(require) {} // 错误 function todo() { var require = function() {}; }
3.3require 的參数值不能是字符串直接量之外的其它变量。
// 错误! require(todo); // 错误! require("to-" + "do"); // 错误! require("todo".toLowerCase());
总结:使用 Sea.js。提高代码的可维护性。高效性。灵活性。粒子性和可移植性。总结得有点虚,可是seaJs确实给项目的开发带来了非常多的便利。
还不用seaJs。你就凹凸慢了。
注:此 文章參考了官网的非常多文章,编写而来。想知道得很多其它的童鞋。请点击这里:http://seajs.org/docs/#docs
Author: Alone
Antroduction: 高级前端开发project师
Sign: 人生没有失败。仅仅有没到的成功。
博主相关文章推荐:
移动端前端开发概述
浅谈 标签的语义化
浅谈鼠标滚轮事件
不积跬步无以至千里----高度自适应的textarea
sass和less,优秀的前端样式预处理器
视差滚动的那些事儿