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:基于yui3-master.zip的探讨》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为Web开发者提供了丰富的功能和工具,以创建交互性强、性能优秀的网页应用。YUI3是...
《深入理解YUI 3.9.0 r2:界面设计与资源优化》 YUI,全称为Yahoo! User Interface Library,是由雅虎公司开发的一个开源JavaScript库,它旨在简化Web应用程序的构建,特别是对于界面设计和交互效果的实现。在3.9.0...
《深入理解YUI:基于“yui.rar 例子”的解析》 YUI,全称Yahoo! User Interface Library,是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、易于维护的网页应用。本篇文章将结合“yui.rar 例子”...
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yui...
1. DOM(Document Object Model):YUI的DOM模块提供了对HTML文档的高级操作,包括元素选择、属性修改、事件绑定等,简化了与DOM树的交互。 2. Event:事件处理是Web开发中的关键部分,YUI的Event模块提供了一套跨...
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
1. **YUI库**:了解YUI的基本结构、模块化设计和如何引入到项目中,是使用YUI表单验证器的前提。 2. **表单验证**:表单验证的常见规则包括非空检查、长度限制、格式验证(如邮箱、电话号码等)和自定义验证函数。 3...
YUI(Yahoo! User Interface Library)是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展的Web应用程序。YUI3.6版本是该库的一个重要里程碑,提供了丰富的组件和工具,以支持现代Web开发的...
- **DOM(Document Object Model)**:提供了丰富的DOM操作接口,便于进行元素的选择、创建、修改和删除。 - **动画(Animation)**:让开发者能够轻松创建复杂的动画效果,如淡入淡出、滑动等。 - **样式...
《yuicompressor-2.4.8.jar:前端优化与代码压缩的艺术》 在Web开发领域,优化前端性能是一项至关重要的任务,而yuicompressor-2.4.8.jar正是这样一款强大的工具,专为JavaScript代码压缩而设计,助力开发者实现...
**YUI-EXT使用详解** YUI-EXT是基于Yahoo! User Interface Library (YUI)的一个扩展库,专为构建富互联网应用程序(RIA)而设计。YUI-EXT提供了许多高级组件,如表格、菜单、窗口、表单、布局管理器等,极大地丰富...
《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。YUI,全称Yahoo! User Interface Library,是Yahoo开发的一个开放源代码的JavaScript库,旨在帮助开发者创建交互式...
**YUI 2.7:一个全面的JavaScript和CSS框架** YUI(Yahoo! User Interface Library)是雅虎公司开发的一个开源的JavaScript和CSS库,它为构建高性能、跨平台的Web应用程序提供了丰富的工具和资源。YUI 2.7是这个库...
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, ...
YUI(Yahoo! User Interface Library)是雅虎公司推出的一款开源JavaScript库,旨在帮助开发者构建高性能、可扩展的网络应用程序。YUI3.7.3是YUI的一个特定版本,它在发布时被视为最新的版本,提供了许多改进和新...
YUI JS CSS 打包工具是一款高效的前端资源优化工具,主要针对JavaScript (JS) 和 Cascading Style Sheets (CSS) 文件进行压缩和合并,以提升网页加载速度和整体性能。这款工具由雅虎(Yahoo!)开发,是其开源项目的...
《深入理解Yahoo UI Library(YUI)3.8.1版本》 Yahoo UI Library(简称YUI)是一款开源的JavaScript库,由Yahoo公司开发并维护,旨在帮助开发者构建高性能、可扩展的Web应用程序。YUI 3.8.1是其发展过程中的一个...
YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...
**YUI:Yahoo! User Interface Library** YUI是雅虎公司开发的一个开源JavaScript库,它为Web开发者提供了丰富的工具和组件,以构建高效、可扩展的网页应用。这个压缩包"YUI.rar"包含了YUI的源代码以及相关的HTML和...
**YUI Compressor:JavaScript与CSS的压缩利器** YUI Compressor是一款强大的JavaScript和CSS压缩工具,由雅虎(Yahoo!)开发并开源。它的主要功能是通过删除代码中的空白符、注释以及不必要的字符,将文件大小压缩...