#1~ YUI Global Object

Burgos

于 2010-05-29 21:19:00 发布

阅读量383

点赞数

分类专栏： sendkey 文章标签： yui function animation logging object stylesheet

sendkey 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

建立一个YUI实例

YUI().use('node' ...

其中的 'node' 使得我们可以利用DOM进行操作;

use方法会动态调用任何'node'所需要但不在页面上元素.如果需要动态加载,那么use方法最近的参数应该是一个在所有加载完成后才运行的函数（换言之就是所有加载完成后才执行的函数）---如果这个函数存在，这个函数不管动态加载是否必需进行，都会执行。

所以，使用YUI的较好模式是:

YUI().use('node' function(Y) ...

这个函数(use)提供了一个指向YUI实例的引用,所以我们可以封装所有实现代码在use的声明中，而不需要另外保存一个指向实例的外部引用.

完整的例子(来自YUI官方例子)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>YUI Core</title>

</head>

<div class="exampleIntro">
<p>This example shows how to use the core of YUI.</p>

</div>

<div id="demo"></div>

<script>

YUI().use("node",

function(Y) {
    var node = Y.one('#demo');
    Y.log('Found node.. Setting style');
    node.setStyle('backgroundColor', '#D00050');
    node.set('innerHTML', '<strong>Changed!</strong>');
});
</script>

</body>
</html>

use方法中的Y.one('#demo")调用了demo节点,并且通过DOM进行了操作

-----------------------------------------------------------------------------------------------------------------------------------------

下载是在页面中直接include所有额外的依赖模块的方法，这样使得不用动态调用.

<script type="text/javascript" src="../../build/oop/oop.js"></script>
<script type="text/javascript" src="../../build/event-custom/event-custom.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/attribute/attribute.js"></script>
<script type="text/javascript" src="../../build/pluginhost/pluginhost.js"></script>
<script type="text/javascript" src="../../build/base/base.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/node/node.js"></script>

YUI().use('*',                                               //@ '*' 参数
function(Y) {
    var node = Y.one('#demo');
    var used = [];
    Y.each(Y.Env._attached, function(v, k) {
        used[used.length] = k;
    });
    used.sort();
    node.set('innerHTML', '<strong>Modules Loaded:</strong> ' + used.join(', '));
});
</script>

明显，use方法中的第一个参数 '*' 告诉use方法加载所有模块.

'*'是指代在页面内的所有模块的一个缩写，这样就可以避免使用冗长的模块名列表。

YUI().use('*' ...

你可以在'*'之后提供一个函数形参:这个函数会在YUI是列加载所有模块后执行.

这个函数提供一个形参:就是刚建立的YUI实例,当这个函数执行的时候，所有模块已经完成加载并且可以使用了。

YUI().use('*', function(Y) {
// the Y var passed in here will be our YUI instance
});

综上，YUI实例可以直接在页面内静态包含进来，这是一种调用模块(module)的方式;

-----------------------------------------------------------------------------------------------------------------------------------------

这个例子展示了多个 YUI实例如何运行;

YUI实例加载了 anim 模块(animation module 一个动画模块);

YUI().use('anim', function(Y) {
    var anim = new Y.Anim({
        node: '#demo',
        to: {
            height: 50,
            width: 150
        },
        from: {
            height: 100,
            width: 100
        },
        direction: 'alternate',
        iterations: 30,
        duration: .5
    });
    anim.run();
});

简单的animation应用到id=demo的节点上

加载第二个模块 dd-drag 到YUI实例上;

YUI().use('dd-drag', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#demo'
    });
});

使得demo节点可以实现拖拽;

-----------------------------------------------------------------------------------------------------------------------------------------

下面的例子展示出如何利用extend实现类的继承层次;

Bird = function (name) {
    this.name = name;
};
//Bird is a generic class
Bird.prototype.flighted   = true;  // Default for all Birds
Bird.prototype.isFlighted = function () { return this.flighted };
Bird.prototype.getName    = function () { return this.name };
Chicken = function (name) {
    // Chain the constructors
    Chicken.superclass.constructor.call(this, name);
};
// Chickens are birds
Y.extend(Chicken, Bird);

// Define the Chicken prototype methods/members
Chicken.prototype.flighted = false; // Override default for all Chicken

------------------------------------------------------------------------------------------------------------------------------------------

下面的例子展示出如何利用argument来组合类；

YUI().use("node", function(Y) {
    // This method is in the 'oop' module.  Since we require 'node'
    // for this example, and 'node' requires 'oop', the 'oop' module
    // will be loaded automatically.

    var Foo = function() {
        /* code specific to Foo */
        this.publish('interestingMoment');
    };

    Foo.prototype.doSomething = function() {

        var eventData = {};

        // -- do something interesting, add results to eventData --

        eventData.statusText = 'bar';

        // notify the subscribers, passing the event data
        this.fire('interestingMoment', eventData);
    }

    Y.augment(Foo, Y.EventTarget);

    var foo = new Foo();

    // add some event listeners
    foo.on('interestingMoment', function (data) {
        var p = Y.one('#demo_p1');
        p.set('innerHTML', 'I was notified of an interesting moment: ' + data.statusText);
    });

    foo.on('interestingMoment', function (data) {
        var p = Y.one('#demo_p2');
        p.set('innerHTML', 'I was also notified of an interesting moment: ' + data.statusText);
    });

    Y.on('click', function() { 
        foo.doSomething();
    }, '#demo');
});

其中EventTarget是YUI事件库的一个类.

argument 与 extend 有所不同 argument 类似于 composite 主要是为类增加行为，但不是通过继承实现,所以argument并没有类型

耦合.

------------------------------------------------------------------------------------------------------------------------------------------

下面的例子展示了mix的运用:

在这里例子中 mix 是用来增加一个行为集(Logging)到一个静态类(PageController)中;

mix与argument功能上十分相似，事实上,mix在内部确实用了argument.与argument不同的是,mix不仅仅可以在类定义时增加行为，mix可以工作于任何类，包括 object literals 和类的实例.

------------------------------------------------------------------------------------------------------------------------------------------

Merge可以一系列的对象合并为一个merge set;

如果Merge的输入类是一个单独的类，那么输出类将是一个浅复制的类，意味着两个类是不同的，但所有非基本类型在输出输入类了都是指向同一个引用.

------------------------------------------------------------------------------------------------------------------------------------------

在YUI全局对象中，有一些非常有用的类型检测方法在Lang对象里面。

YUI().use("node", function(Y) {
    // This method is in the core of the library, so we don't have to use() any
    // additional modules to access it. However, this example requires 'node'.
   var checkType = function (val) {
        return {
            'object' : Y.Lang.isObject(val),
            'array'   : Y.Lang.isArray(val),
            'function': Y.Lang.isFunction(val),
            'type'    : Y.Lang.type(val)
        };
    };
    var populateRow = function (e, data) {
        var target = e.target;
            cell = target.get('parentNode'),
            row = cell.get('parentNode');

row.removeChild(cell);

        var td0 = document.createElement('td'),
            td1 = td0.cloneNode(false),
            td2 = td0.cloneNode(false);
            td3 = td0.cloneNode(false);

        var results = checkType(data);

        td0.appendChild(document.createTextNode(results['object']   ? 'Y' : 'N'));
        td1.appendChild(document.createTextNode(results['array']    ? 'Y' : 'N'));
        td2.appendChild(document.createTextNode(results['function'] ? 'Y' : 'N'));
        td3.appendChild(document.createTextNode(results['type']));

        row.appendChild(td0);
        row.appendChild(td1);
        row.appendChild(td2);
        row.appendChild(td3);
    };

    var foo = function () {};
    var f = Y.one('#demo');

    Y.on('click',populateRow, '#demo-1', Y, null);
    Y.on('click',populateRow, '#demo-2', Y, []);
    Y.on('click',populateRow, '#demo-3', Y, {});
    Y.on('click',populateRow, '#demo-4', Y, foo);
    Y.on('click',populateRow, '#demo-5', Y, new foo());