码迷,mamicode.com
首页 > Web开发 > 详细

seajs的使用1.0

时间:2015-11-12 00:09:16      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

1、引入seajs

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

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

seajs.use("./main.js", function(test) {

test.bind(agrs);

});

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

define(function(require, exports) {

//模块逻辑

});

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

匿名函数有2个参数require, exports,应该还不止2个,反正起码要两个,

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

4、模块的引用

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

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

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

exports.xxx = function(url, succCall) {

        //......

}

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

var query = require("./queryRandom");

query.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模块对外提供的方法

PS:本文使用seaj的方式比较山寨,要规范正确使用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的,开头和末尾还不忘加上“就是这么简单”,╮(╯▽╰)╭

seajs的使用1.0

标签:

原文地址:http://my.oschina.net/710409599/blog/529114

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!