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]

<!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>
<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>


<script type="text/javascript">
loader.require(['dom', 'event']);
if(init){
loader.onSuccess = init;
}
loader.insert();
</script>
</body>
</html>


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

[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方法没有加载其它组件,所以它的回调反而在前面那个之前触发。



原文地址:https://www.cnblogs.com/cly84920/p/4426949.html