易栈网-膘叔

现在javascript的框架越来越多，但被人关注的也就那么几个，这几天博客园上也有不少文章来介绍和学习jQuery，有司徒正美的深入jQuery源码系列，也有很多人写的基础学习，当然也有应用类的，插件类的。。formValidator好象首发就是在博客园哦。

昨天在博客园上看到有人在写着jQuery的选择器的文章，地址为：http://www.cnblogs.com/bynet/archive/2009/11/30/1613635.html，其实，在网上有这么一个页面，专门用来让你测试的，http://codylindley.com/jqueryselectors/，它非常酷，而且能够在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。你还可以尝试着一些优化代码。。。

帕兰映像就收集了一些优化的代码：http://paranimage.com/14-tips-to-improve-jquery-code/
有14条哦，建议去原页面查看。我这里只列一下标题

1. 测试并提升你的jQuery选择器水平

2. 测试jQuery包装集是否包含某些元素

3. 从jquery.org读取jQuery最新版本

4. 存储数据

5. jQuery手册常备身边

6. 在FireBug控制台记录jQuery

7. 尽可能使用ID选择器

8. 善于利用jQuery链

9. 绑定jQuery函数到$(window).load事件

10. 使用jQuery链来限定选择器，让你的代码更简洁更优雅

11. 使用回调函数同步效果

12. 学会使用自定义选择器

13. 预加载图片

14. 将你的代码测试完好

好象，帕兰也是从别的地方贴过来的
英文原文:More jQuery and General Javascript Tips to Improve Your Code
中文译文:了解更多jQuery技巧来提高你的代码/彬GO

这又是一篇来自于 帕兰映像 的文章：14条最佳JS代码编写技巧，但并非全部，我只复制粘贴了一小部分我所需要了解的，如果需要看全文，还是点上面的链接去他那里看吧。

1、总是使用 ‘var’ ，其实这个真的很重要。如果你一个不小心，你就会遇到变量重名或者无意中就引用了全局变量。
2、使用方括号记法。对于JS的对象，一般我们都是采用 aa.bb.cc来访问的，但其实也可以用aa["bb"]["cc"]来进行访问。

使用”.”号，属性名是硬代码，不能在执行时改变。使用”[ ]“方括号，属性名是一个通过计算属性名而来的字符串。字符串要以是硬代码，也可能是变量，甚至可以是一个调回一个字母串值的函数。 如果一个属性名在执行产生，方括号是必须，如果你有 “value1″, “value2″, 和 “value3″这样的属性，并且想利用变量 i=2来访问
如：MyObject["value"+i] ，你就不能写成：MyObject.value+i
并且在某些服务器端环境（PHP、Struts等）下，Form 表单被附加了 [ ] 号来表示 Form 表单在服务器端必须被当作数组来对待。如此，用”.”号来引用一个包含 [ ] 号的字段将不会执行，因为 [ ] 是引用一个 Javascript 数组的语法。所以，[ ] 号记法是必须的。推荐使用”[ ]“方括号记法是说当其需要时（明显地）总是使用它。当不是严格需要使用它的时候，它是一个私人的偏好和习惯。一个好的经验原则是，使用”.”号记法访问标准的对象属性，使用”[ ]“方括号记法访问由页面定义的对象属性。这样，document["getElementById"]() 是一个完美可行的”[ ]“方括号记法用法，但 document.getElementById() 在语法上是首选，因为 getElementById 是一个 DOM 规范中定义的一个标准文档对象属性。混合使用这两个记法使哪个是标准对象属性，哪个属性名是由上下文所定义的，在代码中显得清晰明了

3、在锚点中使用 “onclick” 替代 “javascript: Pseudo-Protocol” ：如果你想在 <a> 标签中触发Javascript 代码，选择 onclick 而非 JavaScript: pseudo-protocol；使用 onclick 来运行的 Javascript 代码必须返回 ture 或者false（or an expression than evalues to true or false [这句要怎么翻译呢? 我是这样理解的：一个优先性高于true 或 false 的表达式]）来返回标签本身：如果返回 true，则锚点的 href 将被当作一个一般的链接；如果返回 false，则 href 会被忽略。这就是为什么”return false;” 经常被包含在 onclick 所处理代码的尾部。

4、使用一元 ‘+’ 号运算符使类型转向Number：大家都知道“+”是javascript的连接符，但其实他也可以作为转换符来使用，如可以使用”+”号来把数组转换成数字。给变量或者表达式前置一个”+”号将会强制其当作一个数字来处理，而这也将使得数学”+”得以成功应用。

5、避免乱用全局命名空间。一般很少需要全部变量和函数。全局使用将可能导致 Javascript 源文件文档冲突，和代码中止。因此，一个好的做法是在一个全局命名空间内采用函数性的封装。有多个方法可以完成这个任务，有此相对比较复杂。最简单的方法 是创建一个全局对象，并把属性和方法指派给这个对象。但即使这样，命名空间也可以使用 Closures（闭包?） 来创建，并且 Private Member Variables （私有变量?） 也可以伪装于 Javascript中。

6、避免同步的 ‘Ajax’ 调用：当使用”Ajax”请求时，你要么选择异步模式，要么使用同步模式。当浏览器行为可以继续执行，异步模式将请求放在后台执行，同步模式则会等待请求完成后才继续。应该避免同步模式做出的请求。这些请求将会对用户禁用浏览器，直至请求返回。一旦服务器忙，并需要一段时间来完成请求，用户的浏览器（或者 OS）将不能做任何其他的事，直至请求超时。如果你觉得自己的情况需要同步模式，最大的可能是你需要时间来重新想一下你的设计。很少（如果有的话）实际上需要同步模式的 Ajax 请求。

这些，是我所关注的。。。一共有14条，你会关注哪条？

搜索相似图片，你会怎么搜索？上传？分析？再搜索结果 ？
tineye.com就是这样的一个搜索相似图片的网站。yhustc在分析了tineye for firefox的插件后，写了下面的文章。
不过，我怎么感觉来感觉去，这种JS的注入，都象在学搜狗输入法？把某个链接加入到收藏夹，在你要搜索的页面，点击一下这个收藏的链接。然后再点击图片就可以搜索了。。

虽说JS注入方式有很多，但最近发扬光大的却是搜狗输入法。有记忆的朋友可能会记得几年前，所谓网上流传的一段神奇代码，在一个图片非常多的页面，在地址栏里键入代码，页面中的图片就会滚动起来。。。

好相象啊。不多说了，看原文吧。
原文地址：http://www.yhustc.com/Made_a_JS_plug-in_tineye_search.html

使用方法很简单，IE用户在下面的链接上右键选择添加到收藏夹，firefox用户直接将链接拖动到书签栏就行了

tineye搜索

然后打开任意网页，比如g.cn，比如现在要搜索与google的logo相似的图片，在收藏夹里点击这个tineye的收藏就行了，此时JS文件 已经加载到该网页并且处理过所有页面中的图片了。把鼠标移动google的logo上会有个黑框，然后title也变成了“Search in tineye”，左键单击图片，就会打开新窗口来搜索图片。

测试过了，firefox，opera，ie，webkit都能用。以后看到美女图要找套图就方便了，哈，直接用这个JS处理一下然后点击就行了。

---EOF--
如果你有特殊爱好，比如胆子小，又比如有点“钻”研精神，直接看：http://www.yhustc.com/tineye.js也可以了解一下yhustc的想法。HOHO

有些东西是我们在做网页的时候需要注意的，虽然，不太常用到，但稍注意一下，可能会减轻服务器很多压力 ，以下就是一篇小技巧的文章，了解了这些知识，会给你的WEB网站减轻一些IO的消耗吧。

内容如下：
网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。其作用根据不同的重新浏览方式分为以下几种情况：
（1） 打开新窗口
如果指定cache-control的值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器，例如：
Cache-control: max-age=5
表示当访问此网页后的5秒内再次访问不会去服务器
（2） 在地址栏回车
如果值为private或must-revalidate（和网上说的不一样），则只有第一次访问时会访问服务器，以后就不再访问。如果值为no-cache，那么每次都会访问。如果值为max-age，则在过期之前不会重复访问。
（3） 按后退按扭
如果值为private、must-revalidate、max-age，则不会重访问，而如果为no-cache，则每次都重复访问
（4） 按刷新按扭
无论为何值，都会重复访问

当指定Cache-control值为“no-cache”时，访问此页面不会在Internet临时文章夹留下页面备份。
另外，通过指定“Expires”值也会影响到缓存。例如，指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问：
Expires: Fri, 31 Dec 1999 16:00:00 GMT

在ASP中，可以通过Response对象的Expires、ExpiresAbsolute属性控制Expires值；通过Response对象的CacheControl属性控制Cache-control的值，例如：
Response.ExpiresAbsolute = #2000-1-1# ' 指定绝对的过期时间，这个时间用的是服务器当地时间，会被自动转换为GMT时间
Response.Expires = 20  ' 指定相对的过期时间，以分钟为单位，表示从当前时间起过多少分钟过期。
Response.CacheControl = "no-cache"
Expires值是可以通过在Internet临时文件夹中查看临时文件的属性看到的，如：

• 出处：http://kaima.cnblogs.com
• 作者：kai.ma

在美拓的BLOG【http://meito.22web.net/?p=51】上面看到这篇文章，先说说我的理解吧。

jQuery的代码中，this是代表了当前对象。例如：$("#test").click(function(){ alert(this.value )});，在这个方法里，如果用了this，那就是相当于直接使用了 test 元素这个对象，有点象document.getElementById("#test")一样【说的我自己都迷糊了。。。】在这个方法中的this，就是ID为test的元素本身

而$(this)，则是把这个元素对象重新进行了 jQuery的包装。。。

说的太乱了。。。。直接看美拓的原文吧。

-------原文开始-------------

起初以为this和$(this)就是一模子刻出来。但是我在阅读时，和coding时发现,总不是一回事。
What is “this”?

In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.

这里的this其实是一个Html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了，Error–报了。

Error Code：

这里的$(this)是一个JQuery对象，而jQuery对象沒有title 属性，因此这样写是错误的。

JQuery拥有attr()方法可以get/set DOM对象的属性，所以正确的写法应该是这样：

正确的代码：

---EOF---

看来还是不行啊我。。语言组织能力太差