文档章节

seajs的使用1.0

佣兵0926
 佣兵0926
发布于 2015/11/11 22:08
字数 778
阅读 168
收藏 3

1、引入seajs

<script src="sea.js"></script>

2、程序入口是一个use方法,2个参数,一个是主js引用,一个是回调方法

seajs.use("./xx.js", function(xxx) {

xxx.x(agrs);

});

3、模块定义方法:一个全局define()方法调用,方法的参数是一个匿名函数,所有逻辑写在函数体里

define(function(require, exports) {

//模块逻辑

});

一个js就是一个模块,一个模块里全文就是调用一个define方法,js文件名就是模块名。

匿名函数有2个参数require, exports

require用来引入外部依赖,exports向外部提供模块内的方法

但是这个参数不是固定的,假如只依赖不对外提供方法,那么只用require参数

如果当前模块即无依赖也不对外提供方法那么一个参数都可以不要

4、模块的引用

使用require方法:var mod = require("./xxoo"),参数为模块的路径,xxoo为模块名

5、外部如何调用模块内部的方法

在模块内部,给exports加静态方法:

exports.xxx = function(url, succCall) {

        //......

}

假如xxx方法是xxoo模块内部定义的方法,外部调用xxoo的xxx方法就是:

var mod = require("./xxoo");

mod.xxx(url,fun);

6、实例

实现功能:将指定元素背景变成指定颜色

将根据id获取元素的逻辑做成一个模块叫:getEle

设置颜色的逻辑模块是:main,main要依赖getEle

目录结构:

html:

<style type="text/css">
.box{width:200px;height:200px;background:#999;}
</style>

<div class="box" id="J_box"></div>
<script type="text/javascript" src="./sea/sea.js"></script>
<script type="text/javascript">
seajs.use("./main.js", function(xxx) {
	xxx.set("J_box","green");
});

</script>

main.js:

define(function(require, exports) {
	var get = require("./getEle");

	exports.set=function(str,color){
		var obj = get.$(str);
		obj.style.backgroundColor=color;
	}
});

getEle.js:

define(function(require, exports) {
	exports.$=function(str){
		return document.getElementById(str);
	}
});

代码完成后,打开index.html会看到一个红色的方块,那是因为程序的入口处设置了红色(原来是灰色#999):

seajs.use("./main.js", function(xxx) {
	xxx.set("J_box","green");
});

xxx是个句柄,它代表main模块,用来调用main模块对外提供的set方法

PS:本文使用seajs的方式比较山寨,要规范正确使用seajs还是要看官网,以后再慢慢看吧

参考:http://www.zhangxinxu.com/wordpress/2012/07/seajs-node-nodejs-spm-npm/

吐槽:看了不少人写的文章,介绍各种技术层面的文章,生怕自己说的东西太low,简单的不说,太细节的不说,高大上的概念,没有营养的吐槽一堆,再或者一堆你不懂的概念,你还没学会1+1=2,他就跟你说1*1=1,1*1=1几句讲完,又来说1/1也是等于1的,把你绕得云里雾里,像懂又不懂的,只觉得对方“很厉害的样子”,目的就达到了。开头和末尾还不忘加上“就是这么简单”,╮(╯▽╰)╭

© 著作权归作者所有

佣兵0926
粉丝 5
博文 56
码字总数 28941
作品 0
广州
私信 提问
一步步学会使用SeaJS 2.0

一步步学会使用SeaJS 2.0 1、SeaJS是什么? -------------------------------------------------- 1、SeaJS是什么? https://github.com/seajs/seajs/issues/547),详细说明了前端模块化。 ...

leon_rock
2014/04/05
6K
1
使用SeaJS实现模块化JavaScript开发

前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScrip...

green001
2014/04/01
143
2
使用SeaJS实现模块化JavaScript开发

前言 SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScrip...

i33
2013/03/15
349
0
SeaJs的模块定义、模块加载及模块依赖关系

SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式。SeaJS非常小巧,小巧在于压缩和gzip后体积只有4K,而且接口和方法也非...

Sephiroth
2012/03/12
2K
1
seajs通过module.constructor.prototype扩展公共方法

看了一遍关于《扩展SeaJS模块定义中的module参数的应用示例》讲得很不错!自己就尝试一下! http://limu.iteye.com/blog/1136712 https://github.com/seajs/seajs/issues/67 为了能够预加载公...

尐桀
2014/11/04
124
0

没有更多内容

加载失败,请刷新页面

加载更多

目标检测中 yolo 的mAP是什么含义?

mAP定义及相关概念 P => precision,即 准确率 R => recall,即 召回率 PR曲线 = >即 以 precision 和 recall 作为 纵、横轴坐标 的二维曲线。一般来说,precision 和 recall 是 鱼与熊掌 的...

小松1
5分钟前
1
0
用jdk1.8的断言来做非空判断

Assert.notNull(user, "没有获得登录用户信息"); 看源码如下: public static void notNull(Object object, String message) { if (object == null) { throw new IllegalArgum......

architect刘源源
9分钟前
2
0
免费节假日api每一时间更新 2020年 部分节假日安排

根据国务院办公厅关于2020年部分节假日安排的通知国办发明电〔2019〕16号.免费节假日api每一时间更新 2020年 部分节假日安排 http://tool.bitefu.net/jiari/ 各省、自治区、直辖市人民政府,...

xiaogg
12分钟前
3
0
2018NOIP各省一等奖分数线

提高组 普及组

SamXIAO
22分钟前
5
0
常见的PPT时间轴怎么制作,这几种方法你要知道

在PPT当中,时间轴是一个非常重要的一个版块,很多PPT会用它来表示公司的发展历程和项目进度。但是对于PPT时间轴的制作很多人做法是一条直线上添几个点,标注出事件就完成了,可是这样也太过...

TeFuiro
27分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部