西红柿爱番茄

Feed Rss

EvtWithSelector模仿YUI的on方法

12.18.2009, 没有评论, Javascript, by .

基于自己对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]

这已经适合与普通的DOM查询了。EvtWithSelector里定义了一个Evt的对象，Evt有一个on方法，调用方式跟YUI3的是一样的。比如下面的一个实例：

[javascript]
onload=function(){
Evt.on("click",function(){ alert(this.innerHTML);},"div");
}
[/javascript]
最后声明：纯粹是为了实践和喜好之目的，只提供交流和漫骂。下载EvtWithSelector

标签： | |

对DOCTYPE的一点认识

12.18.2009, 1 条评论, (X)HTML, by .

这几天看了秦歌的博客的其中一些关于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”>
  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
  • 还有一个就是目前HTML5的声明模式< !doctype html>

设置DOCTYPE的好处就在于促使浏览器使用标准模式下去解析HTML文档，这使得浏览器之间的兼容性更好，比如IE的框模型Hack都不会存在等等，跟其他的浏览器使用同一种模式来解析。但是如果不声明DOCTYPE的话，浏览器就会使用怪癖模式去解析文档，这就使得很多兼容性的问题都会出现，特别是IE浏览器下的怪癖模式。所以应该避免不声明DOCTYPE的写法。当然，有时候为了特意的去促发浏览器使用怪癖模式去解析 ，那就另当别论了，比如Google，百度的首页就没有声明DOCTYPE。

了解更多

标签： |

连缀语法的方式实现继承

12.17.2009, 没有评论, Javascript, by .

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;
}

//接下来实现inherits扩展方法，它主要是用于封装继承：
Function.method("inherits",function(parent){
this.prototype=new parent;
this.prototype.constructor=this; //纠正子类constructor的指向错误
return this;
}
[/javascript]
了解更多

标签： |

javascript循环的优化

12.16.2009, 没有评论, Javascript, 性能优化, by .

在编写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“继承”的简单理解方式

12.16.2009, 没有评论, Javascript, by .

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); //这里也非常有意思
this.age=a;
}
Student.prototype=new Person(); //给Student.prototype赋值了一个Person实例对象，记住，是实例对象。
Student.prototype.getAge=function(){
return this.age;
}
[/javascript]
了解更多

标签： |

CSS样式规则优化

12.15.2009, 没有评论, CSS, 性能优化, by .

最近思维里经常浮现的一些词是“优化”，“Web优化”，“Javascript优化”等等涉及到前端开发的优化技术。正如这个单词表达的“Front-end”，止于前端，一个网站产品最终的体现就是在浏览器内显示的界面上，这是从用户的角度来看待一个web产品的价值的一个方面，当然了，实用性和趣味性也是非常重要的一个方面。本人是搞前端开发，当然就会从浏览器的角度去思考问题。说到优化，前面的几篇文章谈到了一个方面的优化“提高页面的加载速度”，这个方面所涉及到的技术也是非常广阔的。下面来谈谈在css方面的一个优化。

以前写css的时候，都没有想到过css还能够优化，来加快页面样式的渲染速度。今天写这篇文章的思路是从这个问题开始的“浏览器是怎么解析css样式规则并且渲染页面elements的样式的？”，这个问题我也跟别人讨论过，终没结果，之后google出了一片mozilla的关于编写高效的css的文章，受益匪浅。揭开了我上面提到的那个问题，它是这样表述的：

The style system matches a rule by starting with the rightmost selector and moving to the left through the rule’s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.
Your first line of defense is the rule filtering that occurs based on the type of the key selector. The purpose of this categorization is to filter out rules so that you don’t even have to waste time trying to match them. This is the key to dramatically increasing performance. The fewer rules that you even have to check for a given element, the faster style resolution will be. As an example, if your element has an ID, then only ID rules that match your element’s ID will be checked. Only class rules for a class found on your element will be checked. Only tag rules that match your tag will be checked. Universal rules will always be checked.

上面的两端En文道出了浏览器解析css样式规则的机制：浏览器样式系统是从右到左来解析每一条css样式规则，并且从HTML文档中查询elements，并且渲染样式的。En文不太好，翻译全部有些难度，请见谅。从这个机制出发，就可以体会到很多优化css的selectors优化方法了：

了解更多

标签： |