YUI学习笔记(一) : Yahoo global object 翻译
来源:互联网 发布:把excel数据分级 编辑:程序博客网 时间:2024/06/13 20:54
简介
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.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.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);
}
}
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.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>
<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问题.).
- YUI学习笔记(一) : Yahoo global object 翻译
- YUI3学习(二)--YUI Global Object
- YUI3学习(二)--YUI Global Object
- YUI 3: YUI Global Object
- yui学习笔记(一)
- YUI Global Object
- #1~ YUI Global Object
- YUI 学习笔记: YAHOO 全局对象
- yui(Yahoo UI)学习笔记之Calendar
- 转载一篇:yui(Yahoo UI)学习笔记之Calendar
- Yahoo! User Interface Library,YUI,YUI下载,YUI学习,YUI是什么,YUI浅谈,YUI研究(2)
- Yahoo! User Interface Library,YUI,YUI下载,YUI学习,YUI是什么,YUI浅谈,YUI研究(1)
- Yahoo! User Interface Library,YUI,YUI下载,YUI学习,YUI是什么,YUI浅谈,YUI研究(1)
- YUI CSS框架学习笔记一
- YUI学习笔记:YUI Loader
- YUI学习笔记:YUI Loader
- Yahoo(雅虎)宣布停止开发YUI
- Yahoo(雅虎)宣布停止开发YUI
- TL1简介
- useradd 命令详解 - [命令操作]
- Yahoo的Ajax框架YUI的基本组成
- 【Unix/Linux】【系统】Linux系统的目录结构和常用命令
- LR如何在大负载下测试
- YUI学习笔记(一) : Yahoo global object 翻译
- MFC应用程序中处理消息的顺序 (转)
- YUI学习笔记(二)------ DataTable
- Tinyos相关资料
- LAMP :安装
- 6/28~6/29 09东北地区(9/26更新)
- SSAS : 从现有多维数据集创建挖掘结构
- 解决中文编码的问题
- 80后大学生为何如此悲惨?