JS AOP

有时候我们需要在某个 function 执行之前或之后执行某些自定义的操作,但又不想去修改封装好的代码,这时候就可以使用 AOP 这一设计模式。

首先我们需要扩展 Function:

使用时是这样的:

view demo

JS 中的 bind 与 call

JS 中调用方法或函数时,有时候需要变更 this 的指向,通常我们会使用 call/apply,而 bind 也可以改变 this 的指向,那么他们有什么区别呢?

简单地说,call/apply 是改变 this 指向时立即调用,而 bind 只是绑定了新的指向,返回的依然是一个 function。举例说明:

#1,#2,#3 将会返回一样的值。

使用 corsproxy 反向代理解决 ajax 请求跨域问题

本地开发一个 RESTFul 网站,开发时 RESTFul 服务器和网页服务器不在一个域下面,部署后将放在同一个域下,这样,本地开发时,跨域问题就会造成请求失败。尝试各种方案都不甚理想,直到找到了 corsproxy 这个神器。

corsproxy 是一个基于 node.js 的反向代理服务,启动后会自动对 ajax 请求进行转发,由于其域是在 localhost 下面的,所以与本地服务器不存在跨域问题。

首先安装服务:

根据提示,将 ajax 请求加上 http://localhost:1337/ 前缀,比如,你要访问 http://my.domain.com/path/to/resource 这个接口,于是将其改为 http://localhost:1337/my.domain.com/path/to/resource。

齐活。

Have fun!

Javascript 闭包

闭包(Closure)的官方解释晦涩难懂,他是这么说的:

「闭包」,是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

不拿代码举例的话,谁知道这说的是个什么玩意儿?直到我看到了如下说明:

闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」。

这样说似乎还是不大容易理解,于是 MDN 写了这个例子(demo):

然后我们发现其实改成这样也是可以的(demo):

这个时候 func 是一个闭包,由返回的匿名函数函数和闭包创建时存在的 “Mozilla” 字符串形成。然后我们再来加点料(demo):

上述例子中会依次弹出「mozilla makes firefox」、「google makes chrome」、「apple makes safari」,new 了一个 class 的既视感有木有?

使用闭包还可以模拟私有属性和方法(demo):

这样做了以后就只有使用 setter 和 getter 才可以访问自己模拟的私有方法或属性了。

在循环中创建闭包时容易发生多个闭包共用最后一次循环时产生的数据这样的错误,MDN 给出的方案是使用更多的闭包(错误正确):

更复杂的例子

不过说了很多,其实最后发现「闭包」着实是一个比较蛋疼的技术,如果你只是常规的页面交互使用概率还是比较小的,关于此,MDN 如是说

如果不是因为某些特殊任务而需要闭包,在没有必要的情况下,在其它函数中创建函数是不明智的,因为闭包对脚本性能具有负面影响,包括处理速度和内存消耗。
例如,在创建新的对象或者类时,方法通常应该关联于对象的原型,而不是定义到对象的构造器中。原因是这将导致每次构造器被调用,方法都会被重新赋值一次(也就是说,为每一个对象的创建)。

参考资料:
Secrets of JavaScript Closures
闭包 – MDN

使用 jQuery 1.9 后,如何判断浏览器版本

忽如一夜春风来,我还在用 jQuery 1.8.1 的时候,无意中发现 jQuery 1.9.0 正式版已出。

于是乎惯例性的对 ShadowBlue本主题内置的脚本进行了升级。我这一换不要紧,差点成残疾,原来 1.9.0 中把 $.browser 取消了,全面改成了 $.support,也许 jQuery 的开发者认为通过特征来区分浏览器比通过浏览器版本来区分更加地有效,不过很多时候我们依然需要知道浏览器到底是啥版本。以前,通过 $.browser 我可以很容易地知道现在跑在什么浏览器上,并写成了一个方便的方法:

于是当我调用这个方法就可以知道目前到底是 IE 几(如果不是 IE 则为 100),现在不行了,于是只有使用非 jQuery 内置方法来判断:

点击查看 DEMO | 源码

亲测 IE6-9 都可以正确识别,IE10 识别为非 IE 了,不过这样也无伤大雅。

图片预读

尽管我们可以使用CSS Sprites等各种CSS手段来避免页面交互时图片加载延时的问题,但有些情况下依然需要使用JS脚本的手段来实现图片预读。

以下是基于jQuery实现图片预读的方法(用jQuery只是为了方便,你也可以使用原生js或者其他类库),以下代码请放入js文件中或者 <script/>块里(事先请保证已加载jQuery类库):

调用的时候,使用以下代码:

如果不喜欢使用jQuery,那么可以将这个方法改写为:

为你的评论框增加Ctrl+Enter提交功能

写完评论之后不能按Ctrl+回车提交,非要拿鼠标点一下,实在是痛苦的事情,不知道打消了多少懒人留言的积极性。
想给你的评论框添加这个功能么,那么就开始吧:

打开主题中comments.php文件,按Ctrl+F搜索“textarea”,然后在他的后面加上以下代码:

大概改完以后就是这么个样子:

保存提交,然后就有这个功能了,经我自己测试了,基本上市面上的浏览器都可以很好的支持,爽吗?

Have fun !