[转]javascript中判断变量是否为array

javascript中要判断一个变量是否为array通常是比较困难的,因为

通常的做法是判断

可是这个方法有一个问题,如果一个数组是来自另一个frame中的,那么它的constructor 将是另一个对象。
YUI中用了如下的方法:

简单来说,就是判断这个变量有没有 length 属性,同时有没有 splice 方法。可惜,这样的判断方法是可以用一个 object 来伪造数组的。
Google 的 Mark Miller 发现,用下面方法,可以简单又可靠的得到一个变量是否一个数组:

转自:http://stauren.net/log/fqibpxyz3.html

更新一下我的jlUtil

修正了几个BUG,已经在实际项目中使用,没有问题。

2009 年度最佳 jQuery 插件

jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery  的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。

拉洋片
在一个固定区域,循环显示几段内容,这种方式很像旧时的拉洋片,2009年,这种 Web 效果大行其道,jQuery 有大量与此有关的插件,以下插件无疑是最佳的。
AnythingSlider
jquery plugins
由 CSS-Tricks 的 Chris Coyier 设计,功能齐全,应用十分广泛。
Easy Slider
jquery plugins
这个 Content Slider 插件既包含传统“前后”导航模式,又包含页码式导航。
Coda-Slider 2.0
jquery plugins
Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。
图片库
那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过,借助 jQuery,这种效果已经可以在本地实现,以下是本年度备受欢迎的几个 jQuery 图片库插件。
Galleria
jquery plugins
这是一个基于 jQuery 的图片库,可以逐个加载图片并显示缩略图。
jQuery Panel Gallery
jquery plugins
一个可以高度定义的图片库插件,无需对单个图片进行任何处理,这个插件会帮你完成一切。
slideViewer
jquery plugins
slideViewer 会检查你的图片列表中的编号,动态创建各个图片的页码浏览导航。
Supersized
jquery plugins
一个令人惊讶的图片循环展示插件,包含各种变换效果和预加载选项,会对图片自动改变尺寸以适应浏览器窗口。
导航
我们相信,作为网站的导航系统,应该越简单,越易用越好,然而,假如你确实希望实现一些更炫的效果,jQuery 就是最好的选项,以下插件是09年最好的 jQuery 导航插件。
jquery mb.menu
jquery plugins
Horizontal Scroll Menu with jQuery
jquery plugins
AutoSprites
jquery plugins
表单和表格
在 Web 设计中,表单和表格都是不是很讨人喜欢的东西,但你不得不面对,本年度出现几个不错的 jQuery 插件帮你完成这些任务。
Password Strength
jquery plugins
这个插件帮你评估用户输入的密码是否足够强壮。
Ajax Fancy Capcha
jquery plugins
顾名思义,一个支持 Ajax 又很炫的 jQuery Captcha 插件,它使用了很人性化的验证机制。
Chromatable
jquery tables
这个插件可以帮助你在表格上实现滚动条。
jqTransform
jquery plugins
一个式样插件,帮助你对表单中的控件进行式样控制。
Uploadify
jquery plugins
实现多个文件同时上传。
jExpand
jquery tables
一个很轻量的 jQuery 插件,使你的表格可以扩展,在一些商业应用中,可以让表格更容易组织其中的内容。
本文来源:http://webdesignledger.com/resources/the-best-jquery-plugins-of-2009

Array.indexOf in Internet Explorer

According to this document at Mozilla Developer Center, Javascript 1.5 has been implemented in a browser since at least the first releases of Mozilla as open source browser, which means, in other words, since around 1998. Let's assume it was 2002 which is marked as the release of the 1.0 version.
And I was doing some interface programming lately and I needed to check if an element was in an array. Went to Gecko's documentation (that's the one I normally use, since it's less overbloated with crappy ads) and checked that Array objects had an indexOf function. Cool! I used that function on my code. Then once I finished with all the development, went to The Horror (i.e. Internet Explorer) and tested it.
Surprise! It was broken! What had I done? (You know the debugger for Internet Explorer is not specially helpful)
I suspected of the indexOf function, and recalled vague memories about doing a custom search function in the past for looking into arrays and not having to write a for(i=0; i<ar.length;i++) thing each time…
Mmmm… did a alert('Array.indexO') in ie and what did I get?: undefined
So they have been spent five years for releasing ie7 and still they didn't implement Array.indexOf!
No worries, though. Javascript is flexible! Look, IE, I don't care if you choke on the mere seeing of indexOf, you're going to run it whether you like it or not!

and voila! my script wasn't broken anymore!

jlUtil For Javascript

昨天用js写了一个Json_encode的工具函数,附上模仿jQuery并加强的extend函数。
对于extend函数,主要加强的是可以遍历子对象来extend,而不是简单的覆盖。
getJSON的使用方法:

extend的使用方法:

下面是代码:

Pro Javascript Techniques – 目录

先来一段废话:
今天是周五,终于可以放松啦,蛮累的,今天上班的时候萌生这个想法,自己的博客流量总是上不去,多写点有用的东西,带动一下流量,嘿嘿。
本来是想继续翻译的,后来发现这本书已经有译本了,并且不允许在网络上发布其内容,只好放弃翻译,改写读后感好了,继续使用这个目录。两个半小时的心血啊。
正文:

目录

关于作者
关于技术校对者
感谢
第一部分 介绍现代Javascript
第一章   现代Javascript编程
1.1 面向对象Javascript
1.2 测试你的代码
1.3 打包和发布
1.4 非侵入的DOM脚本
1.4.1 文档对象模型DOM
1.4.2 事件
1.4.3 Javascript和CSS
1.5 Ajax
1.6 浏览器支持
1.7 总结
第二部分 专业Javascript开发
第二章   面向对象Javascript
2.1 语言特性
2.1.1 引用
2.1.2 函数重载和类型校验
2.1.3 命名域
2.1.4 闭包
2.1.5 语境
2.2 面向对象基础
2.2.1 对象
2.2.2 对象的创建
2.3 总结
第三章   编写可重用的代码
3.1 标准的面向对象代码
3.1.1 原型继承
3.1.2 经典继承
3.1.3 基础类库
3.1.4 原型类库
3.2 打包
3.2.1 名称空间
3.2.2 整理你的代码
3.2.3 压缩
3.3 发布
3.4 总结
第四章   Debug和测试的工具
4.1 Debug
4.1.1 错误命令行
4.1.2 DOM查看器
4.1.3 Firebug
4.1.4 Venkman
4.2 测试
4.2.1 JSUnit
4.2.2 J3Unit
4.2.3 测试实例
4.3总结
第三部分 非侵入的Javascript
第五章   文档对象模型DOM
5.1 介绍文档对象模型DOM
5.2 初识DOM
5.2.1 操作DOM中的空白部分
5.2.2 简单展示DOM的功能
5.2.3 绑定每个HTML节点
5.2.4 标准DOM方法
5.3 等待HTML DOM的载入
5.3.1 等待页面载入
5.3.2 等待大多数DOM载入
5.3.3 当DOM载入完成时
5.4 在HTML文档中搜索节点
5.4.1 通过class名称搜索节点
5.4.2 通过CSS选择器查找节点
5.4.3 XPath
5.5 取得节点的内容
5.5.1 取得节点的文字内容
5.5.2 取得节点的HTML内容
5.6 操作节点属性
5.6.1 取得和设置节点的属性值
5.7 操作DOM
5.7.1新建节点
5.7.2 插入节点
5.7.3 注入HTML
5.7.4 删除节点
5.8 总结
第六章   事件
6.1 介绍Javascript事件
6.1.1 异步事件和线程
6.1.2 事件阶段
6.2 常规事件特性
6.2.1 事件对象
6.2.2 this关键字
6.2.3 取消事件冒泡
6.2.4 重写浏览器的默认事件
6.3 绑定事件监听器
6.3.1 常规绑定
6.3.2 DOM绑定:W3C
6.3.3 DOM绑定:IE
6.3.4 添加和删除事件
6.4 事件的类型
6.5 非入侵的DOM脚本
6.5.1 Javascript被禁用时的准备
6.5.2 确保链接不依赖于Javascript
6.5.3 监视CSS是否禁用
6.5.4 事件的可访问性
6.6 总结
第七章   Javascript和CSS
7.1 访问样式信息
7.2 动态节点对象
7.2.1 节点的位置
7.2.2 节点的大小
7.2.3 节点的可见度
7.3 动画
7.3.1 滑入
7.3.2 隐现
7.4 浏览器
7.4.1 鼠标位置
7.4.2 可视范围
7.5 拖拽
7.6 脚本类库
7.6.1 moo.fx和jQuery
7.6.2 Scriptaculous
7.7 总结
第八章   增强表单功能
8.1 表单校验
8.1.1 必填字段
8.1.2 正则匹配
8.1.3 设置规则
8.2 显示错误信息
8.2.1 校验
8.2.2 什么时候校验
8.3 增强用户体验
8.3.1 悬停说明
8.3.2 标记必填字段
8.4 总结
第九章   创建一个相册
9.1 示例相册
9.1.1 Lightbox
9.1.2 ThickBox
9.2 创建相册
9.2.1 分离加载
9.2.2 透明掩盖层
9.2.3 定位容器
9.2.4 导航
9.2.5 幻灯片展示
9.3 总结
第四部分 Ajax
第十章   介绍Ajax
10.1 使用Ajax
10.1.1 HTTP请求
10.1.2 HTTP响应
10.2 处理响应数据
10.3 完整的Ajax类库
10.4 不同数据使用方式的示例
10.4.1 RSS
10.4.2 HTML选择器
10.4.3 JSON和Javascript:远程执行
10.5 总结
第十一章   使用Ajax增强博客功能
11.1 永不结束的博客
11.1.1 博客模板
11.1.2 数据源
11.1.3 事件检测
11.1.4 请求
11.1.5 结果
11.2 生动的博客
11.3 总结
第十二章   自动补全的搜索栏
12.1 自动补全搜索栏的例子
12.2 创建页面
12.3 监视键盘输入
12.4 搜索自动补全结果
12.5 导航结果列表
12.5.1 键盘导航
12.5.2 鼠标导航
12.6 最终结果
12.7 总结
第十三章   Ajax Wiki
13.1 什么是Wiki
13.2 关于数据库
13.3 Ajax请求
13.4 服务器端代码
13.4.1 处理一个请求
13.4.2 执行和格式化SQL脚本
13.5 处理JSON响应
13.6 额外的学习:一个Javascript博客
13.7 应用程序代码
13.7.1 Javascript核心代码
13.7.2 Javascript SQL类库
13.7.3 Ruby服务器端代码
13.8 总结
第五部分 Javascript的未来
第十四章   Javascript将去向何处
14.1 Javascript 1.6和1.7
14.1.1 Javascript 1.6
14.1.2 Javascript 1.7
14.2 Web应用程序1.0
14.2.1 创建一个时钟
14.2.2 简单的星球模拟
14.3 彗星
14.4 总结
第六部分 附录
附录A  DOM索引
A.1 资源
A.2 术语
A.3 全局变量
A.3.1 document
A.3.2 HTMLElement
A.4 DOM对象
A.4.1 body
A.4.2 childNodes
A.4.3 documentElement
A.4.4 firstChild
A.4.5 getElementById( elemID )
A.4.6 getelementsByTagName( tagName )
A.4.7 lastChild
A.4.8 nextSibling
A.4.9 parentNode
A.4.10 previousSibling
A.5 节点信息
A.5.1 innerText
A.5.2 nodeName
A.5.3 nodeType
A.5.4 nodeValue
A.6 节点属性
A.6.1 className
A.6.2 getAttribute( attrName )
A.6.3 removeAttribute( attrName )
A.6.4 setAttribute( attrName, attrValue )
A.7 DOM操作
A.7.1 appendChild( nodeToAppend )
A.7.2 cloneNode( true|false )
A.7.3 createElement( tagName )
A.7.4 createElementNS( namespace, tagName )
A.7.5 createTextNode( textString )
A.7.6 innerHTML
A.7.7 insertBefore( nodeToInsert, nodeToInsertBefore )
A.7.8 removeChild( nodeToRemove )
A.7.9 replaceChild( nodeToInsert, nodeToReplace )
附录B  事件索引
B.1 资源
B.2 术语
B.3 事件对象
B.3.1 常规事件
B.3.2 鼠标事件
B.3.3 键盘事件
B.4 页面事件
B.4.1 载入
B.4.2 关闭之前
B.4.3 错误
B.4.4 缩放
B.4.5 滚动
B.4.6 关闭
B.5 UI事件
附录C  浏览器
C.1 现代浏览器
C.1.1 Internet Explorer
C.1.2 Mozilla
C.1.3 Safari
C.1.4 Opera

Javascript Timeout Hacks

Our first user script simply displays an alert saying “Hello world!” when it is executed.

Example: Display the “Hello world!” alert

Although this code looks obvious enough, and does exactly what you would expect, Greasemonkey is actually doing a number of things behind the scenes to ensure that user scripts do not interact badly with other scripts defined by the original page. Specifically, it automatically wraps your user script in an anonymous function wrapper. Ordinarily you can ignore this, but it will eventually creep up and bite you in the ass, so you may as well learn about it now.
One of the most common ways this can bite you is that variables and functions that you define in a user script are not available to other scripts. In fact, they are not available at all once the user script has finished running. This means that you will run into problems if you are expecting to be able to call your own functions later by using the window.setTimeout function, or by setting string-based onclick attributes on links and expecting Javascript to evaluate your function names later.
For example, this user script defines a function helloworld, then attempts to set a timer to call it one second later.

Example: Bad way to delay calling a function

This will not work; no alert will be displayed. If you open JavaScript Console, you will see an exception displayed: Error: helloworld is not defined. This is because, by the time the timeout expires and the call to helloworld() is evaluated, the helloworld function no longer exists.

If you need to reference your user script's variables or functions later, you will need to explicitly define them as properties of the window object, which is always available.

Example: Better way to delay calling a function

This works as expected: one second after the page loads, an alert pops up proudly displaying “Hello world!

However, setting properties on window is still not ideal; it's a bit like using a global variable when a local one will do. (Actually, it's exactly like that, since window is global and available to all scripts on the page.) More practically, you could end up interfering with other scripts that were defined on the page, or even other user scripts.
The best solution is to define an anonymous function yourself and pass it as the first argument to window.setTimeout.

Example: Best way to delay calling a function


What I'm doing here is creating a function without a name (an “anonymous function”), then immediately passing the function itself to window.setTimeout. This accomplishes the same thing as the previous example, but it leaves no trace, i.e. it's undetectable to other scripts.
I find that I use anonymous functions regularly while writing user scripts. They are ideal for creating “one-off” functions and passing them as arguments to things like window.setTimeout, document.addEventListener, or assigning to event handlers like click or submit.

略懂 HTML 的朋友都知道,如果想让一个链接在新窗口中打开,通常的做法是利用 target=”_blank” 来设定 a 标签。例如:

  1. <a href="http://jennal.cn" target="_blank">Jennal.cn</a>

这种做法确实比较方便,但在 XHTML 1.0 Strict 中去掉了 target 属性,也就是说我们不能再利用 target 属性来控制链接的行为。虽然当今流行的浏览器在 XHTML 1.0 Strict 甚至 XHTML 1.1 下扔能正确执行 target=”_blank”,但这样的代码毕竟是不规范的,不推荐使用。
很自然,我们会想到用 Javascript 来解决这个问题,我通常是使用下面的方法:

  1. <a href="http://jennal.cn" onclick="window.open(this.href);return false;">Jennal.cn</a>

这样虽然可以满足要求,但是当链接很多的时候,代码就显得有些臃肿了。为了简化代码,我们应该用 DOM Event / DHTML 的方法来解决这个问题。今天我恰好在做一个网页,需要使用 XHTML 1.0 Strict,准备自己写一个这样的 Javascript。不过幸好我养成了万事先 Google 的坏习惯,还真让我找到了一个很完善的 Javascript 弹窗代码,这段代码不仅写的漂亮,通用性强,而且还考虑到了当今流行的浏览器按下组合键点击链接的情况,已经非常完善了。代码源头在这里,作者提供了源码下载和一个演示
这段代码的通用性非常强,作者原文中举例写的也很详细,其实最简单的用法就是为需要开新窗的链接添加 rel=”external” 属性,当然,你也可以自己定制根据 class 或其它什么属性来判断。

  1. <a href="http://jennal.cn" rel="external">Jennal.cn</a>

当然,在网页设计中,弹出新窗口在多数情况下应该尽量避免,只在可以提高用户体验的情况下才需要使用。此外,由于有些 Pop Window Blocker 会拦截 Javascript 弹出窗口,我们可以修改这段代码,通过判断窗口是否成功建立来给出关闭弹窗过滤的提示,相信可以使用户体验提升不少。
转自:http://blog.istef.info/2007/05/17/open-a-new-window-when-click-a-link-under-xhtml-10-strict/

Javascript 刷新页面的几种方法

1    history.go(0)
2    location.reload()
3    location=location
4    location.assign(location)
5    document.execCommand('Refresh')
6    window.navigate(location)
7    location.replace(location)
8    document.URL=location.href

如何快速的呈现我们的网页

一、我们需达解决的麻烦

  • 减少HTTP请求数. 减少HTTP请求数有什么好处
    • 降低服务器跟客户端的建立和消除HTTP请求和响应Header的开销
    • 减少服务器为HTTP连接的进程和线程的开销,如果可能,还会包括GZIP压缩的CPU开销.
  • 减小被请求文件大小, 减少请求数据占用的网络带宽.
  • 让用户更快的看到想要的结果.
  • 提高客户端渲染速度.
  • 让浏览器同时能请求更多的数据.
  • 提高服务器相应速度.
  • 通过版本化控制客户端Cache.

二、如何解决我们的麻烦
A.如何减少HTTP请求数

  1. 合并JS文件跟CSS文件。
  2. 合并框架图片以及相对变动较少的图片成一张,通过CSS背景切割来完成渲染,比如:加速图片显示
  3. 合理使用本地Cache来缓存JS/CSS/IMAGE。
  4. 合理使用UserData缓存JS文件,对于FF用户可以单独请求服务器,这样能解决80%用户的问题.代码可以蓉儿(meizz)的js framework1(标注1)。
  5. 把JS跟CSS合并成一个文件

B.减小被请求文件大小,减少请求数据占用的网络带宽

  1. 压缩JS体积:删除JS中空白换行,注释,混淆把长变量换成短变量;
  2. 压缩CSS体积:删除CSS注释、写法尽量用简写;
  3. 使用(X)HTML+CSS方式搭建网站结构,提高CSS重用性,来减少(X)HTML文件大小;
  4. 使用服务器端GZIP压缩JS/ CSS文件,缩小传输文件大小。附注:Apache1跟Apache2的GZIP的效率跟方式不一样的,根据需要自行选择。
    嗷嗷补充说明:压缩、合并JS和CSS都由程序处理。而不是自己手动去缩删,不然不利于后期维护。

C.让用户更快的看到想要的结果
用户对于一个站点的白页的忍受时间根据统计是8-12秒。白页的产生可能由于各种原因引起,我们能做的就是怎么让用户能变的稍微能等待更久。

  1. 方案1:多做一个引导页,让用户体会其中的变化
    案例:mail.aol.com中的loading引导页
  2. 方案2:优先载入页面结构以及结构图片,后一步载入当前页面数据,再后一步载入Iframe,Flash等数据.让用户尽早的看到被打开页面的希望.

D.提高客户端渲染速度
这个问题就比较泛泛了,影响客户端的渲染速度有多方面的,主要目的都是提高程序方面的效率.

  1. 对于大索引的结构,尽可能的少用索引访问,能用访问兄弟节点的方式尽可能用访问兄弟节点的方式.
  2. 字符串拼接尽可能用数组方式
  3. 大规模添加节点数据,请不要使用appendChild方式,尽量使用类似innerHTML的insertAdjacentHTML方式,FF下需修正(标注1)

E.让浏览器同时能请求更多的数据.
浏览器默认只是支持单域名同时有两个HTTP请求,使用多域名将能把请求数提高,在网络条件优良的情况下,能更快的下载数据,呈现结果.
F.提高服务器相应速度
对于需快速响应的文件,把其放入快速响应的服务器,应该是不错的方案,优化方案请系统储备组提供.
G.通过版本化控制客户端Cache
通常js/css这类文件改动比较频繁,但是为了加载速度变快,我们有可能需要设定这类文件的过期时间为几天后,这样我们碰到的问题就是,如何及时更新这些在cache的文件?
通过一个简单的配置,通过修改JS的版本来及时告诉浏览器,这些文件必须重新请求了,不要继续使用浏览器cache中的数据. 方案有好几个:

  1. 手动改这些js的文件名
  2. 手动改这些js的路径
  3. 通过URL Rewrite方式来改重定位js路径
  4. 通过一个在高响应服务器上的一个js配置告知页面,这个页面该链接哪些JS文件
  5. 大版本不变,小版本不断追加,等一定时间后,统一更新,高效利用cache

标注

  1. meizz的js framework还没出正式版,有兴趣在CSDN的页面翻一下
  2. Firefox修正方式

转载于:http://www.blueidea.com/tech/site/2007/4822.asp