`
qqlanxin
  • 浏览: 583 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

YUI学习笔记1

    博客分类:
  • JS
阅读更多
用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 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

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

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

    yui3-master.zip

    通过“yui3-master.zip”这个压缩包,开发者不仅可以了解到YUI3的基本架构,还可以通过阅读源码来学习和掌握JavaScript的最佳实践,提升自身的前端开发能力。无论是初学者还是经验丰富的开发者,都能从中受益匪浅。...

    yui 资源包

    1. **模块化**:YUI采用AMD(Asynchronous Module Definition)模块加载机制,允许异步加载和依赖管理,使得代码组织清晰,便于维护。 2. **响应式设计**:YUI提供了响应式设计工具,如Grids布局系统,能根据屏幕...

    yui.rar 例子

    《深入理解YUI:基于“yui.rar 例子”的解析》 ...学习并掌握YUI,不仅可以提高开发效率,还能为用户提供更优质的交互体验。无论是新手还是经验丰富的开发者,都可以从YUI中获益,打造出更加健壮和高效的Web应用。

    yuicompressor-yui compressor

    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 %%...

    YUI3.6文档及示例

    1. **模块系统**:YUI3引入了模块化设计,允许开发者按需加载组件,降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,...

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

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

    关于yui的学习

    1. **YUI介绍**:解释YUI的起源、目标和在Web开发中的作用。 2. **主要组件**:详细列出YUI的主要组件,如Event(事件)、Element(元素操作)、Animation(动画)、IO(异步通信)等,以及它们的用途和用法。 3. **...

    YUI-EXT使用详解

    1. **组件(Components)**:YUI-EXT的核心就是组件,每个组件都是一个自包含的、可重用的UI元素,如按钮、面板、树形视图等。这些组件都有自己的生命周期,包括创建、初始化、渲染和销毁等阶段,便于开发者进行控制...

    yahoo3.0 YUI Examples

    1. **YUI 3.0架构**:YUI 3采用了模块化设计,允许开发者按需加载组件,降低了页面加载时间。每个模块都有独立的命名空间,避免了全局变量污染。 2. **核心组件**:YUI 3的核心组件包括事件处理、DOM操作、动画效果...

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

    YUI 2.7提供的文档详尽介绍了每个组件的用法,包括API参考、教程和示例代码,对于初学者来说是极好的学习资源。通过文档,开发者可以快速上手,并理解如何将YUI应用到实际项目中。同时,示例代码有助于直观地展示...

    yui_2.9.0前端UI

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

    yuicompressor-2.4.8.jar

    1. 安装yuicompressor插件:在Idea的插件市场搜索并安装yuicompressor相关的插件。 2. 配置项目构建:在项目的构建配置中添加yuicompressor的任务,指定输入文件路径、输出文件路径以及压缩级别等参数。 3. 运行构建...

    yui_3.8.1.zip

    1. **模块系统**:YUI 3.8.1采用CommonJS规范,通过YUI.use()方法按需加载模块,降低初始页面加载时间。此外,还支持AMD(异步模块定义)模式,适应不同的开发需求。 2. **事件处理**:YUI提供了一套完整的事件系统...

    YUI3.7.3 最新版本 带API

    1. **模块系统**:YUI3引入了CommonJS风格的模块系统,允许开发者通过`YUI.use()`方法加载所需模块,实现按需加载,减少页面初始化时的加载量。 2. **事件处理**:YUI3提供了强大的事件系统,支持DOM事件、自定义...

    YUI.rar_html_javascript YUI_yui_yui javascript

    1. **模块化设计**:YUI采用模块化的结构,允许开发者按需加载所需的组件,减少页面加载时间,提高性能。 2. **跨浏览器兼容性**:YUI经过精心设计,确保在主流浏览器上都能正常运行,包括IE、Firefox、Chrome、...

Global site tag (gtag.js) - Google Analytics