初涉YUI3

最新推荐文章于 2024-06-01 16:15:46 发布

ayue225

最新推荐文章于 2024-06-01 16:15:46 发布

阅读量97

点赞数

分类专栏： JavaScript 文章标签： YUI Firebug json Yahoo Go

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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一個更大的秘密哦~~^_^。。。更多更強大的功能特性請移步到 [url]http://developer.yahoo.com/yui/3/[/url]

ayue225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初涉YUI3

study.html[code="java"] 初涉YUI3 #yuidemo {float:left;background:#00CCFF; border:1px dotted #000; padding:1em; width:40%;height:300px;} #yuidemo1 {float:left;background:#00FFCC...
复制链接

扫一扫