<![CDATA[never-online]]> http://www.never-online.net/blog/ en LBS v2.0.304 Sat, 31 Jul 2010 20:18:00 +0800 60 <![CDATA[js selector设计及实现（二）——完善及优化]]> ]]> Mon, 05 Jul 2010 19:24:02 +0800 js selector设计及实现（一）

5. 除掉重复的节点

5.1 考虑selector: "div div"

上面的步骤看下来还比较容易接受，那下面有头疼的问题了。

HTML代码还是上面的代码，但换个selector来考虑，假设selector是：“div div”，如果仅是用documentElement.getElementsByTagName('div')，再循环该集合获取'div'而没有形成上述的NodeFilter函数进行过滤，再合并的时候获取的节点集合就会有重复了。
为说明问题，看下面的代码：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<html>
<body>
<div id="1">
  <div id="2">
    <div id="3"></div>
  </div>
  <div id="4">
    <div id="5"></div>
  </div>
</div>
</body>
</html>
<script type="text/javascript">
/**
HTMLElement Collection转化成Array
*/
var makeArray = (function(arr) {
  if (!!window.ActiveXObject) {
    return function(arr) {
      var result = [], len=arr.length;
      for (var i=0; i<len; i++) result.push(arr[i]);
      return result;
    }
  } else {
    return function(arr) {
      return Array.prototype.slice.call(arr,0);
    }
  }
})(),

isie = !!window.ActiveXObject;

(function () {
  var divs = document.documentElement.getElementsByTagName('div');
  var result = [];
  for (var i=0; i<divs.length; i++) {
    result = result.concat(makeArray(divs[i].getElementsByTagName('div')));
  }
  alert(result.length);
  return result; //这里的result是对的吗？
})();

!isie ? alert('正确答案是' +document.querySelectorAll('div div').length) : '';
</script>
如上面所说，我们还不能单纯的concat，如果concat后还需要除掉重复的节点（除重）。（除重代码较简单略过。）
如果除重，会有很大的性能损失。约N^2的算法。

那么考虑下怎么优化下这个性能。
从DOM的树结构入手，如果说我们第一次能拿到DOM树的第一层div节点，用第一层的div节点分别调用getElementsByTagName('div')，再合并，这就是正确的结果。
问题是没有一个方法能够获取某个tagName第一层的节点集合的方法。
但是根据树的有序原理做一个优化。
用document.documentElement.getElementByTagName('div')得到的节点集合肯定是id为[1,2,3,4,5,6]的节点集合。
树节点是一个有序的结点集合，父节点肯定是在前，子节点是在后。
如果要找到"div div"的第一层的节点就可以利用这一特性来处理，看代码吧：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<html>
<body>
<div id="1">
  <div id="2">
    <div id="3"></div>
  </div>
  <div id="4">
    <div id="5"></div>
  </div>
</div>
</body>
</html>
<script type="text/javascript">//<![CDATA[
/**
快速判断contains方法
*/
var dom_contains = document.compareDocumentPosition ? function(a, b) {
  return !!(a.compareDocumentPosition(b) & 16);
} : function(a, b){
  return a !== b && (a.contains ? a.contains(b) : true);
};
/**
HTMLElement Collection转化成Array
*/
var makeArray = (function(arr) {
  if (!!window.ActiveXObject) {
    return function(arr) {
      var result = [], len=arr.length;
      for (var i=0; i<len; i++) result.push(arr[i]);
      return result;
    }
  } else {
    return function(arr) {
      return Array.prototype.slice.call(arr,0);
    }
  }
})();

(function() {

var divs = document.documentElement.getElementsByTagName('div');
divs = makeArray(divs);

for (var i=1; i<divs.length; i++) {
  if (dom_contains(divs[i-1], divs[i])) {
  //除重，复杂度N。
  //如果dom里前者包含后者，则移者后者
  //当前循环标记-1
  //结果将是
  //第一轮：[1,3,4,5,6], i=1
  //第二轮：[1,4,5,6] i=1
  //第三轮：[1,5,6] i=1
  //第四轮：[1,6] i=1
  //第五轮：[1] i=1
    divs.splice(i,1);
    i--;
  }
}

alert(divs);

}());
//]]></script>

5.2 上述去重的缺陷
虽然上述的去重策略的性能不错，但也不是万能。上述的selector是个特例。（selector为"div div"）
上述的除重策略只能用在前一个关系符是空格，随后的一个关系符也是空格的情况下使用。
例如说selector不是包含选择符的情况下，就会有问题。例如selector为"div~div div"的情况。这时用上述的策略就会有问题。（此部分不再多述，有兴趣的同学可以试一下，画个简单树图就能明白了）
那这个时候就要用传统的除重方法——即求并集。
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<script type="text/javascript">//<![CDATA[
Array.prototype.indexOf = function(obj,fromIdx){
  var arr = this, len = arr.length;
  fromIdx=fromIdx|0;//取整
  if(fromIdx<0) fromIdx+=len;
  if(fromIdx<0) fromIdx=0;
  for(; fromIdx < len; fromIdx ++){
    if(fromIdx in arr && arr[fromIdx] === obj) return fromIdx;
  }
  return -1;
}
Array.prototype.contains = function(a) {
  return this.indexOf(a)>-1;
};
Array.prototype.uniquelize = function(){
 var ra = [];
 for(var i = 0; i < this.length; i ++){
 if(!ra.contains(this[i])){
 ra.push(this[i]);
 }
 }
 return ra;
};
Array.prototype.union = function(b){
 return this.concat(b).uniquelize();
};
alert([1,2,3].union([2,3,4]));
//]]></script>

5.3 伪类。

关系符我们没有疑问了；属性选择符我们没有疑问了；标签元素我们也没有疑问了。
最后还有伪类。上面提到我们的总体思路都是得到HTMLElements然后通过过滤函数进行筛选，伪类这里也不另外。

伪类做的时候需要注意的也就是两个较麻烦点：
  • nth伪类。——用来做斑马线很管用。div.grid:nth-child(2n)，div.grid:nth-child(2n+1)，下面会详细说。
  • not伪类。——要了解not伪类。not伪类可以这么写"div div:not([className~='test'])"，意味着not里可以递归selector。
5.3.1 nth

nth最常见的应用是用在制作斑马线。选择奇数行或偶数列。
没用过的同学先扫下盲，如nth-child伪类，在css selector里对nth-child的定义是：
引用
nth-child(N): matches elements on the basis of their positions within a parent element's list of child elements.
使用方法如：
#table tr:nth-child(2n+1)义为：选中id为table中tr元素的奇数行。

nth值的格式有两种：
引用
1. odd或even，非奇则偶
2. 表达式。 a*n+b。这个等式的结果等于当前元素在父元素下的索引。a，b变量都由用户写，也是自然数。例如2n+1（奇），2n（偶）等。
5.3.1.1 nth实现过程

例如最常见的query("#table tr:nth-child(2n+1)");选中table中tr元素的奇数行。

在这里过滤函数 = ((父元素里的索引值 - 1)是 % 2) 是否等于0。
那如何得到当前元素在父元素下的索引？——初始化时可以循环父元素的childNodes，添加自定义属性。过滤函数直接读这个HTMLElement的自定义属性当索引值。并为父元素置上标记，以免下次nth时再建一次索引。
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
  <td>test</td>
  <td>tet</td>
  <td>test</td>
</tr>
<tr id="trtest">
  <td>test nth</td>
  <td>test nth</td>
  <td>test nth</td>
</tr>
<tr>
  <td>test</td>
  <td>test</td>
  <td>test</td>
</tr>
</table>
<script>
var timestamp = new Date*1;

function buildIndex(el) {
  var p = el.parentNode;
  var c = p.childNodes;
  var index = 1;
  for (var i=0, l=c.length; i<l; i++) {
    if (c[i].tagName) c[i]._index = index++; //建索引
  }
  p._timestamp = timestamp;//时间戳
  p._length = index;//总长度
};

function getIndex(el) {
  //如果时间戳变了，则重建索引
  if (el.parentNode._timestamp!=timestamp) buildIndex(el);
  return el._index;
};

alert(getIndex(document.getElementById('trtest')));
</script>

6. selector的内部代码结构大致设计
selector也要考虑扩展，例如标准里伪类以后增加了怎么办？使用者要为自己加个几伪类怎么办？
最好的方式是将上面的selector实现抽象一下，将所有的过滤函数封装成配置一样的JSON对象，使得以后灵活的控制。

原来本来还画了个图的，后来一想算了，就几个方法，大致看下代码结构就好：
文后会给出详细的selector实现代码。
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<script type="text/javascript">
//Fox为主要命名空间
var Fox = {

  /**
  * 程序入口点，即浏览器里的document.querySelectorAll函数
  */
  query: function(selector, context) {},

  /**
  * 通用抛异常函数
  */
  exception: function(expr) {},

  /**
  * 跨浏览器兼容的contains函数，即一个元素是否是包含另一个节点
  */
  contains: function(a,b) {},

  /**
  * 跨浏览器兼容的children函数，返回一个元素下的所有子节点
  */
  children: function(el) {},

  /**
  * 得到一个树集合中第一层级的节点，即所谓的快速去重
  */
  getFirstLevelNodes: function(nodes) {},

  /**
  * 创建nth索引，方便nth查找
  */
  buildIndex: function(el) {},

  /**
  * 找到当前节点的索引值位置。
  */
  position: function(el) {},

};

//selector表达式相关的命名空间
var Expr = {

  /**
  * 表达式配置字符串方法，可以通过Util.substitute({})来替换
  */
  operators: {},

  /**
  伪类配置
  */
  pseudos: {},
  
  /**
  * 关系selector配置查找函数
  */
  relations: {},
  
  /**
  * 快捷选择符配置替换函数
  */
  shortcuts: {},

  /**
  * 通过一个attribute来判断是用内置还是getAttribute方法来获得相应的属性值。
  */
  getAttriHandle: function(attri) {},

  /**
  * 快捷选择符解析函数，将快捷选符符解析成普通选择符
  */
  parseShortcuts: function(selector) {},

  /**
  * 将一个格式化好的attribute selector数组解析成过滤函数
  */
  parseAttributesToFilter: function(attris) {},

  /**
  * 将一个格式化好的pseudos selector数组解析成过滤函数
  */
  parsePseudosToFilter: function(pseudos) {},

  /**
  * 除去字符串两边的空白字符
  */
  parseToFilter: function(selector) {}
};

//一些扩展函数的命名空间
var Util = {
  //这里略过，一些基础函数
};
</script>

7.解析优化

7.1
效率问题主要出现在除掉重复节点上。那反过来考虑，是否可以从右向左找来解决重复节点的问题呢？

7.2 反向查找

反向查找也就是从表达式的右往左找。

反向查找的优点：
如果由后向前查找，就可以解决查找出来节点重复的问题。不用去重。（据duoyi同学研究webkit的源码来看，webkit里css selector的解析顺序是由后往前找的。我想webkit查找策略也与此有一定关系。）
注：反向查找与正向相似，但是所有的过滤函数也得反着写。

反向查找的缺点：
假设要找的selector表达式为："div ul~li"（ID为test结点下所有儿子为div下所有ul里所有nextSibling为li的结点集合）
而HTML的结构为
<html>
<body>
<div id="test">
  <div>
    <ol>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
</div>
</body>
</html>
这里的结构是不符合上述的selector的，在这时也就可以发现从右往左找节点的不足——这个时候，所有回溯都必须查找到documentElement这一级，这也是个费时间的操作。
总结：由后向前回溯树，最坏情况会回溯到树的根结点。

7.3 正反查找两者结合？
  • 顺序解析最大的问题在除重，优势是确定性（确定性是指，层层往下找，如果找不到下个selector表达式的节点，则直接可以返回；后面的表达式就不需再找）。
  • 反向解析的最大问题则是在回溯不确定性，有可能回溯到根结点，优势则是不用除重。
如果这两者结合起来互补的话，那么肯定是效率较高的了。

分析下如何结合两者优势考虑查找策略：

正向查找的问题是重复，而重复节点的问题则是出现在关系选择符上。
只要selector出现集合都有可能出现重复节点，所以这包括：
  • 包含选择符" "。
  • 子对象选择符">"。
  • 所有的siblings选择符“~”。
而剩下的兄弟选择符“+”只有一个节点，不存在集合情况，因此不可能出现重复节点。

再思考下去，结合正向与反向的特性，这三者关系更适合 从右往左查找 有包含选择符与子对象选择符。
因为除掉包含选择符与子对象选择符，所有siblings的选择符集合，回溯节点后的结果是错误的。
举例：
selector为：#a~div div，在下列选择中正确结果应是e节点。
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<html>
<body>
<div id="a">
  <div id="b"></div>
  <div id="c"></div>
</div>
<div id="d"><div id="e"></div></div>
</body>
</html>
论证"~"选择符由后向前找是错误结果：
如果遇到包含选择符空格，子对象选择符">"，或所有的siblings选择符“~”都反向查找，则。

1. 先查到id为a的元素；
2. a.getElementsByTagName('div')，即是b,c
3. b,c回溯“~”关系符，c符合规则。
4. c回溯，回到a。
5. 再回溯，到body，再到html，不符合规则，抛弃。这时退出。

这里出现错误是因为关系已经复杂化，上面的selector要选的是#a的侄子，而不是子孙。
所以，"~"关系符适合正向查找。

总结：直接的线性关系从后往前查找才能保证查找的确定性，正确性，否则就从前往后查找。

把整个策略可以结合总结，并理清解析思路：
引用
由前往后查找，如遇包含选择符或子对象选择符，则开始反向查找，找到的元素集合回溯之前的关系是否正确。
举例：
selector为："#a div li~li"，查找步骤为：
  • 找到id为a的元素。
  • 接下来发现第一个是包含关系符，由后往前找；
  • 分离出关系" div li~"和确定要要找的节点li
  • 找到所有的li节点。
  • 检查所有查到的li节点与关系"div li~"是否对应。
  • 回溯"~" previousSibling关系是否符合li，符合再回溯parentNode最近一级为div的节点。
  • 只有一级的包含选择符中，用contains判断。
    • 即#a.contains(div)返回是否为true。为true返回li，否则去除该li。
需要注意的是由后往前虽然不用除重，但需要查找路径，不管用什么算法，最坏的情况仍然是遍历所有与当前结点为开始的路径，这会非常费时。
举个例，selector为：>div div~div。
这需要遍历所有div的previousSibling往前回溯，最坏会直至documentElement节点，最好也会到documentElement的子节点。
想想就会非常庞大了，要是你拿新浪的页面来玩一下，浏览器肯定运算不过来。
但这如果从左往右找，或许就会好很多。

所以，我们还要用不同的策略来进行优化，例如：如果没有包含siblings的选择符（"~"与"+"）直接从左往右找。

7.4 其他优化。

优化上面太多太多了，我列举几条吧：
  • ID查找优化。——例如"div.a span #abc。
    • 1.这时可以先找ID为abc的元素，如果没有该元素，可以将该selector略过了。
    2.如果有的话，可以回朔到最开始的selector进行确认；
    3.如果关系正确则返回ID为abc元素，否则返回空。
  • 调用内置的selector处理器。——因为selector我们都会解析成格式化好的数组，在解析时判断每段的selector是否符合调用内置选择器查找策略。
    • 例如document.querySelectorAll("div.link")直接调内置的处理器来处理即可（注：ie8-不支持）。
  • 加入特殊的策略，例如：这样的规则div>ul>li可以直接用由前往后查找的策略来处理。而且还不用除重。
8.写完代码之后的总结

写个selector或许很容易，但优化确实不易。
如果你要测试一个selector的性能，用这个selector就好了。">div div~div"这个速度上是很费时的。不过一般人也没有人这么写selector，呵呵

只看别人的代码，没人解答，不写注释，也不告诉你查找策略的优先级，让你来看性能优化后的代码将是十分痛苦的事情。
而selector的好坏，很大程度上是取决于性能，而不是结构。
之所以jquery的代码(sizzle)快，据jingpu同学说是jquery作者收集了使用者最常用哪种写法，从而进行了针对性的优化，也就是上面所说的特殊优化。
这样的80/20策略是很好的一个优化方向。
也没有人敢说自己的代码绝对一定比别人的快，只能相对比较。
比如，你最后不求并集，不对结合集排序，这样肯定相对会快一些。

最后，感觉国家，感谢JK，在一起讨论selector的过程中，让我学习到不少知识。

代码可以点这里下载，测试，呵呵点此下载
此份代码已经注释，比较简单，我没去写优化的代码，之所以代码里面不写，是因为写了解释起来很绕，熟悉思路先吧，以后详细优化的文章及代码可以抽空再写。

see also js selector设计及实现（一）]]> <![CDATA[js selector设计及实现（一）——实现思路]]> ]]> Fri, 02 Jul 2010 16:56:20 +0800 js selector设计及实现（二）
前言

前阵子和伟大的JK同学学习了一下目前我们框架里新版本的selector，这里列的是第一版selector的代码思路。
后一版本调优性能，多了些函数，从性能上与各大框架比还是有竞争力的。

说句实在话，虽然各大框架和库都实现了selector。但看他们的selector实现其他的人看上去无疑都是难看懂。
而google,baidu上query出的结果基本都是说使用方式的文章，基本没有类似针对selector设计和具体实现上的文章。
所以，决定将整个思路和实现写出来，一来是增加印象，二来是给目前想写的人以参考。

我是以我学习及写selector的角度及把我向JK学习思路和我自己的设计，代码写的思路写出来。
这篇文章我也想不到写了这么长。建议这么看比较好：
  • 不熟悉selector用户先去熟悉了休息会，再看此文；文中没有写详细的selector的具体内容，只是为了描述，大略的提了下；
  • selector了解了之后再看看思路；顺序解析还是比较容易看懂的；
  • 后文中的js代码里，我做了详细的注释，结构也和文中提的代码结构一样，有兴趣的同学可以读下，这个selector代码暂名为：Fox，接口为Fox.query(selector, context)。
我的blog没有代码高亮，所以看代码会有点累。>_<

代码可以点这里下载，测试，呵呵点此下载
此份代码已经注释，比较简单，我没去写优化的代码，之所以代码里面不写，是因为写了解释起来很绕，熟悉思路先吧，以后详细优化的文章及代码可以抽空再写。

OK，开始吧。

为什么有selector？

selector原来是用于CSS开发时方便样式与结构分离的策略。
而在如今做JS/DOM开发的时候，绝大部分的代码之一都是选择目标元素/集合。
在XML里有XPATH来实现该功能；同理的，在JS/DOM开发时自然出现了selector。

现在selector的火很大程度上除了需要感谢国家，还要感谢jquery。它如同当年Prototype带来了Ruby风格，一大批的前端开发人员都投入到jquery的怀抱。给了很多前端开发人员以快速上手，插件copy的方式来开发前端程序。
jquery是推进selector使用的催化剂。现在很多浏览器都支持了selector，但各实现都不尽相同，所以做一个适合自己的selector目前来看是有必要的。

selector简单实用，减少无技术含量的工作。
还可以重新约束一下前端的UI框架，在render接口不是耦合HTML结构，而是与CSS selector做为桥接
具体可以点这里可以看我之前写的一篇文章(降低HTML结构与脚本之间的强耦合)，这里不再多述。

selector的应用接口

selector提供给外部的接口应该尽量遵循标准。开放的接口应该包括：
  • document|element.querySelector(str)
  • document|element.querySelectorAll(str)
举例说明：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
var element = document.querySelector(selectors);
var matches = document.querySelectorAll("div.note, div.alert");

具体在代码里的表现形式
Fox.query(selector, context);

selector及其类型

selector是一种选择DOM元素/集合的一种符号。它包括以下的类型：
  • 包括通配选择符——*
  • 类型选择符——如E { sRules }
  • 属性选择符——它包含四种等式：
    • E[attr] 选择具有 attr 属性的 E
    E[attr=value] 选择具有 attr 属性且属性值等于 value 的 E
    E[attr~=value] 选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格
    E[attr|=value] 选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E
    E[attr^=value] 选择具有 attr 属性开始的值为value的 E
    E[attr$=value] 选择具有 attr 属性结尾的值为value的 E
    E[attr*=value] 选择具有 attr 属性里包含value的E
  • 包含选择符(祖先)——如E1 E2 选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。
  • 子对象选择符——如E1 > E2 选择所有作为 E1 子对象的 E2 。
  • ID选择符——#ID { sRules } 以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。
  • 类选择符——E.className { sRules } ，它是属性选择符的一种简写形式。其效果等同于E [ class ~= className ] 。
  • 伪类选择符——E : Pseudo-Classes { sRules } JS selector里取到的伪类有如下几种：
    • "first-child","last-child",  "only-child","nth-child","nth-last-child","first-of-type","last-of-type",
    "only-of-type","nth-of-type","nth-last-of-type","empty","parent",
    "not","enabled","disabled","checked","contains"
  • 伪对象选择符。E : Pseudo-Elements { sRules } 这在JS selector里可不实现（在DOM树里无法找到）
开发完的代码已支持的selector表
引用
*
E
E F
E > F
E + F
E ~ F
E.warning
E#myid
E:first-child
E:last-child
E:nth-child(n)
E:nth-last-child(n)
E:only-child
E:enabled
E:disabled
E:checked
E:contains("foo")
E:not(s)
E[foo]
E[foo="bar"]
E[foo~="bar"]
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E[foo|="bar"]
使用示例：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
//alert(Fox.query('div~div', document.body).length);
//alert(Fox.query('div~div.aa', document.body).length);
//alert(Fox.query('div span', document.body).length);
//alert(Fox.query('div div', document.body).length);
//alert(Fox.query('div>input[type="text"]', document.body).length);
//alert(Fox.query('input[type="text"]', document.body).length);
//alert(Fox.query('*[type="text"]', document.body).length);
(function nthTest() {
var arr = Fox.query('tr:nth-child(2n)');
for (var i=0; i<arr.length; i++) {
  arr[i].style.background='#eee';
}
})();

总结归纳selector语法

要想写好selector，必然要熟悉selector的语法，功能。这也是重中之重。

观察selector的语法，将所有selector分为四类：
  • 标签元素——标签就不解释了，但需要注意的是如果没有标签元素，则为选择符里的通配符。
    • 例如这样的selector："div .link"表示，div后裔节点中所有节点里属性className为link的元素集。
  • 选择符——包含“通配符、类型符、属性符。”（注：属性选择符包括了".link"这样的selector。也包括了"#id"这样的selector。）
  • 伪类——例如：last-child，first-child等伪类。
  • 关系符——包括：“祖先、儿子、相邻兄弟。”
总结，任意一个selector由上面所述四类构成。
以下是描述selector规则，伪正则描述。
引用
(关系符{1}(标签元素{1})((?:属性选择符)*)(:伪类)?)+
细心些的人应该会提出这样的问题，如果给出这样的selector：document.querySelectorAll(".link") 应该怎么理解？
——这代表着document根元素下所有className为link的节点集合。可以等价为document.querySelectorAll(" .link")（注意：.link前有空格）
也就是说，如果传入的selector第一个字符不是关系符，那么我们默认会认为它以空格关系符开始

解析selector表达式与实现思路
总体思路：由左往右一步步的方式，在查找过程中进行节点滤重。理论实现流程：
  • 1.从入口的参数进行解析，即document.querySelectorAll("div.note, div.alert")参数解析成格式化好的形式方便处理。
  • 2.循环解析出来的单个selector，将快捷选择符转换为标准选择符。如上所述，例如将#id属性选择转成[id='id']。
  • 3.用getElementsByTagName得到集合，再根据条件进行过滤。
  • 4.最后除重。将所有找到的元素集合concat连接，再除重过滤。这里顺便提一下，为什么要除重，例如：document.querySelectorAll("div a","div.alert a")，很明显，
    • "div a"包含"div.alert a"，所谓除重就是求各子selector的并集。
  • 6.之后可能会有针对不同的selector作优化或者作特殊处理。——例如nth-child、selector解析优化。
有个简单印象之后再随之实践：
引用
假设selector传入为：Fox.query("div.panel div[className='shadow']");
假设HTML结构为:
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<body>
<div id="doc">
  <div class="panel">
    <div class="sd">要找到这个节点</div>
  </div>
  <div>
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
  </div>
</div>
</body>

我们来写一下从左到右的顺序解析与查找过程：

1. 快捷方式转换。

暂且称为parseShortcut函数吧，
将"div.panel div[className='shadow']"转换成"div[className~='panel' div[className='shadow']"
这部分的代码相对简单：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<script type="text/javascript">//<![CDATA[
function parseShortcuts(selector) {
  var shortcut = [
    [/\#([\w\-]+)/g , '[id="$1"]'],//id缩略写法
    [/\.([\w\-]+)/g , '[className~="$1"]']//className缩略写法
  ];
  for (var i=0, len=shortcut.length; i<len; i++) {
    selector = selector.replace(shortcut[i][0], shortcut[i][1]);
  }
  return selector;
}
alert("div.panel div[className='shadow']返回的标准表达式为： " +parseShortcuts("div.panel div[className='shadow']"));
//]]></script>

2. 表达式解析第一步

2.1 解析关系符及标签，分离出主要关系与需要过滤的属性，上面的解析成：
selectors=[['','div[className~="panel"]'],[' ','div[className="shadow"]']];
//即selectors=[[relation,filters]];
2.2 随即我们只需要顺序循环selectors这个数组去解析表达式即可。
代码如下：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<script type="text/javascript">//<![CDATA[
function selectorParser(selector) {
  var regExp = /(^|\s*[>+~ ]\s*)(([\w\-\:.#*]+|\([^\)]*\)|\[[^\]]*\])+)(?=($|\s*[>+~ ]\s*))/g;
  var selectors = [];
  selector = selector.replace(regExp, function(all, relation, others) {
    selectors.push([relation, others]);
    return ''; //将输入参数进行替代，最后不为空，则输入的selector不合法。
  });
  if (!/\s*/.test(selector)) throw new Error(['selector unexpect expression['+selector+']']);
  return selectors;
}
alert("div[className~='panel'] div[className='shadow']第一次解析结果：\n" +selectorParser("div[className~='panel'] div[className='shadow']").join('\n'));
</script>

3. 分而治之，逐个解析关系

3.1 顺序再解析selectors变量。如第一个元素：['','div[className~="panel"]']
3.2 如上所述的流程，我们会从documentElement开始查找；
3.3 解析第一个元素''，为空，可以先从tagName里开始查找；
3.4 解析出['','div[className~="panel"]']的tagName为div；
3.5 这一步最终会得到document.documentElement.getElementTagName('div');
我们给这个结果命名为divs。

4. 分而治之，过滤得到的集合

因为['','div[className~="panel"]']所含的div节点className必须包含panel，所以我们需要将divs里的节点集合进行过滤才能得到这一级的正确结果。
这么看，我们急需一个过滤属性的函数。这个过滤函数的功能是：
4.1 输入：将div[className~="panel"]表达式传入；
4.2 输出：返回一个新函数function(el){return el.hasClass('panel');}。
注意：其它的attribute也类似，只不过需要做的是有内置属性与自定义属性之分。
4.3 最后看过程：
在返回函数之前我们还需要解析一下[className~="panel"]表达式，以特定格式存储，从而使程序进行处理。将属性选择器归纳起来的语法是：
引用
[属性名+运算符+属性值]
4.3.1 用正则表达式进行解析，存储成attris = [[属性名,运算符,表达式]]。
4.3.2 循环attris
4.3.3 根据属性名得到获取属性的方式，例如属性for在JS里是用htmlFor。而className这类的属性直接用“.”运算符就可以了，不需要用自定义属性的方式el.getAttribute("className")。
4.3.4 根据运算符，得到不同的attribute处理方式。例如~=是'el.className && (" "+el.className+" ").indexOf(" "+attriValue+" ")>-1'。
4.3.5 将上面的过程合成一个新函数，使之可以进行过滤。

代码如下：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<script type="text/javascript">//<![CDATA[
/**
单独属性过滤
*/
function parseToFilter(selector) {

  var attriReg = /\[\s*([\w\-]+)\s*([!~|^$*]?\=)?\s*(?:(["']?)([^\]'"]*)\3)?\s*\]/g,
    attris = [],
    attriFunctions = [],
    operators = {
      '~=' : 'attriHandle && (" "+attriHandle+" ").indexOf(" "+attriValue+" ")>-1',
      '=' : 'attriHandle && attriHandle==attriValue'
      /**
      '^=' : TODO,
      '$=' : TODO,
      '*=' : TODO,
      '!=' : TODO
      */
    },
    attriHandle = function(attri) {
      /* 是否使用内置.attribute形式来获取属性 */

      //内置attribute相关属性转换
      var attriMap = {
        'class': 'el.className',
        'for' : 'el.htmlFor',
        'href' : 'el.getAttribute("href", 2)'
      };

      //优先.attribute属性获取
      var nativeAttris = 'name,id,className,value,selected,checked,disabled,type,tagName,readOnly'.split(',');

      //内置属性获取
      for (var i=0, len=nativeAttris.length; i<len; i++) {
        attriMap[nativeAttris[i]] = 'el.'+nativeAttris[i];
      }

      return attriMap[attri] || 'el.getAttribute("' +attri+ '")';
    };

  //属性的格式是[[名,运算符,值]]
  selector = selector.replace(attriReg,
                function(a,b,c,d,e) {attris.push([b,c||"",e||""]);return "";});

  for (var i=0; i<attris.length; i++) {

    var getAttri = attriHandle(attris[i][0]);
    var operator = operators[attris[i][1]];
    var attriVal = attris[i][2];

    attriFunctions.push(
    operator.replace(/attriHandle/g, getAttri).replace('attriValue', attriVal)
    );

  };

  attriFunctions = 'return ' +attriFunctions.join('&&');
  return new Function("el", attriFunctions);
  
};
alert('div[className~="panel"]返回的过滤函数为： ' +parseToFilter('div[className~="panel"]'));
//]]></script>

解析流程图
以下流程先不考虑selector里有“，”号的情况，例如Fox.query("div,span")。为了简单看流程，只说明没有“，”号的情况的实现流程。（注：有","号的情况是需要求并集，再对DOM节点排序的）
http://www.never-online.net/blog/uploads/201007/selector-parser-workflow.png


see also js selector设计及实现（二）]]> <![CDATA[写前端文档]]> ]]> Mon, 07 Jun 2010 15:04:07 +0800 前端文档缺失的原因
前端开发的文档相信大多数情况下都没有后端的服务描述详细，而大多数测试也仅仅在黑盒测试，所以很多情况下对这片文档的描述都廖廖无几。
  • 前端开发的代码分散——没有规范化，没有很好的设计，大多数人仍以业务为主的开发方式。
  • 测试人员对前端仍然处于黑盒测试，有没有文档都不影响到他们的测试进程。
  • 一旦业务定型，用传统方式的文档模式，很难复制到前端开发来。——改变了开发方式（从作坊式到规范化）让人难以适应。
尝试对症下药
对于代码分散的问题需要从源头解决。从规范化开始，试点从头到尾惯穿规范化，强制的约定，使代码质量提高。
这一块需要下大力气，中间加入设计review、代码review等环节。需要注意的是粒度把控，即什么是必须的，什么是可选的，什么是约定的等有共识。
  • 功能描述——开发前的工作，对编码者来说必须收集需求。对于使用者来说，能够知道写这个代码的目的是什么，解决了什么问题，还有什么问题没有解决，或需要改进。
  • 设计描述——分享你的思想，这很重要，一个成熟的开发人员看开码的时候很多时候不是看你实现如何如何，而是看你的设计。
  • API描述——使用者快速上手。接口是代码的眼睛。命名要严谨，不能说也可这样，也可那样。经验告诉我们，接口做得不好，历史原因就会多。
  • demo/snippets——给使用的人copy/paste没什么不好。
  • 使用指南——例如库的使用指南等手册。或者说一个简单的上手教程
文档该由谁来写？
从理论上看，文档都应该由编码者来写，其实不然。一个软件的周期，可以分为：开发前，开发时，使用时，测试时，维护时。
那么各时间段上应该有不同的人来参与。缩小些范围来看的话，应该将
  • 开发前收集需求由大家参与。实现者收集后存档到文档里。此为开发目的与预期。
  • 开发时的API描述，设计描述主要由编码者来实现。
  • 开发后/维护时的demo及snippets可以由使用者来完善。
设计文档是否能自动化生成
代码注释(现在一般都用java doc)可以生成接口文档。
以往都必须自己画设计图，配上描述。那么理论上这块也应该可以通过注释加入设计的描述，通过文档生成的工具自动生成设计图。这样应该方便多了。]]> <![CDATA[Ajax还是普通Post？]]> ]]> Wed, 26 May 2010 16:07:51 +0800
  • 全自动化的错误信息回填
  • 良好的用户体验
    • 从应用的角度来看，需要考虑
    • 用户无法提交时，如何找到问题所在
    • 重要的页面是否要Ajax，普通的post是否更好？
    • 如果考虑代码可以重用（如跨域，第三方等），Ajax还是有限制。
    再从Ajax与普通Post的提交的代码上看待这一问题。
    最重要的问题是在错误信息的回显这一功能。——而这一功能单纯的后端或前端都是不能解决的，要找出一个合理的解决方案是后端结合前端JS来实现一个validator功能。
    而其它方面Ajax确实能更好的提高用户体验。但并不是主要问题。

    因此应用POST与AJAX的地方可以大概的归纳如下：
    • 大多数业务都可应用，但个别重要的，与第三方接口式的地方可以再考虑普通POST是否更适用。
    • 复杂的业务或回显信息，更多使用Ajax会更好。使代码更利用阅读和维护。
    • 跨域（如有必要的话）提交，用普通POST。
    需要注意的是：Ajax里打印日志是很重要的，在发送，接收，失败时都要有日志方便找出问题所在，否则线上处理用户的问题会让人非常的头痛。
    发送AJAX post信息时也应该在HTTP头里加上信息标识是ajax发送的。
    这方便以后的处理（例如：anti-spam，其它手持设备的普通post的支持可以根据HTTP头部来识别）。

    解决问题很容易，如果在现阶段把握当前的信息，看到以后会大概出现的问题，或者说尽可能少的留下历史问题，这才是真正公司需要的开发人员。]]>         <![CDATA[关于前端开发的那些事（一）]]> ]]> Fri, 14 May 2010 01:17:40 +0800 前 言
    一般我的blog只写些开发时遇到的坑，让大家在开发的时候少遇到这种坑，从而更好的顺畅的开发程序，
    也或许是很久没写blog了，最近这阵子不停的发博，有点上瘾的意思，今天想以发博客的方式来表达自己的思想。我没有一个更好的标题来标明主要的内容，其实不一定是前端开发的内容，:)。但本人现在做前端，所以暂且以《关于前端开发的那些事》来命名。
    这也是算是理清自己的思路，准备迎接下一场战斗，任何时刻，希望自己应该有清醒的头脑，当然在感情上最好不要这样。

    现在国内的前端团队都很年轻，换句话说就是要么是成立不久的，要么是正在建立当中。都有很多问题尚须解决，但哪些问题真正是我们现阶段要解决的呢？每个团队都有自己的答案。
    没有什么最佳实践，也没有永远的银弹，只有不停的摸索，找出适合自己的开发方式，管理方式和执行方式。
    所以，我也有自己的想法，以下的一些话，肯定也不一定全对。

    找到现在真正的问题所在
    • 我们现在缺人，请调些人过来帮帮忙。
    • 我们现在比较闲，但闲的时间也不知道利用到哪里。
    • 现在的项目管理上很混乱。需要一个管理者去沟通解决这些问题
    • 现在没有一个人可以做决策，我们需要招聘一些技术牛人来领导，引导我们作决策。
    • 现在项目中是用YUI, Jquery, dojo, 还是Prototype？
    • 大家的开发方式都很混乱，如命名，如接口，各自都有自己的一套。。。
    • 大家都在重复的造轮子，某一天share的时候发现，很多人都在做同一件事，然后，相视而笑。。。
    • 脚本库维护，请帮我们写写通用UI组件。。。
    • 新人来了怎么培养，很头疼呀。。。
    • ....
    这些问题相信前端的同学或多或少都遇到过，更或者今天你正在解决这样的问题。而我想说，请静下心来仔细想想，你现在真正遇到的问题是表象上的这些吗？

    大学有云：“知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。
    物有本末，事有终始。知所先后，则近道矣。”

    我不是照本宣科，也不要拿鸡蛋扔我，凭良心讲，是不是我们很多时候头疼医头，脚疼医脚的？
    前端开发，我们同样也需要有敏锐的洞察力找出真正的问题。
    其实每个行业都如此，上次在书上看到个故事。说的是A城市和B城市有一天建了一座8车道的大桥，但是发现每天这座大桥都堵车，于是向这两座城市的人征集修改意见。有人说拓宽车道，有人说再建一座等等等等的意见都有。但最后的解决方案是有人通过观察发现每天早上是A城市到B城市的人很多，于是堵上了。而下班时间是B城市到A城市的车多。于是一个很自然的解决办法是，上班时间A到B城市变6车道，下班时间B到A城市是6车道。
    不知道各位看到这个故事是何感想？我们现在需要的不正是这样的解决办法吗？

    缺人的问题是不是资源配置有问题，是要了解下属的工作内容，工作计划太饱和，是不是周期性的原因，而这个原因又是什么？又是不是会议太多了？不能缺人就去补人，而应该找出目前真正的问题，再讨论解决方案。

    我所遇到过缺人的问题，有会议过多，产品业务过多，一些同学的工作量安排不均匀，也没有充分了解他们的特长，发挥好他们的自身优势，工作效率最大化。
    甚至有可能还会因为没有个人发展空间的问题导致的。。。
    往往导致直接原因极有可能是项目周期性的原因。
    那好吧。我们就从这里开始说，
    有些高峰期其实我们完全可以避免。不知道各位的项目开发是怎么样的，是否是关心你下一周要做什么？是不是每天都按例写周报？而你写日报这些可能都不知道是为什么。。。现在很多团队都把敏捷开发当作互联网开发的圣经，什么scrum，XP等等。而敏捷开发的大师告诉我们的也是一种理念，没有一个精确的答案。回到正题，如果是我，我会更关心的是接下来一段时间内的计划，然后根据自己的判断做规划。例如，一个月。拥抱PM，拥包后端研发吧。让大家在这些计划当中形成共识，从而更好的拥抱变化。而上面缺人问题，很有可能是没有计划和规划好导致的。如果协调好，或许根本不存在缺人问题。
    因为不是到处都着火，所以我们应该考虑我们现在要的是不是救火队
    也或许，有些人认为上面的话相当于什么都没说。

    关于脚本库？
    脚本库是一个产品，一个项目，一个公司某一阶段的产物。
    自然就会有，不同阶段的产物不同。
    也就是不一样的产品、项目、公司，有自己各自的问题和脚本库。
    要说的是 不是你用YUI就什么事都没了，一大堆配套的解决方案没有给你。YUI也一样。
    比如：YUI2，和YUI3升级了。要你痛苦，你怎么升级？不要YUI2了？
    唉。以前没想过这个问题。OK，你升级吧，你要测试的同学拿枪指你脑袋吗。
    回到原点，重新反思，你需要的是什么，当然，我没说你不能用YUI，juery。
    任何事有利有弊，需要的是我们去发现缺的是什么，需要的是什么。
    再补一句，壶底抽薪的解决方法是重新审视自己，抽象再抽象，然后。
    瞧瞧w3c多聪明，只做标准，能忽悠，谁去它那打酱油还能卖钱。眼红得不得了。我们呢？不能这么做吗？IDL谁说只能给w3c用？

    反思自己：我们是前端开发吗？
    说到这个问题，其实与上面提到怎么培养新人的问题密切相关，如何相关？等会自然各自有各自的答案。
    在第一次做这件事之前，先想想，学校是怎么教你的。你更意愿，更想是什么样的方式来教你，来教你什么内容。
    这样你就会有自己的想法了吧？

    我本人没有什么技术，脾气比较急，对人比较严格（女的除外）。
    其实他们新人很多很多人很优秀，有可能是我们没发现挖掘出来。所以要做的事是：
    • 了解他的不足，了解他的优势。——没谁是个圣人。
    • 给一个平台，展示自己。——每个人有属于自己的舞台，如果你没有给他这个平台，十个有八个想要走。
      • 除非你给他足够高的工资，高工资的概念不是每个人都一样的。
      他原来一千块工资，你现在给他两千块，当然可以留，如果原来是一万，现在给一万一，你说呢？
      有句话说得好，一分钟有多长？这在于你在厕所里面还是在厕所外面。
      给个好平台，他可以自己得到更多。如果他还有激情，至少，他实现了自己自身的价值。
    • 帮助他们引导，而不是解决。——古语这个说得很多了，不需要多说这些了。
    • 新人来不是一上来就让他告诉他这个是一那个是二。我个人更倾向于让他看流程图。他自己理解，如果他来执行，怎么样更有执行力。
      • 如果他觉得某个地方有问题，不要否认他，也不要认为公司流程一定是对的。
      有可能原先的流程就是错的，只不过大家都在一个山洞里做事，不知道外面还有房子住。
    • 解决问题不是满分，请永远记得这句话。纵观所有行业都是如此，现在的年代技术一般不是瓶颈，中国最不缺的就是代码工。
      • 其实我想说的是，不要一成不变的做事情，人只有思考才能成长。多总结多思考，好处在于坏处，当然支持多分享。他山之石可以攻玉。
      如果以前我们的先辈们以为单车帮我们解决了走路慢的问题，那么现在我肯定漂不到北京。
    通常来说新人同学来我总是强调，我们很多人都只看到一面，特别是在自己心情不平静的时候。
    从世界的表象看来本来就是看圆，当我看只到一面的话，而不去想地球对面是什么的话永远也不知道对面是黑暗的。不是吗？
    更何况我们所见不只是这些，它是一个N维立方体。如果你看到的面越多，了解越多，你的世界就越多彩。
    所以我更愿意大家更多的去了解PM，思考，多去听听后端的工程师逻辑。了解后端工作这对我们极有好处，对于找线上问题，对于开发当中的业务理解等等都有帮助。
    我记得原来后端的新同学来的时候我还可以讲解一下后端的负载和架构部署，嘿嘿。
    而了解PM你不觉得很爽吗？你知道现在我们拿到的数据，下一步可以做什么事吗？做运营，做产品为什么这么做，交互与产品与速度如何折衷？了解之后可以多提提建议。

    还有可能。。。以后还可以考虑做PM，哈哈。
    所以，回到小标题的问题——我们，不一定是前端。

    培训，topic
    一些大的公司都有学院，一些必选课程，帮助新人来快速成长。
    也有topic这样的内容。一般来说这样的topic都是
    • 技术研究成果。例如优化flash的swf文件体积
    • 新方向。例如CSS3，HTML5。
    • 标准。例如ecma。
    但效果往往都没有太好的效果。我作为一个听者与演讲者的角度看，其原因是因为
    演讲者不知道讲什么让大家听，听众不一定感兴趣。
    其结果讲么是不知道怎么讲，或者听众人数少，亦或者大家都在用笔记本看小说。
    两者兼顾的topic相对比较少，达不到期望值。甚至有可能形成我们为之“骄傲”的形式主义。

    是不是有什么方法来解决这个问题呢？习惯从现实当中找找什么解决方案，听上去这个问题象学校一样，那么从学校说起。
    我们先假设所有的老师水平是一样的。
    在学校里，有选修课和必须课，你会听什么类型的课。
    再假设，如果老师知道你们都想问什么，都想学到什么（当然，老师的经验丰富，一般都知道）

    如果上述的情况类比到topic，做个简单的系统：
    • 开设“选修”。对所有人员在系统里进行征集问题——想听什么topic。topic的什么内容。当然演讲者也可以
      • 一定要是技术的吗？不见得。我们太多时候都以程序员的方式去思考问题了，该改改了。
      一定要是上述技术的吗？就不能是某个做得比较好的项目的项目管理，协调的经验分享？
    • 演讲者可以领取某个topic，更可以找外部的人员进行培训。
    • 最近再给个投票。
    例如我想听听整个后端的系统架构和设计思路topic。相关问题是，数据库有多少？机器多少？怎么计算带宽。怎么负载均衡。和架设CDN等知识。
    topic本身就是为了解决问题，所以只有知道问题，才有解决之道。，还可以将这些toipc的问题总结和结果出来，以后来新人了还可以让其它学习，了解得比较好的同学来讲解。还对大家的职业规划有点好处。做自己感兴趣的有共识的，才有意思。

    好象写得有点多。。。我自己都没想到写那么多，如果你看到这里，恭喜你，解脱了，你看完了。

    下次有空，再罗索下这些。
    • 不要再重复造轮子
    • 我们想了解大家即时遇到的问题
    • 让会议尽可能少些吧
    ---------------
    over。]]>         <![CDATA[上次讲了个简单的andoird开发扫盲ppt]]> ]]> Thu, 13 May 2010 15:18:17 +0800 我已转成png图了。也不怕高手BS，刚接触不久，呵呵，因为大家也没说讲啥，所以我也只能从我自己的角度理解下android的开发需要注意的内容吧。
    不习惯看图的同学也可以上slideshare上看，刚传上去。（由于ppt有动画，所以我都转成无动画版了）http://www.slideshare.net/ranklau/anroid-development1-export
    http://www.never-online.net/tutorial/android/android_01.png

    http://www.never-online.net/tutorial/android/android_02.png

    http://www.never-online.net/tutorial/android/android_03.png

    http://www.never-online.net/tutorial/android/android_04.png

    http://www.never-online.net/tutorial/android/android_05.png

    http://www.never-online.net/tutorial/android/android_06.png

    http://www.never-online.net/tutorial/android/android_07.png

    http://www.never-online.net/tutorial/android/android_08.png

    http://www.never-online.net/tutorial/android/android_09.png

    http://www.never-online.net/tutorial/android/android_10.png

    http://www.never-online.net/tutorial/android/android_11.png

    http://www.never-online.net/tutorial/android/android_12.png

    http://www.never-online.net/tutorial/android/android_13.png

    http://www.never-online.net/tutorial/android/android_14.png

    http://www.never-online.net/tutorial/android/android_15.png

    http://www.never-online.net/tutorial/android/android_16.png

    http://www.never-online.net/tutorial/android/android_17.png

    http://www.never-online.net/tutorial/android/android_18.png

    http://www.never-online.net/tutorial/android/android_19.png

    http://www.never-online.net/tutorial/android/android_20.png

    http://www.never-online.net/tutorial/android/android_21.png

    http://www.never-online.net/tutorial/android/android_22.png

    http://www.never-online.net/tutorial/android/android_23.png

    http://www.never-online.net/tutorial/android/android_24.png

    http://www.never-online.net/tutorial/android/android_25.png

    http://www.never-online.net/tutorial/android/android_26.png

    http://www.never-online.net/tutorial/android/android_27.png

    http://www.never-online.net/tutorial/android/android_28.png

    http://www.never-online.net/tutorial/android/android_29.png

    http://www.never-online.net/tutorial/android/android_30.png

    http://www.never-online.net/tutorial/android/android_31.png

    http://www.never-online.net/tutorial/android/android_32.png

    http://www.never-online.net/tutorial/android/android_33.png

    http://www.never-online.net/tutorial/android/android_34.png

    http://www.never-online.net/tutorial/android/android_35.png

    http://www.never-online.net/tutorial/android/android_36.png

    http://www.never-online.net/tutorial/android/android_37.png

    http://www.never-online.net/tutorial/android/android_38.png

    http://www.never-online.net/tutorial/android/android_39.png

    http://www.never-online.net/tutorial/android/android_40.png

    http://www.never-online.net/tutorial/android/android_41.png

    http://www.never-online.net/tutorial/android/android_42.png

    http://www.never-online.net/tutorial/android/android_43.png

    http://www.never-online.net/tutorial/android/android_44.png
    ]]>         <![CDATA[iframe里src="about:blank"的问题。]]> ]]> Tue, 11 May 2010 20:59:13 +0800
    IE下才有的问题
    首先不得不说，这个问题在IE下才会有。废话不多说了吧，直接上代码。
    Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
    <iframe src="about:blank">not support iframe element.</iframe>
    这句代码有无问题？看半天你也看不出什么来吧。
    如果放在另一个环境下就不一样了。——这个环境是https协议。
    出现现象是会弹出一个提示框，提示此网站不是全部用https，可能会危害您的安全之类的框框。。。如下图。
    http://home.cssxuexi.cn/attachment/200912/29/1_1262049402jaqn.gif


    怎么发现的？
    某次提测时，发现我写的控件在有些同学的浏览器上出现上述问题，此问题肯定是引用了某些非https协议的资源有关。
    抓包发现，请求被阻塞在about:blank这里，后修改确认我的判断没有问题。

    解决方案
    解决方法很简单，去除这种写法，或者引用一个存在的blank.html。

    好吧，让我们BS IE
    这个是不是BUG？不好说，这种现象怎么解释都可以说得过去。
    但是不能忽视的是其它的浏览器没有问题，估计IE出现这个问题的原因，要么
    • about:blank本身内部处理机制就是走的是http协议。
    • 要么是个伪协议，伪协议与https协议里无法共存，这也与ssl有关。
    另外，据不可靠消息，IE高版本，我的win7+ie8貌似无上述问题。]]>         <![CDATA[记开发firefox extension]]> ]]> Mon, 10 May 2010 20:13:08 +0800
    关于调试
    开启你的extension log功能。
    打开about:config，通过filter找到：extensions.logging.enabled，将其设置为true。
    它将使你的extension调试更方便。
    安装一个mr tech toolkit插件，可以在附加组件内容，选中某个插件右键，直接到插件目录。

    关于xul布局
    xul就不说了，语法比较简单，也支持CSS，不清楚的话还可以看参考手册，只是制作插件时需要不停的重启firefox。
    所以有个可视化编辑xul，又不需要重启firefox的工具是很重要的，可以下载xul explorer。
    布局里值得说的一点是，vbox、hbox、spacer，这两个元素是XUL布局里重要的组成部分。
    • 简单的说就是用vbox包起来的元素，子节点里的所有元素就是垂直的。
    • hbox类似，子节点所有都是横向排列。
    • spacer就是填入空白（当然，如果你不用它，直接用CSS布局也可）。
    • firefox extension里相互间没有沙箱。因此，你的各插件样式和脚本是可以相互影响的。比如脚本，你用$命名全局的，十之八九会挂。而样式如果用a{text-decoration:underline}，会影响一大片的插件，所以。一定要注意呀。
    了解这几个以后，基本你可以手写XUL代码了，当然心里也基本知道布局是什么样的了。

    鼠标右键菜单
    知道这些之后，如果你要写一个右键菜单。例如：
    Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
      <popup id="contentAreaContextMenu">
        <menuseparator />
        <menuitem id="kb-context-menu" label="右键菜单" oncommand="nsNamespace.method();" image="chrome://kb/content/new.png"/>
      </popup>
    popup的ID一定要是contentAreaContextMenu，否则你的右键菜单(contextmenu）死活是出不来滴。(如果不清楚这条，相信你会不停的去看是不是自己的脚本出问题了)
    另外，我原来想偷懒，想在xul里嵌一个iframe解决所有问题，但貌似嵌入进去后里面的textarea无法使用，完全被disabled掉了，所以后来放弃使用iframe。老老实实的用xul的textbox来做UI。

    不一致性的奇怪现象
    如果要给某个元素加css text-decoration:underline下划线，文本必须在attribute里才能加上，例如<label value="test" style="text-decoration:underline">就正常出现下划线，而如果你要是<label style="text-decoration:underline">test</label>则无效。
    而text元素又恰与上描述相反，看demo吧。
    Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
    <?xml version="1.0"?>
    <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
    <?xml-stylesheet href="mycss.css" type="text/css"?>
    <window title="test01.xul" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
     <groupbox>
     <caption label="Underline problem"/>
     <label style="color: red;text-decoration: underline">Text as element content: underline doesn't work.</label>
     <label style="color: red;text-decoration: underline" value="Text as an element attibute: underline works!"/>
     </groupbox>

     <groupbox>
     <caption label="Blink problem"/>
     <label style="color: red;text-decoration: blink">Text as element content: blink works!</label>
     <label style="color: red;text-decoration: blink" value="Text as an element attribute: blink doesn't work."/>
     </groupbox>
    </window>

    值得copy的一些代码
    读取、存储用户配置信息
    Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
    //从conf里读取存储的信息
    var prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch).getBranch("extensions.pluginname.");
    var username = prefs.getCharPref('username')||'';
    var password = prefs.getCharPref('password')||'';

    //存储用户信息到config
    var prefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
    prefs.setCharPref("username", user.value); //以字符串形式存储
    prefs.setCharPref("password", pass.value); //以字符串形式存储

    在新tab里打开一个URL
    Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
    var openUrl = function(url) {
      var wnd = window.top.getBrowser().selectedBrowser.contentWindow;
      wnd.open(url);
    };
    openUrl('http://www.never-online.net');

    关于打包发布，及自动更新
    extension更新有大概三种方式：
    • 到addon上官方注册，这个对于个人来说不用去想什么了，没什么可操作性。——略过。
    • 更新协议用https，然后到CA买证书，不知道CA的同学点这里——要银子。
    • 可以用http协议，第一次打包时将install.rdf安装文件签名，每次更新包时，用该签名来生成update.rdf文件，然后用sha1算法保证XPI安装包的正确性。——靠谱。
    在windows里，打包你需要用到两个工具，一个mcCoy，一个sha1sum.exe，说下两个的用途：
    • mcCoy，一个mozilla develop网上推荐的签名工具。可以点这里下载，如上所述，是用来签名你的XPI安装包的。
    • sha1sum.exe，一个命令行下的执行文件，用sha1算法来算XPI安装包的程序（注意，命令行下有效）。点这里下载
    签名发布xpi安装包 及 更新插件流程
    • mcCoy创建一个新key。
    • 点击install按钮找到install.rdf，使之签名。
      • 如果你的install.rdf格式正确，mcCoy程序会自动将该文件写入签名。
      如果不知道写install.rdf格式的同学看文末，我会给出template。
      （注意：如果该文件格式不对，或损坏，firefox安装时会提示该文件有误的）。
    • 签名好install.rdf之后，就可以发布了，但发布之前提醒最好先测试一下自动更新的过程是否有问题。
    • 接下来用sha1sum.exe来算你要更新的XPI更新包，算好之后，把值放到em:updateHash属性里。
    • 最后，就要用现在这个key去签名你的update.rdf文件。
      • 即点击sign按钮找到update.rdf文件进行签名。
      这个步骤和签install.rdf一样，如果你的update.rdf文件格式无误，mcCoy也会自动将update.rdf文件写入签名。
      如果不知道写update.rdf格式的同学看文末，我会给出template。
      需要注意的是：如果你的update.rdf文件有误，是会提示验签失败的，也不知道firefox会不会优化这个提示，很囧。
    • OK，退出mcCoy吧。
    特别提醒一下，请自己备份好mcCoy生成的密钥。虽然你不重装系统，它不会丢，但妨万无一失，还是备份在服务器上好。
    它的密钥在哪？——答案：开始菜单->运行 %appdata%/mozilla/mcCoy。
    丢了之后重装mcCoy直接将原来的配置覆盖即可。

    最后，给install.rdf的template及update.rdf的template
    install.rdf
    Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
    <?xml version="1.0"?>
    <RDF:RDF xmlns:em="http://www.mozilla.org/2004/em-rdf#"
     xmlns:NC="http://home.netscape.com/NC-rdf#"
     xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
     <RDF:Description RDF:about="rdf:#$amFd91"
     em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
     em:minVersion="3.0.0"
     em:maxVersion="4.0.0" />
     <RDF:Description RDF:about="urn:mozilla:install-manifest"
     em:id="test@test.com"
     em:name="插件的名字"
     em:version="插件的版本，例如1.0.0"
     em:description="插件的描述"
     em:creator="插件作者"
     em:homepageURL="插件首页"
     em:updateURL="自动更新的update.rdf文件地址。如：http://test.com/yourURL/update.rdf"
     em:iconURL="插件icon，如chrome://yourplugin/skin/icon.png"
     em:updateKey="mcCoy自动生成">
     <em:targetApplication RDF:resource="rdf:#$amFd91"/>
     </RDF:Description>
    </RDF:RDF>

    update.rdf文件
    Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
    <?xml version="1.0"?>
    <RDF:RDF xmlns:em="http://www.mozilla.org/2004/em-rdf#"
     xmlns:NC="http://home.netscape.com/NC-rdf#"
     xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
     <RDF:Description RDF:about="rdf:#$s+0Qr2"
     em:version="1.0.0">
     <em:targetApplication RDF:resource="rdf:#$v+0Qr2"/>
     </RDF:Description>
     <RDF:Description RDF:about="rdf:#$v+0Qr2"
     em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
     em:minVersion="3.0"
     em:maxVersion="4.*"
     em:updateLink="xpi更新包地址：如：http://xpurl/my.xpi"
     em:updateHash="放入算好的sha1码，如：sha1:65b163165d2117d01ee7004f47666c236a7bae4b"
     em:updateInfoURL="更新信息URL，如：http://never-online.net/blog/update_info.html" />
     <RDF:Seq RDF:about="rdf:#$r+0Qr2">
     <RDF:li RDF:resource="rdf:#$s+0Qr2"/>
     </RDF:Seq>
     <RDF:Description RDF:about="urn:mozilla:extension:my@test.com"
     em:signature="此处的签名由mcCoy自动生成">

     <em:updates RDF:resource="rdf:#$r+0Qr2"/>
     </RDF:Description>
    </RDF:RDF>
    ]]>         <![CDATA[虎年台历]]> ]]> Fri, 15 Jan 2010 00:44:10 +0800 http://home.blueidea.com/attachment/201001/4/201603_1262577683wYk6.jpg
    http://youa.baidu.com/item/41a44020cadf1c1f24af0919

    做的台历印刷量少，所以价格比普通批量印刷的小台历稍贵些，但当你看到台历后，会发现我们是用心作台历，不是敷衍了事。
    看blueidea的星级及评论你就会明白了。
    http://home.blueidea.com/apps.php?do=case&ac=lists&uid=201603&picid=48123&oid=0

    另外，也有个性卡通头像制作，例如自己的照片定制成QQ头象，具体有需求请联系我。]]>         <![CDATA[firefox里 rowspan+border+border-collapse的bug]]> ]]> Mon, 14 Dec 2009 21:12:23 +0800 后查具体情况概述为：firefox+table rowspan+border+border-collapse:collapse;
    表现情况是：第一行与最后一行正常，其余的中间行，全部都与预期的border不同。
    先看示例吧：
    Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Rank's HTML document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="ImageToolbar" content="no">
    <meta http-equiv="Creator.name" content="rank">
    <style type="text/css" title="default" media="screen"></style>
    </head>
    <body>
    <style>
    * {font-size:15px;text-decoration:none;}
    td {border-top:1px solid #000}
    </style>
    <table width="50%" border="0" style="border:1px solid #000;border-collapse:collapse;width:100%;">
      <tr>
        <th width="49%">第一列</th>
        <th width="50%">第二列</th>
      </tr>
      <tr class="">
        <td> test </td>
        <td rowspan="2"><a href="#">第一条中间没有横线</a> </td>
      </tr>
      <tr class="">
        <td>test</td>
      </tr>
      <tr class="zebra">
        <td> test </td>
        <td rowspan="2"><a href="#">可爱的firefox让我们看到了两条线</a> </td>
      </tr>
      <tr class="zebra">
        <td>test</td>
      </tr>
      <tr class="">
        <td> test </td>
        <td rowspan="2"><a href="#">可爱的firefox让我们看到了两条线</a> </td>
      </tr>
      <tr class="">
        <td>test</td>
      </tr>
      <tr class="zebra">
        <td> test </td>
        <td rowspan="2"><a href="#">可爱的firefox让我们看到了两条线</a> </td>
      </tr>
      <tr class="zebra">
        <td>test</td>
      </tr>
      <tr class="">
        <td> test </td>
        <td rowspan="2"><a href="#">最后一条中间没有横线</a> </td>
      </tr>
      <tr class="">
        <td>test</td>
      </tr>
    </table>
    </body>
    </html>
    经过验证，两种解决方法。
    • 去除border-collapse
    • 加上一个border-left或者border-right
    无独有偶，后来搜索了一下，也有前人踩到了这个坑里，它的解决方法也是：border-left:1px solid #999 important;border-left:none的方法来解决。
    (see detail:http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23698654.html)
    好在可以通过border的错觉及颜色来解决这个问题。为了偷懒，我直接用上了对方的e.g。看解决前的代码：
    Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
    <html>
    <head>
     
    <style type="text/css">
    table {
      border-collapse:collapse;
    }
    th, td {
      border: 1px black solid;
    }
    th {
      background-color: #A9AE7B;
    }
    td.right_user_img {

      border-left:none;
      background-color: #999999;
      text-align: center;
      padding: 15px;
    }

    td.left_user_img {
      border-right: none;
      background-color: #CCCCCC;
      text-align: center;
      padding: 15px;
    }
    td.left_image_join {
      background-color: #CCCCCC;
      border-left: none;
    }
    td.right_image_join {
      background-color: #999999;
      border-right: none;
    }
    img {
      border: none;
    }
    </style>
     
    </head>
    <body>
     
     <table cellspacing="0px" cellpadding="5px">
     <thead>
     <tr>
     <th></th>
     <th>Image</th>
         <th>Insert Heading Here</th>
       <th>Image</th>
       </tr>
     </thead>
     
     <tbody>
     
     <tr>
     <th>1</th>
     <td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
       <td class="left_image_join">Data</td>
       <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
     </tr>
     
     
     <tr>
     <th>2</th>
     <td class="right_image_join">Data</td>
     </tr>
     
     <tr>
     <th>3</th>
     <td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
       <td class="left_image_join">Data</td>
       <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
     </tr>
     
     <tr>
     <th>4</th>
     <td class="right_image_join">Data</td>
     </tr>
     
     <tr>
     <th>5</th>
     <td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
       <td class="left_image_join">Data</td>
       <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
     </tr>
     
     <tr>
     <th>6</th>
     <td class="right_image_join">Data</td>
     </tr>
     
     <tr>
     <th>7</th>
     <td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
       <td class="left_image_join">Data</td>
       <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
     </tr>
     
     <tr>
     <th>8</th>
     <td class="right_image_join">Data</td>
     </tr>
     
     <tr>
     <th>9</th>
     <td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
       <td class="left_image_join">Data</td>
       <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
     </tr>
     
     <tr>
     <th>10</th>
     <td class="right_image_join">Data</td>
     </tr>
     </tbody>
     </table>
     
    </body>
    </html>

    解决后的代码：
    Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
    <html>
    <head>
     
    <style type="text/css">
    table {
      border-collapse:collapse;
    }
    th, td {
      border: 1px black solid;
    }
    th {
      background-color: #A9AE7B;
    }
    td.right_user_img {
      border-left:1px solid #999999 !important; /*this solves border-collapse/rowspan bug in firefox 3 */
      border-left:none;
      background-color: #999999;
      text-align: center;
      padding: 15px;
    }

    td.left_user_img {
      border-right: none;
      background-color: #CCCCCC;
      text-align: center;
      padding: 15px;
    }
    td.left_image_join {
      background-color: #CCCCCC;
      border-left: none;
    }
    td.right_image_join {
      background-color: #999999;
      border-right: none;
    }
    img {
      border: none;
    }
    </style>
     
    </head>
    <body>
     
     <table cellspacing="0px" cellpadding="5px">
     <thead>
     <tr>
     <th></th>
     <th>Image</th>
         <th>Insert Heading Here</th>
       <th>Image</th>
       </tr>
     </thead>
     
     <tbody>
     
     <tr>
     <th>1</th>
     <td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
       <td class="left_image_join">Data</td>
       <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
     </tr>
     
     
     <tr>
     <th>2</th>
     <td class="right_image_join">Data</td>
     </tr>
     
     <tr>
     <th>3</th>
     <td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
       <td class="left_image_join">Data</td>
       <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
     </tr>
     
     <tr>
     <th>4</th>
     <td class="right_image_join">Data</td>
     </tr>
     
     <tr>
     <th>5</th>
     <td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
       <td class="left_image_join">Data</td>
       <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
     </tr>
     
     <tr>
     <th>6</th>
     <td class="right_image_join">Data</td>
     </tr>
     
     <tr>
     <th>7</th>
     <td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
       <td class="left_image_join">Data</td>
       <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
     </tr>
     
     <tr>
     <th>8</th>
     <td class="right_image_join">Data</td>
     </tr>
     
     <tr>
     <th>9</th>
     <td rowspan="2" class="left_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
       <td class="left_image_join">Data</td>
       <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png"></td>
     </tr>
     
     <tr>
     <th>10</th>
     <td class="right_image_join">Data</td>
     </tr>
     </tbody>
     </table>
     
    </body>
    </html>

    PS.好象firefox 一直以来就有这个bug。问多久前有的？至少flock就有了 [stun]]]>         <![CDATA[htc hero刷机流水帐]]> ]]> Fri, 11 Dec 2009 11:08:13 +0800 http://t3.gstatic.cn/images?q=tbn:AATHpkttucE0DM:

    首先，提醒各位，刷root要小心。

    接下来流水帐开始：
    刷root

    前阵子狠下心买了htc hero。
    自己手痒~
    想刷机，看网上的报道说刷机要拿到root权限。
    至于我为什么要刷机呢，是因为我想体验一把goggles的可视化搜索。该程序固件1.6才可用。

    刷机开始，先找了一个贴子
    点这里打开原贴页面
    照着刷，还果然是可以正常开机，开始还蛮开心的。以后刷成功不会有什么其它的影响，后来一开wifi，结果显示无法打开wifi网络。这回囧了~水货机变行货机了。 [cry]

    刷rom
    在网上搜索了很久，有人遇到相同的情况，但是对于解决此类问题的解决方法，除了再刷rom没有更好的解决方法...

    没有wifi的一天那是相当的不爽呀，在网上查了一些刷机相关资料。刷机到处都是贴子，但刷的步骤也是很繁琐，到后面终于找到一个靠谱的了：
    http://www.androidin.net/bbs/thread-23700-1-2.html（这个网站可能被墙了，看不到，用代理可上，如果觉得麻烦，本文最后会附上贴子内容）。

    确定了不刷官方rom，改刷mocado的rom，下面这条信息就有价值了：
    引用
    八、如何刷modaco的rom？
    首先从 http://android.modaco.com/conten ... aturing-wavesecure/ 下载你选择的rom，下载下来是一个zip文件，你可以把这个文件改名成update.zip，然后复制到你的sd卡上（不要放在任何文件夹里），关机，用home键+开机键开机进入recovery,选择用这个zip文件升级，等待片刻即可。
    rom的下载地址可用这个（此rom应该是被rooted了的，但请注意文章后面的注意事项）：
    HTC Generic 2.73.405.38 http://content.modaco.net/hero/update-hero-generic-2.73.405.38-rooted-signed.zip
    步骤很简单:
    把这个文件改名成update.zip，然后复制到你的sd卡上（不要放在任何文件夹里），关机，用home键+开机键开机进入recovery,选择用这个zip文件升级，等待片刻即可。
    方法经验证，有效可行，这个rom是英文的，如果要换成中文，请在market里下载more locale软件，打开拉到最下面就是简体中文。

    必装软件
    刚买此款手机的朋友如果装软件，建议首先装下下面的软件:
    • app control(安卓网上有破解版）----用于程序进程管理，软件安装与删除等功能
    • google sky map(market上有) --- google星空结合gps的功能让你惊喜不已（相关资料可以在网上搜，不多描述）
    • places directory (market上有）---gps定位你的位置及查找附件的酒店，茶馆，饭馆等功能
    • google pinyin(market上有) -- 比sougou好用，至少在g3上比sougou好用。
    • aQQ(安卓网上有）-- 手机上的qq(非官方版）。开启群消息时进程容易挂掉。
    注意事项

    另外，从上面贴子里也找到了一个信息:
    引用
    二十二、怎么获取root权限呢？
    论坛提供了方法来获取hero的root权限，但是升级rom到2.73这后这个方法就变得没用了，就算获取成功，也会让你的wifi失效，而且这个方法获取的root不能用root explorer或者sufbs来修改系统文件，只能用于一些简单的root权限，比如使用marketenabler，所以我推荐都是刷带root权限的rom来实现，这类rom可以在 http://android.modaco.com/conten ... -update-zip-format/ 找到。

    使用的modaco的rom有较强的功能（上个问题已经提及），但是它的自制rom（不是他们提供的官方rom或者官方+root权限的rom）会造成彩信接收/发送不正常，参考 http://www.androidin.net/bbs/thread-21525-1-1.html
    附android的Q&A:
    引用
    不得不说，臭屁洋也有累的时候，最近解答了很多朋友的问题，真的有些烦的感觉，想想花多一点时间给大家写一个问题集中帖，方便大家参考解决问题，也方便我给大家解答问题！（本人基本不用usb线，所以我的方法大多数是用读卡器和sd卡的，关于usb连接的问题我可能无法解答）

    ——————————————————————————————————————————

    一、什么是ROM？什么是RUU？
    大家都说有些东西太专业了，看不懂，我决定有通俗的语言来解释
    如果把你的手机看做一个房子，那么rom就是房子里的装修和家私，我们刷rom就是给房子重新装修，让你的房子更漂亮更好用（偶尔也会有装修让你很失望的情况）。
    RUU又是什么呢？RUU工具相当于专业装修队，他是你手机的厂商派来负责给你装修房子的，而且他可不仅仅是给你的房子粉粉墙或者添加几个家具，它是给你的房子彻底整一遍，把一些墙拆了，改大或者改小一些房间，家具也要重新换一遍，完全变成一个新房子，你进来还要重新买衣服窗帘和一些家具（数据肯定会丢失）。

    二、我怎么知道我手机的rom版本？这个版本是高还是低？
    进入设置，关于手机，内部版本就是你手机的rom版本，格式一般为1.23.456.7或者1.23.456.78，其中1.23为大版本号，目前最新的版本号是2.73，7或者78为小版本号（姑且这么说吧），版本号数字越大越新，456感觉为区域号。比如说目前官方提供的通用rom是 2.73.405.5，而最新的通用rom版本是2.73.405.61，其中405就是通用区域号。
    另外也有部分是一些自制版本，比如modaco或者drizzy等，他们会在内部版本或者软件版本那儿把自己的大名写进去，比如modaco 2.9,大家可以去http://android.modaco.com/category/409/htc-hero-hero-modaco-com/ 或者 http://forum.xda-developers.com/forumdisplay.php?f=508 或者在论坛搜索最新的版本情况。

    三、我的手机需要刷rom吗？刷rom有风险吗？
    hero在最新的官方版本，2.73版做了很多重要的更新，参考：http://www.androidin.net/bbs/thread-16107-1-1.html ，如果你的手机版本低于这个版本，建议刷取新的rom。许多自制的rom也会不断增加新的软件和功能，比如modaco的rom有的会带root权限或者可以自动app2sd，一般都装好了java，你可以直接下载论坛里的java版的QQ安装，大家根据自己的需要来选择是否升级。
    个人觉得hero刷rom是我玩机八年来最简单最安全的，基本不会出现变砖的可能，虽然我不能打包票，不过目前还么有人说自己刷机失败成砖的帖子吧！？

    四、我该选什么rom呢？
    官方自带的rom目前看起来最稳定，但是最新的2.73版是无法直接获得root权限（获取root后有可能会wifi失效）和recovery，对于玩手机的朋友来说，这不是好事。
    我现在使用的modaco的rom有较强的功能（上个问题已经提及），但是它的自制rom（不是他们提供的官方rom或者官方+root权限的rom）会造成彩信接收/发送不正常，参考 http://www.androidin.net/bbs/thread-21525-1-1.html
    据说drizzy的rom不存在这些问题，不过xda上对这个rom的评价不高，我也一直没有测试，熟悉的朋友可以补充一下。

    五、刷rom之前我要做什么？
    如果选择官方RUU直接升级请直接参考第六个问题，如果刷其他rom，你需要有recovery.img，recovery就是你用home键+开机键开机后能进入的一个界面，在这个界面你可以直接用sd卡上的zip的rom升级或者备份你的系统，老版本的recovery只有三个选项，无法备份系统，只能用update.zip这个文件名的文件升级，不能用任何文件名的zip文件升级。
    此外，一般刷rom之后最好wipe一下（wipe只是抹除rom意外的个人数据，不会影响rom本身的东西，比如你新刷的rom是带root的，wipe之后仍有root权限），也就是返回出厂设置一下比较好，但是这样就会丢失你的所有软件，短信彩信，联系人（备份在google上没有关系）和设置等等，备份或者不wipe都可以。

    六、我没有recovery怎么办？
    你可以使用http://www.androidin.net/bbs/viewthread.php?tid=15941 这个方法刷入最新的recovery，有些朋友会出现flash按键变成灰色，没关系的，只要你先点击备份按钮一次，flash按钮就可以用了。有了recovery，你就可以刷其他的rom了。
    recovery可以在这儿下载： http://www.androidin.net/bbs/viewthread.php?tid=21615 或者 http://android.modaco.com/conten ... device-permanently/


    七、官方的ruu升级rom怎么做？
    参考 http://www.androidin.net/bbs/viewthread.php?tid=15867 ，大家注意ruu刷机会丢失数据，请自己备份好。

    八、如何刷modaco的rom？
    首先从 http://android.modaco.com/conten ... aturing-wavesecure/ 下载你选择的rom，下载下来是一个zip文件，你可以把这个文件改名成update.zip，然后复制到你的sd卡上（不要放在任何文件夹里），关机，用home键+开机键开机进入recovery,选择用这个zip文件升级，等待片刻即可。

    九、如果我是707或者728的rom？
    这些是我们常说的亚太版的rom，它因为cid的问题，不能获取root，不能刷recovery，所以不能直接刷rom，但是现在论坛有方法解决，参考：http://www.androidin.net/bbs/viewthread.php?tid=22211

    十、为什么我刷完rom没有中文了？
    如果你刷的是官方rom或者modaco不带中文支持的rom，刷机之后是没有办法选择出中文来，建议你去市场下载一个叫做morelocale的软件（你也可以事先下载好），用它可以调出中文。

    十一、modaco为什么有那么多rom？什么意思？
    'Core' download: http://content.modaco.net/hero/2.7-update-...core-signed.zip 这个是基本的rom
    'Core Chinese' download: http://content.modaco.net/hero/2.7-update-...nese-signed.zip 这个是加了中文支持的rom，可以直接调出中文
    'Enhanced' add on pack: http://content.modaco.net/hero/2.7-update-...nced-signed.zip 这个增加了三个软件的增强版（须先刷前两个rom），三个软件一个是名片扫描，论坛已有，一个是wap浏览器，用处不大，一个是flurk，已经被强，用不了
    'Wavesecure' add on pack: http://content.modaco.net/hero/2.7-update-...cure-signed.zip 这个把手机保护软件wavesecure加到rom里，不能直接删除它，能更好的保护手机
    'Boot Sounds' add on pack: http://content.modaco.net/hero/2.7-update-...unds-signed.zip modaco的rom现在是无声启动的，刷入这个可以调出声音
    首先刷最上面两个rom中任何一个，其他的自行添加，方法和刷rom一样。

    十二、刷完的rom我想删除不要的软件可以吗？
    其实那些不用的软件很容易删除的，它们都放在system/app文件夹下，如果你有root权限，只要进去文件夹，打开读写，把不要的软件移动出来到就好了。比如，如果你不要youtube，就把system/app文件夹下的youtube.apk移动到sd卡上就好了，它就消失在你的所有程序里了。当然，有些文件放在system/lib下，你找到文件名相同的删除就好了。 root explorer的使用方法参考：http://www.androidin.net/bbs/viewthread.php?tid=6892&highlight=root%2Bexplorer

    十三、刷完mocado2.7之后，usb连接手机，sd卡会报错，为什么？
    这应该是2.7自带的一个叫做swapper的软件，此软件本来是在sd卡上制作一个缓存文件，用于程序运行的文件交换（相当于windows下的缓存，我是这么认为的），但是它会让你的sd卡报错，如果造成不便，你可以运行这个软件，swap off它，然后再settings里禁止它随机启动就好了，或者你可以用11条的方法直接删除它。（86417046已测试可行）

    十四、刷完mocado2.9之后，出现手机不断启动，为什么？
    这是因为2.9rom和之前版本的一些软件有冲突，比如你手机里有装swapper这个软件，要在把它卸载掉才可以，或者你之前做了app2sd，并分出了第三个swap分区，这样就必须要把这个分区清空才行。

    十五、我刷新rom之后，我已经有的root权限还在吗？
    除非你新刷的rom是已经有root权限的，否则刷完之后需要重新获取root权限。

    十六、用update.zip压缩包刷机和用fastboot刷机的区别？
    (update.zip)签名刷机相当于正常安装系统，fastboot刷相当于ghost镜像。Update的包比起fastboot的镜像更容易修改，且容易刷，签名作用是防止刷错包，fastboot其实属于维修或者技术人士用的，自然没有那么严格的签名认证。
    killerking 发表于 2009-4-17 01:10
    update刷机是要检查签名的。而fastboot可以刷自己编译的系统。

    十七、modaco的rom带app2sd，我改怎么操作？
    modaco的自制rom可以自动app2sd，但需要你自己先将你的sd卡分出一个ext的分区，并且是第二分区，也就是在你以后文件的分区后面，用读卡器操作比较好，可以无损分区，分区可参考 http://www.androidin.net/bbs/viewthread.php?tid=821
    分区之后再刷rom便可以自动app2sd，有朋友在刷完rom之后分区，重启后hero自动变成了app2sd。
    想查看是否app2sd成功需要你有root权限，用root explorer之类的软件到system/sd/app文件夹下看你安装的软件是否在这个文件夹下，如果在下面，则app2sd成功。

    十八、我的手机是心机开机界面，怎么刷？
    请参考此帖：http://www.androidin.net/bbs/thread-24879-1-1.html，也可以试试看这个http://forum.xda-developers.com/showthread.php?t=582336 （没测试，可能风险，刷入前请用recovery备份系统）

    十九、什么是radio，怎么刷radio？
    这个Radio指代的是通讯模块，就是手机里面负责信号部分的模块，PDA类型的手机，基本都强调这么个概念。一个是PDA，一个是手机（貌似是句废话- -），举个很简单的例子，以三星的PPC手机为例，比如i718.比如i908，他们在刷机的时候（所谓刷机就是重装系统）一般都是分两部分，第一部分刷手机部分，第二部分刷PDA部分，而且两部分基本不相干。
    axela 发表于 2009-5-7 10:47
    刷radio和刷rom的操作基本相同，radio可以在 http://android.modaco.com/conten ... -update-zip-format/ 下载，同样也是zip包，放到sd卡下，用home+挂机键 开机进入recovery，刷入这个zip文件，中间会要你重启一次（第一个选项重启），刷完后，下方会提示“fomating cache.......”，这个时候就是已经刷完了！
    radio可以在设置->关于手机里查看到，baseband版本就是。

    二十、什么是app2sd，为什么要做这个？
    google手机的软件为了安全性和稳定性都是默认安装到手机内存里，但是手机内存有限，所以我们会做app2sd操作，来让我们安装的软件放到sd卡上，而google的android系统是基于linux的，所以sd卡上本身的fat格式是不会被识别的，所以我们要分区（第二分区）出来，格式成linux认识的ext2或3或4格式，在用链接命令，把这个分区映射成一个系统文件夹system/sd（大概这个意思），把所有的软件装到这个“文件夹”下，这就是app2sd的操作。
    app2sd的操作其实是牺牲了一部分软件的速度和稳定性来换取更多的手机内存安装更多的软件。另外，app2sd只是把软件放到了sd卡上，运行软件还是需要占用手机的内存的，所以，你装了软件之后，一般手机内存还是会减少一些。你如果安装的软件在70个以内，个人觉得没有必要，呵呵，如果很多游戏软件除外，此外，使用app2sd最大的好处就是，刷一个带app2sd的rom之后，以后升级这个rom（依然带app2sd）的时候，你的软件都会完整保存（个别除外，比如htc input chinese需要重新添加几个文件到system/lib下）。

    二十一、什么是root？我需要它做什么？
    root就是你手机的boss，它可以访问和修改你手机几乎所有的文件，这些东西可能是制作手机的人不愿意你修改和触碰的东西，因为他们有可能影响到手机的稳定，还容易被一些hacker有机会入侵你的手机（ms还没有出来这类黑客）。
    既然root这么危险，我们为什么还要去获取它？其实用root的权限主要是因为我们生在天朝，我们很多东西是受限制的，我们只能利用这些权限来做我们被限制的去做的事情，比如google禁止我们看到市场里很多免费或付费软件，我们可以用marketenabler来进去看；再比如国庆以来GFW把我们的市场干掉了，很多朋友只能看不能下，不能绑定gmail，我们可以修改hosts来搞定他们，但这些都需要root权限。

    二十二、怎么获取root权限呢？
    论坛提供了方法来获取hero的root权限，但是升级rom到2.73这后这个方法就变得没用了，就算获取成功，也会让你的wifi失效，而且这个方法获取的root不能用root explorer或者sufbs来修改系统文件，只能用于一些简单的root权限，比如使用marketenabler，所以我推荐都是刷带root权限的rom来实现，这类rom可以在 http://android.modaco.com/conten ... -update-zip-format/ 找到。
    ]]>         <![CDATA[去天津拍的几张照片]]> ]]> Thu, 22 Oct 2009 21:54:15 +0800
    http://farm3.static.flickr.com/2520/4034076613_c37ab4b978.jpg

    http://farm3.static.flickr.com/2678/4034832026_b5f8f253cb.jpg

    http://farm4.static.flickr.com/3501/4034839198_c68b3f4e4f.jpg

    http://farm3.static.flickr.com/2703/4034079315_bf242bdbab.jpg
    ]]>         <![CDATA[雍和宫]]> ]]> Mon, 05 Oct 2009 02:31:16 +0800
    http://farm3.static.flickr.com/2483/3980307371_3860bfb563.jpg

    http://farm4.static.flickr.com/3513/3981053990_ce87d9800d.jpg

    http://farm3.static.flickr.com/2652/3981071112_6078069ba3.jpg

    http://farm3.static.flickr.com/2464/3981074268_88283e6ab6.jpg

    http://farm3.static.flickr.com/2528/3980317333_1b261cbd4e.jpg
    ]]>         <![CDATA[live]]> ]]> Fri, 02 Oct 2009 23:19:46 +0800 http://farm3.static.flickr.com/2526/3973999333_68ee81ef85.jpg
    http://farm4.static.flickr.com/3526/3974756038_3573d9bfa1.jpg

    http://farm3.static.flickr.com/2594/3974763928_ce12eff153.jpg

    http://farm4.static.flickr.com/3501/3974795966_b8cdb41c31.jpg

    http://farm3.static.flickr.com/2427/3974083989_a266f73d56.jpg

    http://farm3.static.flickr.com/2473/3847757952_9c40867335.jpg
    ]]>         <![CDATA[第一次用raw格式拍照]]> ]]> Wed, 30 Sep 2009 00:05:28 +0800 ，但有个比较麻烦的事就是mac机器的颜色显示与windows不一致。真是麻烦的事情。。。
    http://farm3.static.flickr.com/2533/3966449470_3a261dda9c.jpg

    http://farm4.static.flickr.com/3463/3966492366_073b35aa00.jpg

    http://farm3.static.flickr.com/2509/3965700455_34c3a316ed.jpg

    http://farm3.static.flickr.com/2599/3965672205_c70ac527e0.jpg
    ]]>