`
xiaomogu
  • 浏览: 53080 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论
阅读更多
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]);
分享到:
评论

相关推荐

    yui3-master.zip

    《深入理解YUI3:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...

    yuicompressor-yui compressor

    yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...

    yui 资源包

    《深入理解YUI 3.9.0 r2:界面设计与资源优化》 YUI,全称为Yahoo! User Interface Library,是由雅虎公司开发的一个开源JavaScript库,它旨在简化Web应用程序的构建,特别是对于界面设计和交互效果的实现。在3.9.0...

    yui.zip_YUI aj_ajax_ajax java_javascript_javascript YUI Ajax

    标题中的"yui.zip_YUI aj_ajax_ajax java_javascript_javascript YUI Ajax"指的是YUI(Yahoo! User Interface Library)库的一个版本,该版本重点强调了AJAX(Asynchronous JavaScript and XML)技术的使用,同时也...

    yui.rar 例子

    《深入理解YUI:基于“yui.rar 例子”的解析》 YUI,全称Yahoo! User Interface Library,是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、易于维护的网页应用。本篇文章将结合“yui.rar 例子”...

    yui_2.6.0r2

    1. DOM(Document Object Model):YUI的DOM模块提供了对HTML文档的高级操作,包括元素选择、属性修改、事件绑定等,简化了与DOM树的交互。 2. Event:事件处理是Web开发中的关键部分,YUI的Event模块提供了一套跨...

    yui_2.5.2 类库

    - **DOM(Document Object Model)**:提供了丰富的DOM操作接口,便于进行元素的选择、创建、修改和删除。 - **动画(Animation)**:让开发者能够轻松创建复杂的动画效果,如淡入淡出、滑动等。 - **样式...

    yui_2.9.0前端UI

    YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...

    【YUI组件】基于YUI的表单验证器

    1. **YUI库**:了解YUI的基本结构、模块化设计和如何引入到项目中,是使用YUI表单验证器的前提。 2. **表单验证**:表单验证的常见规则包括非空检查、长度限制、格式验证(如邮箱、电话号码等)和自定义验证函数。 3...

    YUI3.6文档及示例

    YUI(Yahoo! User Interface Library)是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展的Web应用程序。YUI3.6版本是该库的一个重要里程碑,提供了丰富的组件和工具,以支持现代Web开发的...

    YUI类库2.9.0下载download

    YUI 2 is a JavaScript and CSS library with more than 30 unique components including low-level DOM utilities and high-level user-interface widgets. Currently at version 2.9.0, YUI 2 is robust, proven, ...

    yuicompressor-2.4.8.jar

    《yuicompressor-2.4.8.jar:前端优化与代码压缩的艺术》 在Web开发领域,优化前端性能是一项至关重要的任务,而yuicompressor-2.4.8.jar正是这样一款强大的工具,专为JavaScript代码压缩而设计,助力开发者实现...

    YUI-EXT使用详解

    **YUI-EXT使用详解** YUI-EXT是基于Yahoo! User Interface Library (YUI)的一个扩展库,专为构建富互联网应用程序(RIA)而设计。YUI-EXT提供了许多高级组件,如表格、菜单、窗口、表单、布局管理器等,极大地丰富...

    《YUI使用文档》汉语版的yui学习材料

    《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。YUI,全称Yahoo! User Interface Library,是Yahoo开发的一个开放源代码的JavaScript库,旨在帮助开发者创建交互式...

    YAHOO yui2.7 文档+ 代码+例子

    **YUI 2.7:一个全面的JavaScript和CSS框架** YUI(Yahoo! User Interface Library)是雅虎公司开发的一个开源的JavaScript和CSS库,它为构建高性能、跨平台的Web应用程序提供了丰富的工具和资源。YUI 2.7是这个库...

    YUI3.7.3 最新版本 带API

    YUI(Yahoo! User Interface Library)是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展的网络应用程序。YUI3.7.3是YUI的一个特定版本,它在发布时被视为最新的版本,提供了许多改进和新...

    YUI JS CSS 打包工具

    YUI JS CSS 打包工具是一款高效的前端资源优化工具,主要针对JavaScript (JS) 和 Cascading Style Sheets (CSS) 文件进行压缩和合并,以提升网页加载速度和整体性能。这款工具由雅虎(Yahoo!)开发,是其开源项目的...

    yui3.10.3最新版

    **YUI 3.10.3:一个强大的JavaScript库** YUI(Yahoo! User Interface Library)是一个开源的JavaScript库,由雅虎公司开发并维护,旨在帮助开发者构建富交互性和高性能的Web应用。YUI 3.10.3是这个库的一个重要...

    YUI 详细说明文档

    ### YUI 详细说明文档 #### 一、YAHOO工具库 YUI是一个由Yahoo!开发的强大且灵活的开源JavaScript框架,它包含了丰富的库和工具集,旨在帮助开发者更轻松地构建高质量的Web应用程序。YAHOO工具库是YUI的核心组成...

    yui_3.8.1.zip

    《深入理解Yahoo UI Library(YUI)3.8.1版本》 Yahoo UI Library(简称YUI)是一款开源的JavaScript库,由Yahoo公司开发并维护,旨在帮助开发者构建高性能、可扩展的Web应用程序。YUI 3.8.1是其发展过程中的一个...

Global site tag (gtag.js) - Google Analytics