YUI Global Object

YUI3:YUI Global Object
YUI模块是YUI3.x实现的单个核心依赖。在使用YUI的页面中都必须包括YUI,这是唯一的依赖文件。YUI模块包含加载功能和一个依赖计算器,允许其作为具体实现的一个seed。你提供一个所使用的YUI模块列表以及所有使用模块的代码;YUI将在执行你的代码之前通过一个优化的HTTP请求获取所有所需组件。当你可能在自己的实现中使用一些script和css加载组件,这个模块核心目的是作为一个复杂高效的模块实现可以完成的小的seed。
YUI模块创建了一个全局YUI对象。该对象是及时的,而且该对象用来为绑定特定功能模块创建YUI实例。一个页面可以共享同一个YUI实例或者也可以为页面中每块功能使用不同的狭隘的实例。
1. 准备
包含依赖文件
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

2. 使用YUI全局对象
1) 命名空间为什么改变?

 向后兼容性
 沙箱:允许创建即时的自定义命名空间YUI并只加载所需模块,
 版本问题
 更加动态化
 选择器:更基础的node处理;
 事件标准化

2) YUI Core:
YUI 全局对象是一个可初始化对象,允许你创建所需要数量的YUI实例。每个实例都完全可配置并随着所需模块加载。
YUI.use('node',function(Y){
Y.one('#demo');
});
所有以下功能在YUI核心都可用:array,core,lang,later,log,object,ua,yui,get,loader
3) Use方法
Use方法允许你加载所需模块到你的YUI实例中。你可以选择所需模块,而不需要加载页面不需要的模块。
UI().use('animation', function(Y) {
    // Y.Anim is available
});

YUI().use('*', function(Y) {
    // Implementation code
});
可以给use方法的最后一个参数传递一个函数。这个函数将在YUI所有所需模块加载完成后执行。如果页面不包括所需模块,这个步骤是必须的。
回调方法有一个被传过来的参数,这个参数就是我们处理的YUI实例。这个函数中,你知道所有模块都加载完成并都能使用。

Use方法的捷径:
YUI().use('dd-drop', 'anim', function(Y) {
    // Y.DD is available
    // Y.Anim is available
});

使用*加载所有的模块:
YUI().use('animation', function(Y) {
    // Y.Anim is available
});

静态加载vs动态加载
当检测到确实依赖文件时,YUI自动试图完成自身加载。当动态加载以来文件时,传给use的回调函数将会异步执行。如果你静态包含所有库(或者通过其他方式之前加载好的),use()方法的回调函数将同步执行。回调函数的目的就是执行是否同步不重要。如果动态加载的,代码立刻追踪use语句将无法访问任何的加载模块。你可以通过设置YUI配置引导bootstrap阻止YUI自动试图获取缺失依赖文件。

4) 模块列表

Module list:anim,attribute,base,collection,dd,dom,event,event-custom,io,json,node,async-queue

5) 使用YUI.add创建通用模块
YUI.add方法是静态全局方法,是第一组YUI模块的单一入口指针。这个方法寄存了模块,所以模块可以通过use方法获取YUI实例。模块寄存这种方法是在use阶段动态附属的,所以它们能被YUI沙箱完全保护。
在use阶段,传给YUI.add方法的函数被执行。它获得了一个YUI实例作为一个参数,这也可以用来为实例添加功能。
当手动为模块加添加包装,YUI Build Tool可以为你包装你的代码。
第三个参数是一个模块版本认证。这不是指你的目标YUI版本。
第四个参数是一个可选元数据对象。当YUI.add执行时被读取,如果这些信息没有提前通过元数据提供给yui实例,那么将用来填充依赖信息。依赖信息通过requires属性声明。Use属性描述了一个模块/子模块关系,通知YUI所需加载的模块。

6) 加载器


YUI({
       lang: 'ko-KR,en-GB,zh-Hant-TW', // languages in order of preference
       base: '../../build/', // the base path to the YUI install.  Usually not needed because the default is the same base path as the yui.js include file
       charset: 'utf-8', // specify a charset for inserted nodes, default is utf-8
       loadOptional: true, // automatically load optional dependencies, default false
       combine: true, // use the Yahoo! CDN combo service for YUI resources, default is true unless 'base' has been changed
       filter: 'raw', // apply a filter to load the raw or debug version of YUI files
       timeout: 10000, // specify the amount of time to wait for a node to finish loading before aborting
       insertBefore: 'customstyles', // The insertion point for new nodes
       // one or more external modules that can be loaded along side of YUI.  This is the only pattern
       // that was supported in 3.0.0 for declaring external modules.  3.1.0 adds 'groups' support,
       // which is an easier way to define a group of modules.  See below.
       modules:  {
           yui2_yde_datasource: {
               fullpath: 'http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/datasource/datasource-min.js'
           },
           yui_flot: {
               fullpath: 'http://bluesmoon.github.com/yui-flot/yui.flot.js',
               requires: ['yui2_yde_datasource']
           }
       },

       // one or more groups of modules which share the same base path and
       // combo service specification.
       groups: {
           // Note, while this is a valid way to load YUI2, 3.1.0 has intrinsic
           // YUI 2 loading built in.  See the examples to learn how to use
           // this feature.
           yui2: {
               combine: true,
               base: 'http://yui.yahooapis.com/2.8.0r4/build/',
               comboBase: 'http://yui.yahooapis.com/combo?',
               root: '2.8.0r4/build/',
               modules:  { // one or more external modules that can be loaded along side of YUI
                   yui2_yde: {
                       path: "yahoo-dom-event/yahoo-dom-event.js"
                   },
                   yui2_anim: {
                       path: "animation/animation.js",
                       requires: ['yui2_yde']
                   }
               }
           }
       }
}).use('dd', 'yui_flot', function(Y) {
    // All YUI modules required to get drag and drop to work are now loaded.
});


Lang:相关语言
Base:基路径
secureBase:安全路径
comboBase:组合服务基本路径
root:为组合服务前置模块名称的根路径
filter:结果链接。
combine:使用YUI组合服务减少加载附属文件的http请求数量
ignore:从不动态加载的模块列表
force:强制加载的模块
insertBefore:一个node的node或id
charset:动态node的字符集
jsAttributes:应用动态script的node的属性
cssAttributes:动态link的node的属性
timeout:当动态加载nodes超时时间,不设置时,为无
context:执行环境,为所有回调的执行环境
modules:模块定义列表,有效模块定义包括如下模块配置数据,name,type,path,fullpath,requires,optional,supersedes,after,roolup,lang
groups:module的增强配置,有base,comboBase,root,combine,modules(3.1.0)

7)lang
lang:提供YUI Library中javascript的共有和扩展
var Y = YUI();
// true, an array literal is an array
Y.Lang.isArray([1, 2]);

你可能感兴趣的:(JavaScript,json,应用服务器,Yahoo,yui)