基于自己对YUI3中on方法的喜爱，忍不住想要去自己实现它，早期本人开发了一个cSelector库，这个库是用来通过selectors来查询DOM的，类似与jQuery的selectors功能。因此，想要实现on的操作方式就非常简单了，首先说明一下YUI中on方法的语法： [javascript] Y.on(type,fn,id,context); [/javascript] id不单止是一个HTML中的id而已，它可以是css2、3中的selectors，组合查询DOM，将查询到的DOM元素添加type驱动事件fn。这种思想非常的不错。也是自己想要去模仿它的原因，一个是实践，另一个也是加深对它的思想的理解。 cSelector库中支持普通的selector，比如： [css] #id .class first-child last-child nth-child > tag only-child *= $= ^= [attr] [/css] … 了解更多
这几天看了秦歌的博客的其中一些关于XHTML和HTML，以及关于DOCTYPE的一些博文，开始关注到了DOCTYPE的一些细节的知识。促使浏览器使用XHTML1.0或者XHTML1.1还是HTML的DTD来解析文档，可是使用DOCTYPE嗅探来实现。现在浏览器的解析模式有标准模式（Standards Mode）以及所谓的怪癖模式（Quirks Mode），而标准模式的DOCTYPE的声明方式有下面的几种： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <?xml version=”1.0″ encoding=”utf-8″?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> … 了解更多
javascrpt里继承的方式很多种，有类式继承和原型继承（权威的解释：Prototypal Inheritance in JavaScript Classical Inheritance in JavaScript）。js没有像java那种只要通过一个extends关键字来声明继承的方式，它的实现方式是比较丑陋的，所以封装这个继承过程就显得尤为重要了。 下面我来说明一种链式封装继承的方式，这种方式需要扩展鼎鼎大名的method和inherits扩展方法。method是douglas crockford通过扩展Function类来方便声明方法从而出名。 [javascript] //首先来实现method扩展方法： Function.prototype.method=function(name,fn){ if(!this.prototype.name){ //验证是否已经存在该方法 this.prototype[name]=fn; } return this; } … 了解更多
在编写javascript的时候，循环是我们经常会进行的操作，尽管目前编写循环的方式多种多样，但是在性能方面还是有区别的，下面我们来看看都有那些循环方式。 第一种：普通的方式，这种方式的性能是比较差的，因为在每次循环的时候都需要计算数组的length一次，在javascript的数组操作中，对length属性的操作的性能是比较慢的，所以尽量在循环内避免使用过多的length操作，包括shift，unshift，pop等等。 [javascript] //假如arr是一个很大的数组 for(var i=0;i<arr.length;i++){ …. } [/javascript] 第二种：缓存数组的length属性,这中方式优化了不少性能，通过一个变量来缓存数组的length，这样每次循环就不需要重复计算数组的length值了。 [javascript] for(var i=0,l=arr.length;i<l;i++){ …. } [/javascript]
Javascript里面没有类、继承这样的概念，但是并不代表Javascript不能够实现“继承”。Javascript是一种基于原型链的解释语言，当然也是一种面向对象的语言。既然它面向对象，就不得不需要使用OOP这样的编程方式来编写良好的Javascript代码，编写OOP方式的代码的好处就在于易封装、广重用、易维护等等。Javascript里的知识繁多，现在来简单的讲一下我对Javascript继承的理解。 首先，我们先写一个简单的“父类”Person： [javascript] var Person=function(n){ this.name=n; } Person.prototype={ //这里Person.prototype给赋值了一个对象，有意思 getName:function(){ return this.name; } } [/javascript] 我相信上面的代码是Front-End都能看懂的。上面的代码有意思的地方是Person.prototype给赋值了一个对象。好，下面来简单实现一个“子类”Student： [javascript] var Student=function(n,a){ Person.call(this,n); … 了解更多
Writing Efficient CSS for use in the Mozilla UI 了解更多