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



  • 相关阅读:
    C#获取当前堆栈的各调用方法列表
    JS | 你真的会用 console.log 吗?
    antd form表单自定义验证
    C# 如何去空格
    CSS 网络安全字体
    Surface Book 3真是太快了
    Waypoints
    es6 去掉空格_js去除字符串中的所有空格(包括前后,中间存在的所有空格)
    Facebook 新一代 React 状态管理库 Recoil
    独处时必看悬疑推理剧大全
  • 原文地址:https://www.cnblogs.com/cly84920/p/4426949.html
Copyright © 2020-2023  润新知