YUI Global Object之YUI Core

这个例子演示如何使用YUI Core

创建一个YUI实例


代码
<html>
<body>
<div id="wrapper" style="width:100px;height:100px;background-color:Yellow;">
i am a div!
</div>

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui.js"></script>  
<script>
YUI().use(
'node'function(Y) {
//在此操作dom
    var wrapper= Y.one('#wrapper');
    Y.log(
'Found node.. Setting style');
    wrapper.setStyle(
'backgroundColor''#D00050');
    wrapper.set(
'innerHTML''<strong>Changed!</strong>');
});
</script>
</body>
</html>


如果node模块当前页面不存在,use方法将动态获取。如果需要动态加载,那么最后一个参数必须是用于加载完成之后的可执行的函数。不过不管是不是动态加载,这个函数都会执行。因此这是YUI所推荐的一种模式。

上例中的函数提供了一个YUI实例引用,因此我们可以在use内部完成所有工作,而不需要一个其它地方的外部引用。

下面是使用FireBug进行调试,去慢慢发现YUI实例的其他特性。

对wrapper监控发现它两个有趣的东西

_node对象:对应原生的dom节点

_yuid:"yui_3_0_0-2-12742840392619"

其他就是YUI一些封装的函数,就不详细介绍了,因为我也不大清楚。

对Y监控则发现大量对象属性:

Color、DOM、UA、config(包含doc和win应该是对应文档和窗口)等等,当然还有最基本id、version。这些对象属性咱们暂且不管,相信以后会接触到。

posted @ 2010-05-20 00:02  高凡凡高  阅读(242)  评论(0编辑  收藏  举报