阿当的博客

{九月 30, 2009} js中用于继承的函数extend——摘自《javascript设计模式》

这个方法摘自《javascript设计模式》，因为作者对YUI非常熟悉，所以方法的的思路和YUI一样。方法如下：

function extend(subClass,superClass){

var F = function(){};

F.prototype = superClass.prototype;

subClass.prototype = new F();

subClass.prototype.constructor = subClass;

subClass.superclass = superClass.prototype;

if(superClass.prototype.constructor == Object.prototype.constructor){

superClass.prototype.constructor = superClass;

}

{九月 29, 2009} YUI的treeview组件——带checkbox类型的treeview如何实现disabled功能

这两天要实现树形目录，功能中要求树形目录带checkbox，而且有默认状态，默认带勾选的，不允许取消。

YUI带checkbox的treeview是通过样式实现的，其实是不带input的，所以没办法实现disabled。选中状态其实是通过挂上高亮的class，treeview本身提供禁止高亮的功能，但一旦禁止，就显示不了勾选，所以不能使用yui的禁止高亮功能完成disabled。

写了个demo，可以模拟disabled功能。如下：

====================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
<script src="http://assets.taobaocdn.com/yui/2.7.0/build/yuiloader/yuiloader-min.js" type="text/javascript"></script>
<script type="text/javascript">
var loader = new YAHOO.util.YUILoader();
</script>
</head>

<body class="yui-skin-sam">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/treeview/assets/skins/sam/treeview.css" />
<div id="tree" class="ygtv-checkbox">
<ul>
<li>1
<ul>
<li>1-1</li>
<li>1-2
<ul>
<li>1-2-1</li>
<li>1-2-2</li>
</ul>
</li>
</ul>
</li>
<li myid="345">2</li>
<li class="expanded">3
<ul>
<li yuiConfig=’{"highlightState":1}’>02/01/2009</li>
<li>3-2</li>
</ul>
</li>
</ul>
</div>
<input type="button" value="确定" id="btn" />
<script type="text/javascript">
function init(){
var tree1 = new YAHOO.widget.TreeView("tree");
tree1.subscribe(‘clickEvent’,tree1.onEventToggleHighlight);
tree1.setNodesProperty(‘propagateHighlightUp’,true);
tree1.setNodesProperty(‘propagateHighlightDown’,true);
tree1.render();
tree1.subscribe(‘dblClickEvent’,tree1.onEventEditNode);

YAHOO.util.Event.on("btn","click",function(){
var hiLit = tree1.getNodesByProperty(‘highlightState’,1);
if(hiLit[0].isLeaf ){
alert(hiLit[0].index);
}
});
}
</script>

==============================================================

{九月 02, 2009} YUI3学习笔记 ( 8 )

Y.namespace()方法

Y.namespace()的作用是提供命名空间，其实有原理很简单。例如Y.namespace("A.B");事实做了这样一件事：
Y.A = {}; Y.A.B = {};

.namespace()方法在YUI2中就已经有了，到了YUI3，其实它的作用削弱了。在YUI2中，YAHOO是一个全局作用域的对象，所以.namespace()创建的对象是全局作用域的，不在同一个函数作用域中，也可以互相访问。但到了YUI3，Y是一个函数内的作用域，不同函数之间用namespace()方法创建的对象是不能互相访问的。

demo如下：

============================================
[YUI2]

<body>
<script type="text/javascript">
function init(){
(function(){
YAHOO.namespace("A.B");
YAHOO.A.B.testStr = "hello world";
var num = 12345;
})();

(function(){
alert(YAHOO.A.B.testStr);
alert(num);
})();
}
</script>

=========================================

[YUI3]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">
YUI().use(function(Y){
Y.namespace("A.B");
Y.A.B.testStr = "hello world";
});

YUI().use(function(Y){
alert(Y.A.B.testStr);
});
</script>
</body>
</html>

=============================================

如果想在YUI3中也使用能跨函数的对象，我们只能在YUI().use()方法外定义一个全局变量，然后将它赋值给Y.namespace()生成的对象，用全局变量搭一个桥梁。但这种方法也有问题，因为YUI.use()方法是动态加载js文件的，其回调函数的触发时间是没有保障的，有可能第二个YUI().use()的回调在第一个YUI().use()的回调之前触发。下面是个demo:

=======================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
<script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">
YUI().use("dd","console",function(Y){
alert(1);
});

YUI().use(function(Y){
alert(2);
});
</script>
</body>
</html>

================================================

从流程上来看，应该是先弹出1，后弹出2，但事实上，因为use()方法是异步加载的，别起了别的线程，所以两个回调的触发时间并不由use()方法使用的前后来决定，因为后面那个use方法没有加载其它组件，所以它的回调反而在前面那个之前触发。