用js做了几个项目,感觉水平还是不够,决定重新学习一个js框架,好好研究下js。
框架选择了YUI,先从翻译YUI.JS做起吧,正好也提升下英语水平。
YUI.JS
YUI 3.8.1
/*
YUI模块包含创建YUI种子文件的部件。这里包括脚本加载机制、一个简单的队列、程序库的核心工具包。
*/
if (typeof YUI != 'undefined') {
YUI._YUI = YUI;
}
/*
YUI全局命名空间对象。这事所有YUI实例的构造函数。
这是一个自我实例化的工厂函数,意味着你不需要在在前面使用“new”操作符。你可以直接这样调用它:
YUI().use('*', function (Y) {
// Y is a new YUI instance.
});
但它总是像这样工作:
var Y = YUI();
“YUI”构造函数接收可变的配置对象,例如:
YUI({
debug: true,
combine: false
}).use('node', function (Y) {
// Y.Node is ready to use.
});
你可以从API文档中查看YUI构造函数所支持的所有配置属性列表。
如果一个全局的YUI对象已经被定义,已经存在的YUI对象将不会被覆盖,以保证已经定义的命名空间是保密的。
每一个YUI实例包括完整的定制事件支持,但只在事件系统有效时。
*/
上面的翻译有不少错误,有些单词搞不懂,比如preserved是嘛意思?猜了半天,将就翻译成“保密的”,先凑合吧,继续:
/*
@class YUI
@uses EventTarget
@constructor
@global
@param {Object} [config]* 0或更多个可选配置对象. 配置都存储在Y.config的属性中。查看config.html获取支持的属性列表。
**/
/*global YUI*/
/*global YUI_config*/
var YUI = function() {
var i = 0,
Y = this,
args = arguments,
l = args.length,
instanceOf = function(o, type) {
return (o && o.hasOwnProperty && (o instanceof type));
},
gconf = (typeof YUI_config !== 'undefined') && YUI_config;
if (!(instanceOf(Y, YUI))) {
Y = new YUI();
} else {
// 建立核心环境
Y._init();
/**
主配置可包含在一个非浏览环境的持续多行文本。它将首先被应用至所有环境的所有实例。
@例如:
YUI.GlobalConfig = {
filter: 'debug'
};
YUI().use('node', function (Y) {
// debug代码 });
YUI({
filter: 'min'
}).use('node', function (Y) {
// min代码
});
@property {Object} GlobalConfig
@global
@static
**/
if (YUI.GlobalConfig) {
Y.applyConfig(YUI.GlobalConfig);
}
/**
页面级别的配置将应用至现行页面的所有YUI实例。它应用在“YUI.GlobalConfig”之后,实例级别的配置之前。
@example
// 在YUI种子文件之前的一个单一全局变量
YUI_config = {
filter: 'debug'
};
YUI().use('node', function (Y) {
// debug files used here
});
YUI({
filter: 'min'
}).use('node', function (Y) {
// min files used here
});
@property {Object} YUI_config
@global
**/
if (gconf) {
Y.applyConfig(gconf);
}
// 绑定该实例指定的附加模块
if (!l) {
Y._setup();
}
}
if (l) {
// 每个实例可接收一到多个配置对象.
// 它们将作用在YUI.GlobalConfig 和 YUI_Config之后,
// 如果存在重复的属性,这里将覆盖之前的配置。.
for (; i < l; i++) {
Y.applyConfig(args[i]);
}
Y._setup();
}
Y.instanceOf = instanceOf;
return Y;
};
继续:
(function() {
var proto, prop,
VERSION = '3.8.1',
PERIOD = '.',
BASE = 'http://yui.yahooapis.com/',
/*
这些css样式名称不能被getClassName生成自从被使用时不是有效的。 这句没看明白。
*/
DOC_LABEL = 'yui3-js-enabled',
CSS_STAMP_EL = 'yui3-css-stamp',
NOOP = function() {},
SLICE = Array.prototype.slice,
APPLY_TO_AUTH = { 'io.xdrReady': 1, // 函数适用于可调用。
'io.xdrResponse': 1, // 这应该在构建时完成。
'SWF.eventHandler': 1 }, //
hasWin = (typeof window != 'undefined'),
win = (hasWin) ? window : null,
doc = (hasWin) ? win.document : null,
docEl = doc && doc.documentElement,
docClass = docEl && docEl.className,
instances = {},
time = new Date().getTime(),
add = function(el, type, fn, capture) {
if (el && el.addEventListener) {
el.addEventListener(type, fn, capture);
} else if (el && el.attachEvent) {
el.attachEvent('on' + type, fn);
}
},
remove = function(el, type, fn, capture) {
if (el && el.removeEventListener) {
// 在firefox将抛出异常
try {
el.removeEventListener(type, fn, capture);
} catch (ex) {}
} else if (el && el.detachEvent) {
el.detachEvent('on' + type, fn);
}
},
handleLoad = function() {
YUI.Env.windowLoaded = true;
YUI.Env.DOMReady = true;
if (hasWin) {
remove(window, 'load', handleLoad);
}
},
分享到:
相关推荐
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
《YUI使用文档》汉语版是一份详细的YUI学习材料,它涵盖了这个JavaScript库的核心功能和使用方法。YUI,全称Yahoo! User Interface Library,是Yahoo开发的一个开放源代码的JavaScript库,旨在帮助开发者创建交互式...
通过“yui3-master.zip”这个压缩包,开发者不仅可以了解到YUI3的基本架构,还可以通过阅读源码来学习和掌握JavaScript的最佳实践,提升自身的前端开发能力。无论是初学者还是经验丰富的开发者,都能从中受益匪浅。...
1. **模块化**:YUI采用AMD(Asynchronous Module Definition)模块加载机制,允许异步加载和依赖管理,使得代码组织清晰,便于维护。 2. **响应式设计**:YUI提供了响应式设计工具,如Grids布局系统,能根据屏幕...
《深入理解YUI:基于“yui.rar 例子”的解析》 ...学习并掌握YUI,不仅可以提高开发效率,还能为用户提供更优质的交互体验。无论是新手还是经验丰富的开发者,都可以从YUI中获益,打造出更加健壮和高效的Web应用。
SET JSFOLDER=D:\1 echo 正在查找 JavaScript, CSS ... chdir /d %JSFOLDER% for /r . %%a in (*.js *.css) do ( @echo 正在压缩 %%~a ... @java -jar %YUIFOLDER%\yuicompressor-2.4.2.jar --charset UTF-8 %%...
1. **模块系统**:YUI3引入了模块化设计,允许开发者按需加载组件,降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,...
1. **YUI库**:了解YUI的基本结构、模块化设计和如何引入到项目中,是使用YUI表单验证器的前提。 2. **表单验证**:表单验证的常见规则包括非空检查、长度限制、格式验证(如邮箱、电话号码等)和自定义验证函数。 3...
1. **YUI介绍**:解释YUI的起源、目标和在Web开发中的作用。 2. **主要组件**:详细列出YUI的主要组件,如Event(事件)、Element(元素操作)、Animation(动画)、IO(异步通信)等,以及它们的用途和用法。 3. **...
1. **组件(Components)**:YUI-EXT的核心就是组件,每个组件都是一个自包含的、可重用的UI元素,如按钮、面板、树形视图等。这些组件都有自己的生命周期,包括创建、初始化、渲染和销毁等阶段,便于开发者进行控制...
1. **YUI 3.0架构**:YUI 3采用了模块化设计,允许开发者按需加载组件,降低了页面加载时间。每个模块都有独立的命名空间,避免了全局变量污染。 2. **核心组件**:YUI 3的核心组件包括事件处理、DOM操作、动画效果...
YUI 2.7提供的文档详尽介绍了每个组件的用法,包括API参考、教程和示例代码,对于初学者来说是极好的学习资源。通过文档,开发者可以快速上手,并理解如何将YUI应用到实际项目中。同时,示例代码有助于直观地展示...
YUI 库,全称Yahoo! UI Library。是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两...
1. 安装yuicompressor插件:在Idea的插件市场搜索并安装yuicompressor相关的插件。 2. 配置项目构建:在项目的构建配置中添加yuicompressor的任务,指定输入文件路径、输出文件路径以及压缩级别等参数。 3. 运行构建...
1. **模块系统**:YUI 3.8.1采用CommonJS规范,通过YUI.use()方法按需加载模块,降低初始页面加载时间。此外,还支持AMD(异步模块定义)模式,适应不同的开发需求。 2. **事件处理**:YUI提供了一套完整的事件系统...
1. **模块系统**:YUI3引入了CommonJS风格的模块系统,允许开发者通过`YUI.use()`方法加载所需模块,实现按需加载,减少页面初始化时的加载量。 2. **事件处理**:YUI3提供了强大的事件系统,支持DOM事件、自定义...
1. **模块化设计**:YUI采用模块化的结构,允许开发者按需加载所需的组件,减少页面加载时间,提高性能。 2. **跨浏览器兼容性**:YUI经过精心设计,确保在主流浏览器上都能正常运行,包括IE、Firefox、Chrome、...