芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
1

YUI 2: YAHOO Global Object

作者 芒果/分类 代码/发布于 2010-02-19 18:45

YAHOO 全局对象 (YAHOO Global Object) 提供了一个单独的、被所有 YUI 框架代码所依赖的全局命名空间。每个使用 YUI 框架的页面必须包含它,并且必须在任何 YUI 组件出现之前被包含。

YAHOO 全局对象也包含了一些贯穿整个框架的方法。

入门

YAHOO 全局对象必须在任何 YUI 脚本文件载入之前被包含。

<!-- YAHOO Global Object source file -->
<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js"></script>
<!-- Additional source files go here -->

使用 YAHOO 对象的 Utility 方法

YAHOO.namespace
YAHOO.lang
YAHOO.lang.hasOwnProperty
YAHOO.lang.extend
YAHOO.lang.augment
YAHOO.log
YAHOO_config and YAHOO.env
YUI Module Names

YAHOO.namespace

YAHOO 对象自动创建了 YAHOO.util, YAHOO.widget, YAHOO.env, YAHOO.tool 和 YAHOO.example 五个命名空间。这些命名空间是为 YUI 框架本身所保留的。附加的命名空间用于创建基于 YUI 框架的自定义应用程序架构。

// Creates a namespace for "myproduct1"
YAHOO.namespace("myproduct1");
YAHOO.myproduct1.Class1 = function(info) {
    alert(info);
};

// Creates a namespace for "myproduct2", and for "mysubproject1"
YAHOO.namespace("myproduct2.mysubproject1");
YAHOO.myproduct2.mysubproject1.Class1 = function(info) {
    alert(info);
};

YAHOO.lang

YAHOO.lang 包含了 YUI 框架中所使用的 JavaScript 语言工具和扩展。

// true, an array literal is an array
YAHOO.lang.isArray([1, 2]);

// false, an object literal is not an array
YAHOO.lang.isArray({"one": "two"});

// however, when declared as an array, it is true
function() {
    var a = new Array();
    a["one"] = "two";
    return YAHOO.lang.isArray(a);
}();

// false, a collection of elements is like an array, but isn't
YAHOO.lang.isArray(document.getElementsByTagName("body"));

// true, false is a boolean
YAHOO.lang.isBoolean(false);

// false, 1 and the string "true" are not booleans
YAHOO.lang.isBoolean(1);
YAHOO.lang.isBoolean("true");

// null is null, but false, undefined and "" are not
YAHOO.lang.isNull(null); // true
YAHOO.lang.isNull(undefined); // false
YAHOO.lang.isNull(""); // false

// a function is a function, but an object is not
YAHOO.lang.isFunction(function(){}); // true
YAHOO.lang.isFunction({foo: "bar"}); // false

// true, ints and floats are numbers
YAHOO.lang.isNumber(0);
YAHOO.lang.isNumber(123.123);

// false, strings that can be cast to numbers aren't really numbers
YAHOO.lang.isNumber("123.123");

// false, undefined numbers and infinity are not numbers we want to use
YAHOO.lang.isNumber(1/0);

// true, objects, functions, and arrays are objects
YAHOO.lang.isObject({});
YAHOO.lang.isObject(function(){});
YAHOO.lang.isObject([1,2]);

// false, primitives are not objects
YAHOO.lang.isObject(1);
YAHOO.lang.isObject(true);
YAHOO.lang.isObject("{}");

// strings
YAHOO.lang.isString("{}"); // true
YAHOO.lang.isString({foo: "bar"}); // false
YAHOO.lang.isString(123); // false
YAHOO.lang.isString(true); // false

// undefined is undefined, but null and false are not
YAHOO.lang.isUndefined(undefined); // true
YAHOO.lang.isUndefined(false); // false
YAHOO.lang.isUndefined(null); // false

YAHOO.lang.hasOwnProperty

当遍历一个作为哈希表的对象时,YAHOO.lang.hasOwnProperty 用于过滤直接添加到对象原型上的属性。除 Safari 以外,该功能在所有 A 级浏览器中都得到了原生支持。由于 YUI 中所有的 hasOwnProperty 方法都具有一定的预见性,因此推荐使用它。如果本地浏览器支持原生方法,则 YAHOO.lang.hasOwnProperty 会优先调用。

// this is what we are protecting against
Object.prototype.myCustomFunction = function(x) {
    alert(x);
}

var o = {};
o["foo"] = "bar";
o["marco"] = "polo";

// this is where we need the protection
for (var i in o) {
    if (YAHOO.lang.hasOwnProperty(o, i)) {
        alert("good key: " + i);
    } else {
        alert("bad key: " + i);
    }
}

YAHOO.lang.extend

YAHOO.lang.extend 为建立继承对象的原型、构造、超类 (superclass) 属性,提供了一个简单的机制。能防止继承对象的构造方法 (例如,超类) 被执行两次。在 YUI 2.8.0r4 版本中,YAHOO.lang.extend 已被迁移至 YAHOO.lang 包。YAHOO.extend 是不建议使用的 YAHOO.lang.extend 别名。

YAHOO.namespace("test");

YAHOO.test.Class1 = function(info) {
    alert("Class1: " + info);
};

YAHOO.test.Class1.prototype.testMethod = function(info) {
    alert("Class1: " + info);
};

YAHOO.test.Class2 = function(info) {
    // chain the constructors
    YAHOO.test.Class2.superclass.constructor.call(this, info);
    alert("Class2: " + info);
};

// Class2 extends Class1.  Must be done immediately after the Class2 constructor
YAHOO.lang.extend(YAHOO.test.Class2, YAHOO.test.Class1);

YAHOO.test.Class2.prototype.testMethod = function(info) {
    // chain the method
    YAHOO.test.Class2.superclass.testMethod.call(this, info);
    alert("Class2: " + info);
};

var class2Instance = new YAHOO.test.Class2("constructor executed");
class2Instance.testMethod("testMethod invoked");

YAHOO.lang.augment

YAHOO.lang.augment 提供了将一个对象的原型属性应用到另一个对象的代码重用方法。YAHOO.augment 是不建议使用的 YAHOO.lang.augment 别名。

<!-- debugger output for environments without "console" -->
<div id="consoleelement">&nbsp;</div>
////////////////////////////////////////////////////////////////////////////
// The ConsoleProvider example will log to the console if available, or a
// div with id="consoleelement" if the console is not available
////////////////////////////////////////////////////////////////////////////
YAHOO.example.ConsoleProvider = function() { };
YAHOO.example.ConsoleProvider.prototype = {
    log: function(msg) {
        // use the error console if available (FF+FireBug or Safari)
        if (typeof console != "undefined") {
            console.log(msg);
        // write the msg to a well-known div element
        } else {
            var el = document.getElementById("consoleelement");
            if (el) {
                el.innerHTML += "

" + msg + "

";
            }
        }
    }
};

////////////////////////////////////////////////////////////////////////////
// Define a class that should be able to write debug messages
////////////////////////////////////////////////////////////////////////////
YAHOO.example.ClassWithLogging = function() { };
YAHOO.lang.augment(YAHOO.example.ClassWithLogging, YAHOO.example.ConsoleProvider);

////////////////////////////////////////////////////////////////////////////
// Try it out
////////////////////////////////////////////////////////////////////////////
var c = new YAHOO.example.ClassWithLogging();
c.log("worked");

YAHOO.log

YAHOO.log 包含在 Yahoo 全局对象中,即便 YUI 日志记录组件 (YUI Logger Control) 未载入页面,也能确保日志代码可以在任何 YUI 代码环境中被包含。当你从项目移除调试组件时,这可以防止出现错误。如果日志记录组件可用,YAHOO.log 执行 YAHOO.widget.Logger.log 方法;否则不做任何事情。查看日志记录组件文档以获得更多信息。

YAHOO.namespace("test");

YAHOO.test.Class1 = function(info) {
    YAHOO.log("Class1: " + info, "error", "Class1");
};

YAHOO_config and YAHOO.env

YAHOO.env 包含了浏览器环境信息。尤其包含了已经在网页上加载的所有 YUI 组件信息。该数据可以被任何使用 YAHOO.env.getVersion 的组件访问,对于那些动态加载的 YUI 环境非常有用。

你可以在 YAHOO_config 中定义一个回调函数,每次当一个新的 YUI 模块被植入页面时,回调函数即刻执行。完美替代采用轮询技术载入 YUI 组件的方法。被定义为 YAHOO_config.listener 的回调方法,将获得包含以下信息的对象参数:

property type description
name string The name of the YUI component that has just loaded. The name is an arbitrary string corresponding to a YUI component. Current YUI component names can be found in the YUI Module Names section below.
version string The version in use (e.g., “2.8.0r4”).
build number The build number of the current version. This is a continuously incremented integer that will grow larger with each version of the library.
versions array An array containing the string version information for all versions of this component that have been registered during the current page session. This can help identify issues that were the result of multiple versions of a module on the page.
builds array An array containing the numeric build information for all versions of this component that have been registered during the current page session.
mainClass object The principal object/class for the registered component. This object will have been stamped with its current version and build information. If mainClass.VERSION != version or mainClass.BUILD != build, multiple versions of pieces of the library have been loaded, potentially causing issues.

YUI Module Names

每个 YUI 组件都有一个相应的模块名称,在 YUI 代码中作为唯一标识符来使用。例如,Event Utility (事件工具包) 被称为 “event”。YAHOO 全局对象和其他组件 (如 YUILoader 工具包) 都使用了这些独一无二的模块名称。以下是 YUI 框架的所有模块名称。

YUI Component Module Name
Animation Utility animation
AutoComplete Control autocomplete
Base CSS Style Foundation base
Button Control button
Calendar Control calendar
Carousel Control carousel
Charts Control charts
Color Picker Control colorpicker
Connection Manager connection
Cookie Utility cookie
Container Family Core (Module, Overlay) containercore
Container Family (Module, Overlay Panel, Tooltip, Dialog, SimpleDialog) container
DataSource Utility datasource
DataTable Control datatable
Dom Collection dom
Drag & Drop Utility dragdrop
Rich Text Editor editor
Element Utility element
Event Utility event
Fonts CSS fonts
Get Utility get
Grids CSS Kit grids
Browser History Manager history
ImageLoader Utility imageloader
ImageCropper Control imagecropper
JSON Utility json
Layout Manager layout
Logger Control logger
Menu Control menu
Paginator paginator
Profiler profiler
ProfilerViewer Control profilerviewer
ProgressBar Control progressbar
Resize Utility resize
Reset CSS reset
Selector Utility selector
Simple Editor simpleeditor
Slider Control slider
Storage Utility storage
Swf Utility swf
SwfDetect Utility swfdetect
SwfStore Utility swfstore
StyleSheet Utility stylesheet
TabView Control tabview
TreeView Control treeview
Uploader Control uploader
YAHOO Global Object yahoo
YUI Loader Utility yuiloader
YUI Test yuitest

在以下扩展代码示例中,YAHOO_config 对象被用于在 YUI 组件加载时注册一个事件监听:

<html>
<head>
<script type="text/javascript">

// will be called each time a module is loaded
function mycallback(info) {

    // see the table in the documentation above for
	// the contents of the info object passed in here
	// as your argument. 

    alert(info.name + " loaded");

    // once the logger is on the page we can get to work
    if (info.name == "logger") {
        YAHOO.widget.Logger.enableBrowserConsole()
        var l = new YAHOO.widget.LogWriter("(");

        YAHOO.example.EnvTest = function() {
            function log(msg,cat) {
                var c=c||"info";
                YAHOO.log(msg,c,"LangTest");
            }

            return {
                init: function() {
                    new YAHOO.widget.LogReader("logoutput");
                    log("init");
                },

                showInfo: function(e, module){
                    // YAHOO.env.getVersion returns the same data
                    // object that YAHOO_config.listener receives
                    var info = YAHOO.env.getVersion(module);

                    log("name: " + info.name);
                    log("version: " + info.version);
                    log("build: " + info.build);
                    log("versions: " + info.versions);
                    log("builds: " + info.builds);
                    log("mainClass version: " + info.mainClass.VERSION);
                }
            };
        } ();

        YAHOO.util.Event.addListener(window, "load", YAHOO.example.EnvTest.init);
        YAHOO.util.Event.addListener("showeventbutton", "click", YAHOO.example.EnvTest.showInfo, "event");
    }
}

YAHOO_config = {
    listener: mycallback
};

</script>
<script src = "../src/js/YAHOO.js" ></script>
<script src = "../../build/event/event.js" ></script>
<script src = "../../build/dom/dom.js" ></script>
<script src = "../../build/dragdrop/dragdrop.js" ></script>
<script src = "../../build/logger/logger.js" ></script>
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
<style> #logoutput {float: right}</style>
</head>
<body>
<input type="button" id="showeventbutton" value="show event version" />
<div id="logoutput"></div>
</body>
</html>

英文原稿:YUI 2: YAHOO Global Object | Yahoo! Developer Network
翻译整理:YUI 2: YAHOO Global Object | 芒果

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/yui-2-yahoo-global-object/" title="YUI 2: YAHOO Global Object" rel="bookmark">YUI 2: YAHOO Global Object | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 1 条群众意见

  1. ?
    YUI 2: YAHOO Global Object | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-05-02 22:36

    […] 转载至:YUI 2: YAHOO Global Object | 芒果小站 分类: css, 其它 标签: 临时 X-UA-Compatible,IE8 兼容模式透明图片的 CSS Alpha 滤镜方法CSS 样式切换的实现方法CSS Hacks for IE,IE 也可以很完美腾讯首页顶部整屏导航 BugCSS 3.0 参考手册(中文版)关于 HTML5 应用现状与前景的思考 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #1

下面我简单说几句