- 浏览: 15151 次
- 性别:
- 来自: 沈阳
文章分类
最新评论
JavaScript(YUI)扫盲
- 对于较复杂的js,或者说复用性很高的模块型js,请单独写成一个js文件,以便作为插件插入其他页面。一般不推荐直接将js写入页面,但可根据具体情况决定。
- 适量注释,请在某段js或者某个js文件的开头写明作者,如:/* created by author at date*/
- 使用yui。
- 注意不要重复加载文件,核心文件在所有的标准套头套尾页面都有引用。但一些组件应用需要单独加载相应的文件,比如日历。
- 如无特殊需求,js加载请放到页面最后。
- 对于简单的js,请写成如下形式:(function({你的js代码})();对于复杂的js功能,建议使用命名空间。
- 如果你需要使用id或者class做挂钩,请不要和用于css的id或者class共用,在 JS 中当作 hook 用的 id 和 class,命名规则为 J_UpperCamelCase,J 是钩子的象形。
- 谨慎使用html标签作为js的挂钩,除非你确定一定以及肯定js所作用的html部分不会有改动。否则如果别人对你的html作出改动,会导致你的js失效。
- 当你需要阻止某个动作触发触发事件的执行,请使用preventDefault函数,而不要使用使用preventEvent函数,因为preventEvent函数会阻止所有其他函数的执行
- 你需要使你的代码至少在ie6,ie7和ff3下都正常运行,请特别留意ie6,这位老人家容易抽筋。IETester:下载地址:http://www.ietester.org/download/
-
局部变量的速度要比全局变量的 访问速度更快,因为全局变量其实是全局对象的成员,而局部变量是放在函数的栈当中的。
-
把数字转换成字符串,应用"" + 1,虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说: ("" + ) > String() > .toString() > new String()
- 浮点数转换成整型,这个更容易出错,很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()。
二、js跨域访问问题
- 跨域名访问
- 同一端口不同端口间的访问
- 不同通信协议之间的访问
YAHOO.util.Get.script:适用于返回简单的json格式的数据;
三、js的常用调试方式
YAHOO.lang
在标准的JS中 ,通常都是用 typeof arg判断变量arg是否已经被定义,在YUI中,以下 方法都是JavaScript 原生的typeof 操作符的函数封装 :
var timer = YAHOO.lang.later(2000, scope, func, data);
timer.cancel(); // 被取消执行,不会弹出消息
YAHOO.util.Dom
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.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 参数
返回值类型: 无
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 的值。
相关推荐
这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。
Ajax源码(javascript)使用它可以构建更为动态和响应更灵敏的Web应用程序
Yahoo JavaScript库 YUI,非常有名的免费开源代码库
Yahoo! User Interface Library(简称yui) 是一个使用Javascrīpt编写的工具和控件库。它利用DOM脚本,DHTML和AJAX来构造具有丰富交互功能的Web程序...YahooUI,搞WEB开发的朋友值得看一看,充分发挥出了javascript的功能
JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools
[Wrox] JavaScript 框架高级编程 应用Prototype、YUI、Ext JS、Dojo、MooTools (英文版) [Wrox] Professional JavaScript Frameworks Prototype,YUI, ExtJS, Dojo and MooTools (E-Book) ☆ 出版信息:☆ [作者...
NULL 博文链接:https://pouyang.iteye.com/blog/581021
雅虎推出的一款javascript压缩工具。有JAVA版本和.NET版本。 yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ----------...
javascirpt框架高级编程 源代码,官方网站过来的
YUI教程YUI 入门教程YUI 入门教程YUI 入门教程
是一组工具和控件,用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。 YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具: YUI Compressor ...
YUI Compressor是控制台的,本人基于JAVA写了个GUI版, * 可添加多个目录文件,批量压缩JavaScript,CSS文件; * 可设置发布目录,将压缩后的文件集中保存到该处; * 可将调试信息保存到文件中; * 可保置当前压缩文件...
YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as ...
yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...
适合图灵程序设计丛书web开发系列-javascript基础教程的学习使用
YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率...它能否在已经拉开的 JavaScript 框架大战中胜出,让我们拭目以待。
yuicompressor-2.4.2.jar yuicompressor-2.4.7.jar jsZip.exe yuicompressor yui compressor js压缩工具 javascript压缩工具 css压缩工具 ------------------------------------ //压缩JS java -jar yuicompressor-...
Yahoo的基于java的javascript/css压缩程序
本书作者便是在此背景下,以国外最优秀的JavaScript框架之一——Yahoo User Interface Library(简称YUI)的最新版本YUI 3.15为基础编写而成。本书通过通俗易懂的语言和大量丰富的实例,帮助读者解决实际生产环境...
yui3-master.zip