YUI学习笔记（一） : Yahoo global object 翻译

简介

Yahoo global object 提供namespace机制和封装了一些好用的方法. js名称为yahoo.js ,使用YUI前必须先引入这个js,且应该最先加载.

源文件

< script  type ="text/javascript"  src ="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js"   ></ script >

常用方法列举如下:

• 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

避免js全局变量污染的好办法,用法如下:

//  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

提供了一些简便易用方法,如下:

//  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

检查某个对象是否有某属性

//  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

提供了继承机制.(译者注:js使用继承还是有一定风险,建议酌情使用.)

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

将某个对象的prototype属性复制到另一个对象,代码重用的好方法.

<!--   debugger  output  for  environments without  " console "   -->
< div id = " consoleelement " >   </ div >

< script >
// //////////////////////////////////////////////////////////////////////////
//  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  +=   " <p> "   +  msg  +   " </p> " ;
            }
        }
    }
};

// //////////////////////////////////////////////////////////////////////////
//  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 " );

</ script >

 

YAHOO.log

log工具,使用之前要先引入logger控件,如果没有引入,那么浏览器会忽略这条log语句.用这个东西使你免陷于开发时加alert,发布时四处删除alert的窘境.(注:当然,用firebug调试也可以避免alert问题.).