轻轻谈一下seaJs——模块化开发的利器
“仅做一件事,做好一件事。”
这个应该就是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,优秀的前端样式预处理器
视差滚动的那些事儿
轻轻谈一下seaJs——模块化开发的利器的更多相关文章
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- seaJs模块化开发简单入门
随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJs.AMD.CMD等一系列规范,使前端发开趋向模块化.规范化.CMD模块化的代表之一就是国内开发 ...
- seajs模块化开发
seajs是一个起辅助作用的库,所以它可以更方便开发,而它可以解决以下问题: 1.命名问题,就是冲突 2.性能问题,就是只要一个功能,但却使用一个大插件中的一个小功能,所以要手动拆分出这个功能 3.j ...
- 2.精通前端系列技术之JavaScript模块化开发 seajs(一)
在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...
- JS模块化开发(一)——seaJs
模块化开发要解决的问题: 1.冲突 比如:多人协作开发时,不同js库中的函数重名问题 可以用命名空间解决: var module={} module.a=1; module.b=function(){ ...
- JS模块化开发:使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- JavaScript模块化开发库之SeaJS
SeaJS是一个很好的前端模块化开发库,源码不到1500行,压缩后才4k,质量极高.
- seajs进行模块化开发
seajs进行模块化开发 模块化前端开发入门指南(二) 2015-08-26 15:23 by paseo, 370 阅读, 0 评论, 收藏, 编辑 概览 使用seajs模块化加载器进行模块化开发, ...
- seajs的模块化开发--实践笔记
2017-04-02 SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.有效的解决复杂项目中命名冲突.依赖.性能等问题. SeaJS ...
随机推荐
- jquery上传图片
http://www.cnblogs.com/wutao/archive/2010/01/28/1658496.html http://www.cnblogs.com/cloudgamer/archi ...
- fuel iso光盘刻录机usb Driver 烧录
ISO image to a DVD or burn the IMG file to a USB drive For a bare-metal installation ipmitool, HP iL ...
- ceph for openstack快速部署实施
for el6 即centos6 1,添加ceph 官方yum源 [root@ruiy ~]# cat /etc/yum.repos.d/ceph.repo[ceph-noarch]name=Ceph ...
- AndroidUI 布局动画-为布局添加动画
除了可以为视图添加动画以外,还可以为视图的布局添加动画: <RelativeLayout xmlns:android="http://schemas.android.com/apk/r ...
- Eclipse快捷键大全(一)
Eclipse快捷键大全(一) 常用(系统默认): 1.Format (自动排版) : Ctrl+Shift+F 2.Organize Imports (自动导入) : Ctrl+Shift+O 3. ...
- java中文乱码解决之道(一)—–认识字符集
原文出处:http://cmsblogs.com/?p=1395 沉寂了许久(大概有三个多月了吧),LZ“按捺不住”开始写博了! java编码中的中文问题是一个老生常谈的问题了,每次遇到中文乱码LZ要 ...
- Linux下装Eclipse C/C++,以及环境配置
由于前些日子朋友搞个智能家居开发,用C语言写的.叫我装个CentOS(Linux中的一种)来进行开发,所以这几天都在摸索怎么装,当然,朋友也有给予一丁点帮助(可恶的色长.你叫我装东西,也不帮帮我),由 ...
- CSS 根据数据显示样式
在低版本IE时代,我们想让数据根据其值显示不同的样式可能需要直接从服务器端输出时为不同的数据添加相应的class.但现在,通过属性选择器+伪元素+属性选择符,这三个东西混合使用就可以让数据根据其值以不 ...
- Java设计模式--------建造者模式(Builder模式)
Builder模式定义:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. Builder模式是一步一步创建一个复杂的对象,它允许用户可以只通过指定复杂对象的类型和内容就可以构 ...
- JS 把 Wed Jul 15 2015 00:00:00 GMT+0800 转换成2015-07-15
function strlen(str) { var len = 0; for (var i = 0; i < str.length; i++) { var c = str.charCodeAt ...