初涉YUI3

ayue222

浏览: 49625 次
性别:
来自: 北京

最近访客更多访客>>

zuzutang2

zcm1205

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

YUI Firebug json Yahoo Go

study.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>初涉YUI3</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<style type="text/css">
	#yuidemo {float:left;background:#00CCFF; border:1px dotted #000; padding:1em; width:40%;height:300px;}
	#yuidemo1 {float:left;background:#00FFCC; border:1px dotted #000; padding:1em; width:40%;height:300px;}
	#testLogger{position:absolute;right:10px;top:10px;}
	.yui-skin-sam .yui-console-entry-content{font-size:12px;}
	</style>

</head>
<body class="yui-skin-sam">
<div id="yuidemo">
	<div class="hd"></div>
	<div class="bd"></div>
	<div class="ft">
		<input type="button" class="btn" value="RUN" />
	</div>
</div>

<div id="yuidemo1">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div>
		<input type="button" class="btn" value="RUN" />
	</div>
	<div></div>
</div>
</body>
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui.js"></script>
<script type="text/javascript">
	YUI({modules:{
	        'study': {
	            fullpath: "study.js",
	            requires: ['dom','node']
	        }
	    }}).use('study', function(Y) {
		 Y.study.doButton('yuidemo',["#00ffcc"]);
		 Y.study.doButton('yuidemo1',["#00ccff"]);
	});
</script>
</html>

study.js:

YUI.add('study', function(Y) {
	Y.study={
		doButton:function(dModule){
	     	var Moudle='#'+dModule,btn=Y.one(Moudle+' .btn'),over=(arguments[1])?arguments[1][0]:"#00ffcc"||"#00ffcc";
			var go=function(){
				btn.detach();
				Y.all(Moudle+' div').setContent('bbb').addClass('comm');
				setTimeout(function(){Y.all(Moudle+' div').each(function(el,i){
					var bColor=(i%2==0)?'#dddddd':'#ffffff';
					el.setContent(i).setStyle('backgroundColor',bColor);
					el.on('mouseover',function(){this.setStyle('backgroundColor',over);});
					el.on('mouseout',function(){this.setStyle('backgroundColor',bColor);})
			    },'div')},2000);
			}
			btn.on('click',go);
		}
	}
}, '1.0.00');

       稍稍感受了一下YUI3的新特性，感慨就不发了。。。细细体会以上的code，只加载核心库（core），再按需引入各前置模块的特性令人耳目一新。
eg.

YUI(config).use("node", function(Y) {
    // TODO
});

我们来看看config参数：
base: the base path to the YUI install
charset: specify a charset for inserted nodes, default is utf-8
loadOptional: automatically load optional dependencies, default false combine: use the Yahoo! CDN combo service for YUI resources, default is true unless 'base' has been changed
filter: apply a filter to load the raw or debug version of YUI files
timeout: specify the amount of time to wait for a node to finish loading before aborting
insertBefore: The insertion point for new nodes
modules: { /* one or more external modules that can be loaded along side of YUI */
     "study": {
          fullpath: "study.js" ,
          require:['dom','node'] // require module
     },
     json2_org: {
          fullpath: "http://www.json.org/json2.js"
     }
}

YUI().add('demo-base',function(Y){
     Y.demo=function(){};
} , version , {requires:['node','event']});

YUI().add('demo', function(Y){} , version ,{use:['demo-base','demo-upgrade']})
add方法接受四個参数。
a.模塊名称；
b.模塊内容；
c.模塊版本（可能會提供自定義加载指定版本的模塊）；
d.控制變量。
控制變量有最关键的两個属性requires和use。当對模塊申明了requires的控制變量时，表示该模塊依赖于requires内指定模塊运行，yui會先加载所依赖的模塊，再执行我们的模塊，保證其运行时的完整和安全。而use则定义了模塊中整合的小模塊，由于yui3的粒度小，一個大的模塊可以通过use申明来整合小模塊。这样，在保證了框架的粒度劃分的同时也保證了整體性。

PS：大夥可以複雜化這個例子，然後觀察firebug中Net面板中該page加載的線程。。你會發現YUI3一個更大的秘密哦~~^_^。。。更多更強大的功能特性請移步到 http://developer.yahoo.com/yui/3/

1
顶

0
踩

分享到：

话说browser的脚本并行下载 | 基於YUI2.8的 JS版多文件上传

2009-12-11 13:44
浏览 1178
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

初涉YUI3

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

初涉YUI3

评论

发表评论

相关推荐

使用javascript动态创建SVG对象的问题

YUI3 事件

直接运行html的代码

JS正则表达式详解

如何在事件代理中正确使用 focus 和 blur 事件

如何判断脚本加载完成

JavaScript 获取事件对象的一个注意点

判断 iframe 是否加载完成的完美方法

JS将数字转换成三位逗号分隔的样式

YUI 3.0应用初探

JS iframe跨域自适应内容高度

话说browser的脚本并行下载

基於YUI2.8的 JS版多文件上传

自定义滚动条

javascript 整合的获取ID，className，tagName的方法

javascript 中绑定事件监听的函数【支持数组对象绑定】

判断指定对象是否存在于另一个对象的原型链中

基于yui3如何写模块（一）

Js 数组排序【支持对象】

如何避免Javascript事件绑定出现内存泄漏

最近访客更多访客>>