爱词霸的假计数器

2009-02-24T22:33:00.000-08:00

今天要查一个英文短句，Google了一下就到了爱词霸，短句很快就查到了。额外的事情事看见爱词霸上面有“登录”、“注册”的按钮。接下来的事情，没什么原因好叙述的。注了册，然后激活，一不小心看见页面上有个数字在跳，数字左边写的是“最新日志”。数字跳得很快，第一反应：不会是假的吧。看了十秒钟，发现数字跳得太均匀了，估计假的真不了了。

一般说来我不是喜欢寻根究底的人，无奈有firebug的情况下有些事情太简单了。先抓出这几个数字的id，然后再页面源代码中搜索了一下，就有了下面这段代码：


$(function() {
  $('#tbNews').jdNewsScroll({divWidth:166,divHeight:40,fontSize:'10.5pt'});
  var min = 214595-Math.floor(Math.random()*10);var max = 214615;
  if(min<0)min=0;>=max)min = max;
      if(min>=max)return false;
      min++;
      $('#cknum').html(min);
  }
});

于是乎，鉴定完毕。代码写得很好读，还小心避免了涨个不停。变量min初始化用的数字估计是真实的，max的就无法揣测了。只是我还是无法理解，造这种假有什么附加好处呢？难道说，我们习惯了人性本恶，在小事情上总是倾向于“不行善”？

关于全选框

2009-01-18T19:54:00.000-08:00

最近的项目里很多地方用了全选框。用一个checkbox来控制一组checkbox（后面就用group指代吧）的全选和全不选。

老实说，我并不喜欢全选框的设计。Checkbox是选择用的，其语义就在于选与不选。全选框干了些什么？选中时则选择group所有，未选中时则group全不选。也就是说，全选框的状态对应group中所有checkbox的状态。那么，如果要做得够好的话，group中的checkbox状态变化时，全选框的状态也应该同步变化。但这就有一个地方暧昧了——group中checkbox只有部分选中时，全选框该是什么状态？

对很多人来说，这个问题不是问题，规定一下就可以了——group部分选中时，全选框选中或不选中都可以，只要在同一个项目/库中一致就可以了。这样看来，这个问题就规避掉了。不过新的问题会接着产生，例如：若group中成员可以增加减少，那么新增成员的状态，全选框的状态如何“规定”。这儿的问题就很多了，为了让一切能够行得通，势必增加大量的细节定义。否则，就会产生太多的不明确行为。而大量的细节定义，又会让实现者容易产生混乱。就算最后能够正确的“完美”实现，也实在是“杀鸡用牛刀”的典范。而且，过多不直观的定义，基本可以认定，下一次的使用又会发生变化，也就是说，没有重用的价值。

那么问题的根源在哪儿呢？难道这个问题真有这么高的复杂度？

显然不是。我们要的是全选、全不选。而实际上，checkbox不适合做这个工作。由于checkbox自身带有（带状态的）语义，为了配合这些语义，问题变复杂了。我们只是需要选择，并不需要选择触发器本身的状态。只要换一个没有状态的选择触发器就可以了，例如，一个按钮，一个标签。这样的好处很明显，你可以给一个按钮/标签任何语义，例如全选和全不选，如果你高兴多点快捷操作，还可以指定选中某种状态。而且由于触发器没有状态，就没有跟踪选择对象状态的必要。这儿倒不是说跟踪状态本身不好，只不过大多数情况下，实际上没有这个需求。而一旦选择checkbox，语义上默认就需要跟踪状态。而用无状态的触发器的实例是有的，例如GMail。（我大概只能举这个例子了，因为没有搜集过这方面的资料，而且，毕竟，我不是做UI的。）

或许，有这样一篇文章，极大原因在于自己对于别人的全选框的实现很不爽。下面附上最近看了jQuery后的全选框的实现。项目中的比这复杂，因为没用任何框架。


/*
* This function is to implement a checkbox group controled by a checkbox.
* It doesn't change other behaviors in those elements.
* This function is depended on jquery.
* @param: allSelector {jquery selector} it is nothing special, though all-box should be one and possible an id.
*    boxesSelector {jquery selector} expect it as a string, don't try other selectors.
*        It should be like "input[type=checkbox][name=boxg1]".
*        Now I doesn't plan to deal with more complex selector.
*    mode {Boolean} if it's true, all-box will be checked when any in the checkbox group is checked.
*/
function CheckboxGroup(allSelector, boxesSelector, mode) {
   $(allSelector).bind('click',function(e){
       $(boxesSelector).attr("checked",$(allSelector).attr("checked"));
   });
   $(boxesSelector).bind('click',function(e){
       var num = $(boxesSelector).length;
       var cnt = $(boxesSelector+"[checked=true]").length;
       /*
       * The all-box will be checked when all checkboxes in group are checked(cnt == num),
       * or some checkboxes are checked if mode is true(mode && cnt > 0).
       */
       $(allSelector).attr("checked",((cnt == num) || (mode && cnt > 0)));
   });
}

信笔涂鸦

爱词霸的假计数器

关于全选框