Getting Started From YUI – YUI Global Object

YUI Global Object是YUI的基类,他是YUI的核心,也为YUI其他所有的方法、功能提供了接口 。如果你想使用YUI类库,必须要在全用YUI其他类库前就要加载它。YUI GlobalOject 就象一个种子,你所有的的模块都是基于它而制作的。所以我们必须要先加载他才成。

YUI Global Object从名字也能看出,他建了一个全局对象。它可以被实例化,而且他也为基于YUI的模块提供了约束条件。

YUI的使用也和jQuery差不多,只是部分的使用方式有点不一样。
这个是官方的简单例子,看得出使用方法确实和jQuery很相似

YUI().use('dd-drop', 'anim', function(Y) {
    // Y.DD is available
    // Y.Anim is available
});
$.each(function(){
    //xxx。 循环
});

YUI的一些模块名都比较简单,而且似乎名词还相当简单,还是一个缩写,如anim代表了Animation,dd代表了Drag-Drop,event代表了DOM Element Utilites。
YUI()也可以象jQuery一样,用简单的方式来进行调用。

var Y = YUI();
var j = jQuery.noConflict();

也可以通过add方法来添加自定义模块。

YUI().add('functionname',function(Y){
    Y.namespace('mynamespace');
    Y.mynamespace.Modes = function(){
         //expose API
    }
},{
    requires:['base']
});
jQuery.functionname = function($){
    //....在function的参数用$后,就可以在这个函数空间里采用了$
}

YUI在使用一些方法之前还可以使用一定的参数。或者说是临时改变运行的环境变量?官方的例子是这样的

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.
});

初次学习。也是初步了解,参考页面为:http://developer.yahoo.com/yui/3/yui/,以后我会更加多次使用,因为我觉得YUI有两方面集成的不错,YUICSS做页面还是很不错的。而我又不会做页面所以。。。
当然easyUI也考虑在用。

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>