JavaScript(YUI)扫盲

相关读书笔记列表

一、js规范、js加载顺序

1. 对于较复杂的js，或者说复用性很高的模块型js，请单独写成一个js文件，以便作为插件插入其他页面。一般不推荐直接将js写入页面，但可根据具体情况决定。
2. 适量注释，请在某段js或者某个js文件的开头写明作者，如：/* created by author at date*/
3. 使用yui。
4. 注意不要重复加载文件，核心文件在所有的标准套头套尾页面都有引用。但一些组件应用需要单独加载相应的文件，比如日历。
5. 如无特殊需求，js加载请放到页面最后。
6. 对于简单的js，请写成如下形式：(function({你的js代码})();对于复杂的js功能，建议使用命名空间。
7. 如果你需要使用id或者class做挂钩，请不要和用于css的id或者class共用，在 JS 中当作 hook 用的 id 和 class，命名规则为 J_UpperCamelCase，J 是钩子的象形。
8. 谨慎使用html标签作为js的挂钩，除非你确定一定以及肯定js所作用的html部分不会有改动。否则如果别人对你的html作出改动，会导致你的js失效。
9. 当你需要阻止某个动作触发触发事件的执行，请使用preventDefault函数，而不要使用使用preventEvent函数，因为preventEvent函数会阻止所有其他函数的执行
10. 你需要使你的代码至少在ie6,ie7和ff3下都正常运行，请特别留意ie6，这位老人家容易抽筋。IETester：下载地址：http://www.ietester.org/download/
11. 局部变量的速度要比全局变量的 访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的。
12. 把数字转换成字符串，应用"" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说： ("" + ) > String() > .toString() > new String()
13. 浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。

二、js跨域访问问题

跨域访问问题大概可以分为以下几种：

1. 跨域名访问
2. 同一端口不同端口间的访问
3. 不同通信协议之间的访问

解决跨域访问的方法有多种，如：
YAHOO.util.Get.script：适用于返回简单的json格式的数据；

URL作为参数： 适用于同一个应用的多个不同域名间的访问；

iframe中转：适用于同一个父域下使用，对返回的格式无要求；

服务器代理（jsp、servlet等）：几乎适用于所有的跨域请求；

三、js的常用调试方式

在firefox下可以通过强大的firebug调试

在IE下面可以通过Companion.JS或者地址栏调试

四、YUI常用函数

YAHOO.lang
在标准的JS中 ，通常都是用 typeof arg判断变量arg是否已经被定义，在YUI中，以下 方法都是JavaScript 原生的typeof 操作符的函数封装 ：

YAHOO.lang.isBoolean(obj)

YAHOO.lang.isFunction(obj)

YAHOO.lang.isNull(obj)

YAHOO.lang.isNumber(obj)

YAHOO.lang.isObject(obj)

YAHOO.lang.isString(obj)

YAHOO.lang.isUndefined(obj)

还有其他类似功能的函数：

YAHOO.util.isArray(obj)： 判断参数是否是一个数组

YAHOO.lang.isValue(obj) ：判断参数是否是一个有意义的值，只要参数不是null/undefined/NaN；

YAHOO.util.later(when, scope, func, data, periodic) ：延时执行指定函数，如：
var timer = YAHOO.lang.later(2000, scope, func, data);
timer.cancel(); // 被取消执行，不会弹出消息

YAHOO.util.Dom

YAHOO.util.Dom.get(id) 功能同 document.getElementById(element) ，获取指定的页面元素。

YAHOO.util.Dom.getElementsBy(method,tagName,rootNode) 在 rootNode 的子节点中按照用户提供的 method 方法在所有标签为 tagName 的 element 中查找符合条件的节点。 rootNode 不指定则在整个 Document 中查找， method 是一个 method(elementID) 类型的函数对象，该函数对象的返回值为 Boolean 值。

YAHOO.util.Dom.getElementsByClassName(className, tagName, rootNode) 返回指定根节点下所有标签为 tagName,class 为 className 的 DOM 节点数组。根节点为可选参数，不指定时在整个页面中查找

YAHOO.util.Dom.hasClass(String | HTMLElement | Array, className)

判断指定节点中是否包含指定样式。

YAHOO.util.Dom.addClass(String | HTMLElement | Array, className)

动态向节点中增加样式

YAHOO.util.Dom.removeClass(String | HTMLElement | Array, className)

取出节点中的指定样式

YAHOO.util.Dom.replaceClass(String | HTMLElement | Array, oldClassName, newClassName)

替换节点中的指定样式

YAHOO.util.Dom.batch(el, method, obj, override)

batch() 方法会判断第一个参数是一个数组/集合，还是一个字符串。第二个参数即要批处理进行的方法。而第三个参数的作用则根据第四个参数的值而定。如果第三个参数 override 为 true ，那么第三个参数 obj 对象就成为 method 方法执行时的作用域(method 方法中this 指向的对象)。否则， obj 对象就是 method 方法执行时传递给 method 方法的参数。

YAHOO.util.Dom.inDocument (el) 判断元素 el 是否在当前的 DOM 中，支持批量操作。

其他：
YAHOO.util.Dom.getAncestorBy(node, method)

根据自定义规则取得最近的父元素
YAHOO.util.Dom.getAncestorByClassName(node, className)

根据 className 取得最近的父元素
YAHOO.util.Dom.getAncestorByTagName(node, tagName)

根据 tagName 取得最近的父元素
YAHOO.util.Dom.getPreviousSiblingBy(node, method)

根据自定义规则取得同级的前一个元素
YAHOO.util.Dom.getPreviousSibling(node)

取得同级的前一个元素
YAHOO.util.Dom.getNextSiblingBy(node, method)

根据自定义规则取得同级的后一个元素
YAHOO.util.Dom.getNextSibling(node)

取得同级的前一个元素
YAHOO.util.Dom.getFirstChildBy(node, method)

根据自定义规则取得第一个子元素
YAHOO.util.Dom.getFirstChild(node)

取得第一个子元素
YAHOO.util.Dom.getLastChildBy(node, method)

根据自定义规则取得最后一个子元素
YAHOO.util.Dom.getLastChild(node)

取得最后一个子元素
YAHOO.util.Dom.getChildrenBy(node, method)

根据自定义规则取得最近一级的子元素
YAHOO.util.Dom.getChildren(node)

取得最近一级的子元素

YAHOO.util.Element

YAHOO.util.Element.appendChild(child)

在 DOM 结构中 element 下增加子节点

YAHOO.util.Element.getElementsByTagName (tag)

获取 tagName 为 tag 的所有页面元素

YAHOO.util.Element.hasChildNodes

判断是否具有子节点

YAHOO.util.Element.insertBefore (element, before)

在元素 before 前插入 element

YAHOO.util.Element.removeChild(child)

删除 DOM 中元素的 child 子节点

YAHOO.util.Element.replaceChild (newNode , oldNode)

替换子节点 oldNode 为 newNode

YAHOO.util.Event

YAHOO.util.Event.addListener(element,eventType,fn,obj,override)

参数：

element ：为绑定事件的元素 id ，可以是一个数组，以支持批量操作

eventType ：为事件类型

fn ：为事件响应的回调函数

obj ：当 override 为 true 时，为回调函数传入的参数对象；当 override 为 false 时，该参数被忽略。

override ：

返回值类型： Boolean

功能： 给指定的 element 绑定事件响应函数

YAHOO.util.on

addListener 的函数别名

YAHOO.util.Event.removeListener(element,eventType,fn)

参数：

element ：为绑定事件的元素 id,

eventType ：事件类型

fn ：为事件响应函数

返回值类型： Boolean

功能： 给指定的 element 解除绑定事件

YAHOO.util.Event.purgeElement ( el , recurse , sType )

参数：

el ：为绑定事件的元素 id,

recurse ： Boolean 值，是否解除子节点的事件绑定

sType ：事件类型

返回值类型： Boolean

功能： 给指定的 element 解除绑定的同一类型的事件，也可以解除子节点上绑定的这一类型的事件

YAHOO.util.Event.onAvailable ( p_id , p_fn , p_obj , p_override )

参数：

p_id ：为绑定事件的元素 id,

p_fn ：为事件响应函数

p_obj ：同 addListener 的 obj 参数

p_override ：同 addListener 的 override 参数

返回值类型： 无

功能： 当指定的 element 的 p_id 出现时，执行事件响应函数。如果在页面初始化之前执行这一函数，当页面加载时（可能还未完成时），就会执行响应的事件响应函数；如果放在页面加载之后执行这一函数，将以固定的时间轮询，当 element 可用时响应这一事件。这个轮询的的时间是可以配置的，缺省的时间是 10 秒一次。

YAHOO.util.Event.onContentReady ( p_id , p_fn , p_obj , p_override )

参数：

p_id ：为绑定事件的元素 id,

p_fn ：为事件响应函数

p_obj ：同 addListener 的 obj 参数

p_override ：同 addListener 的 override 参数

返回值类型： 无

功能： 与 onAvailable 类似，但不同的是事件响应函数是等到 element 可以安全的修改的时候才响应。

YAHOO.util.Event.onDOMReady ( p_fn , p_obj , p_scope )

参数：

p_fn ：为事件响应函数

p_obj ：同 addListener 的 obj 参数

p_scope ：同 addListener 的 override 参数

返回值类型： 无

功能： 当 DOM 第一次可用时执行响应函数。

类似window.onload，但 有一个弊端，即：window.onload 一定要等到页面中包括图片/多媒体等内容都全部加载完成后才执行。

YAHOO.util.Event.preventDefault ( event)

参数：

event ：事件对象

返回值类型： 无

功能： 阻止事件的缺省行为发生。

YAHOO.util.Event.getListeners ( el , sType )

参数：

el ： HTML element

sType ：事件类型， String 类型

返回值类型： Object{

type ：事件类型

fn ： addListener 添加的事件响应函数

obj ：提供给事件响应函数的参数对象

adjust ：否获取缺省的事件监听器

index ： UI 事件监听器列表中的位置

}

功能： 阻止事件的缺省行为发生。

YAHOO.util.Event.getTime( event)

参数：

event ：事件对象

返回值类型： Date 对象

功能： 获取事件发生时的时间。

YAHOO.util.Event.getTarget(ev , resolveTextNode)

参数：

evt ：事件对象

resolveTextNode ：

返回值类型： HTML element

功能： 获取事件发生时的页面标签。对于 IE 即 window.event.srcElement

YAHOO.util.Connect

1、 创建对象

var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);

第一个参数：指明 http 请求的方式，可用的方式包括 GET 、 POST 、 HEAD 、 PUT 、 DELETE ，但 PUT 和 DELETE 可能在一些 A 级浏览器上不支持。

第二个参数：请求的 URL

第三个参数：回调函数，用于服务器返回数据时调用的客户端处理程序

第四个参数： POST 方式时，提供给 URL 的 POST 参数信息。

2. 定义回调函数

在异步事物中，可以创建回调函数处理服务器的响应和相关数据，如果你不关心服务器的返回信息，也可以忽略这些回调函数，所有这些回调函数对象都是可选的，然而在大多数情况下，应该至少提供以下三个回调函数：

success ： 服务器做出有效响应时的回调函数

failure ： 服务器响应了但提供了错误信息时的回调函数

argument ： success 和 failure 为了处理返回信息需要的参数，可以是对象、字符串、数字或者包含了数据的数组。

在使用 YAHOO.Connect.setForm 上载文件时，需要定义 upload 回调函数代替 success 和 failure 在回调函数中 this 将失去作用范围，这种情况下需要通过一个指向父对象的引用的参数来访问对象的成员。为了能够使用对象的方法作为回调函数，并维持成员的作用范围，需要定义回调函数对象的成员 scope ，作为 this 的值。