<![CDATA[never-online]]> http://www.never-online.net/blog/ en LBS v2.0.304 Sat, 04 Jul 2009 10:50:14 +0800 60 <![CDATA[新上壁纸，两张卡通版海报]]> ]]> Tue, 12 May 2009 12:48:25 +0800 http://home.blueidea.com/apps.php?do=case&ac=lists&uid=201603

http://home.blueidea.com/attachment/200905/11/201603_1242026429Z3g6_m.jpg

大图

http://home.blueidea.com/attachment/200905/11/201603_1242026787n31s_m.jpg

大图]]> <![CDATA[新作壁纸上线~(三张)]]> ]]> Mon, 13 Apr 2009 12:40:28 +0800 http://home.blueidea.com/apps.php?do=case&ac=lists&uid=201603

壁纸尺寸1440*900


王子公主系列
http://home.blueidea.com/attachment/200904/11/201603_1239424839pgjS_m.jpg


上海滩系列
http://home.blueidea.com/attachment/200904/11/201603_1239424850Rt5r_m.jpg


猪系列
http://home.blueidea.com/attachment/200904/11/201603_1239424860y0C4_m.jpg
]]> <![CDATA[发现IE6下URL path不会自动补全。]]> ]]> Wed, 25 Mar 2009 10:51:44 +0800
假如输入http://www.baidu.com
的话，在IE7及以上版本是会自动补全路径的。即URL会自动转为http://www.baidu.com/
当然，firefox 3, opera 9.5+, safari都是可以自动补path的。
但是，IE6是不会这么聪明的。:)]]> <![CDATA[提醒各位一下，IE透明会失效的。]]> ]]> Sun, 22 Mar 2009 23:30:20 +0800 在IE的高度超过某一阀值时，会产生透明度不时失效的问题，这现象比较奇怪，（会有的时候全黑，有的时候全白）你有可能无法复现。
有的时候还有可能让IE挂掉。

二、内存泄露问题
IE使用透明，最后一定要清干净。特别在大块使用透明滤镜的区域。

三、png代替opacity滤镜
为什么要这么做呢？自己做个示例。一个用png，一个用opacity。比一下就知道差多少了，使用png内存使用比opacity少至少50%增量。

四、IE6 png透明后，事件有可能会无效。这点可能需要注意一下。实在不行，咱们用gif图来当png， [lol]]]> <![CDATA[vista下IE保护模式]]> ]]> Tue, 03 Mar 2009 22:19:51 +0800
vista之保护模式
近些日子发现IE在vista的怀抱下又有了新的发展，有了一个保护模式。(internet选项->安全->启用保护模式）
这个模式用我的理解即是在一个IE进程里不允许有不同“安全级别”的IE窗体。
在这里首先解释一下什么叫不同“安全级别”，也许各人的理解都不一样——比如，信任站点和普通站点就不是一个安全级别。

引发问题
呃...那这样会有什么问题呢？
一个加入信任站点的域，如a.site.com。一个普通站点b.site.com。
当开启一个IE进程后打开b.site.com，这个时候在URL里输入a.site.com（或者有一个链接链到a.site.com），就有可能无法正常打开a.site.com，或者出现提示about:protectedmodeoff。

解决办法？
  • 遇到这么个问题，想解决办法首先是把a.site.com和b.site.com都加入到同一安全级别。但制标不制本，除非你是内网使用了，如果是在互联网上使用的话，可行性不大。
  • 服务器中转~
解决办法的示例就不多写了。如果有兄弟有更好的解决方案，请留评论或者发邮件给我bluedestiny[at]126.com，非常感谢，这篇文章算是记录case吧。
[smile]]]> <![CDATA[牛Year！今年(2009)的年历]]> ]]> Wed, 21 Jan 2009 23:51:49 +0800
前年 http://case.blueidea.com/works/view/3546/
去年 http://case.blueidea.com/works/view/6037/
更多的设计请看我在BI的设计case：http://case.blueidea.com/peoples/view/BlueMiracle/works/

同时现在我们也把台历我们也拿到百度“有啊”上卖，虽然我们每次印刷的量都不算多。如果有兴趣买这个年历，请到这里去购买
http://youa.baidu.com/shop/0b61f4fa8bbc2a357d388bbc

今年也不例外，下面是今年的年历，如果各位喜欢，可以去买一个，[lol] 。
http://www.never-online.net/blog/uploads/200901/bc1c326cdde271e542169448.jpg

http://www.never-online.net/blog/uploads/200901/d1690c3af2af0af414cecb49.jpg

http://www.never-online.net/blog/uploads/200901/30cbb90195e8f999e850cd4a.jpg

http://www.never-online.net/blog/uploads/200901/82fbc63c62d2f8d99e3d624b.jpg

http://www.never-online.net/blog/uploads/200901/56ebe4c5e75b80b78326ac55.jpg

http://www.never-online.net/blog/uploads/200901/65f816d9bc21722b32fa1c55.jpg

http://www.never-online.net/blog/uploads/200901/28e37d8a5d307a0cc9fc7a56.jpg

http://www.never-online.net/blog/uploads/200901/41fd44fabdcc687a024f5657.jpg

http://www.never-online.net/blog/uploads/200901/43eca7d2fb3d822a960a1650.jpg

http://www.never-online.net/blog/uploads/200901/efb4fd1e262ba87df724e451.jpg

http://www.never-online.net/blog/uploads/200901/0cd6b798d9388f166f068c28.jpg

http://www.never-online.net/blog/uploads/200901/67f055aee03588e5faed5028.jpg

http://www.never-online.net/blog/uploads/200901/b9923ba9aee54eafca130c29.jpg
]]> <![CDATA[debug case: onsubmit=return false依然能提交]]> ]]> Fri, 16 Jan 2009 01:48:33 +0800
先看代码。看完之后我有个问题提问一下，看看大家的回答的答案是如何的:)
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, BlueDestiny, never-online">
 <style type="text/css" title="default" media="screen">
 /*<![CDATA[*/
      body {font:85%/1.5 arial;}
 /*]]>*/
 </style>

 </head>
 <body>
    <h1>onsubmit return false</h1>
    <form action="http://www.baidu.com/s" onsubmit="return false">
      <input type="text" name="wd">
      <button type="submit">search</button>
    </form>
    &copy;<a href="http://www.never-online.net/blog">never-online</a>
 </body>
</html>

看完之后，回答请问此表单你是否可以有办法让它提交（在不禁用脚本的情况下且不能写脚本）？
不知道各位看官有没有答案。
在能写此文之前我是没有答案的，之后完全让我对现在客户端的环境越来越怪异。
它象一个具大的黑洞，一直让我们去发现，去探索。

我想我也应该是说答案的时刻了，答案是肯定的，客户端能提交。用的办法是装很多很多特殊的软件。比如
flashget 1.8。
当然，现在我们要找到这样的版本需要花很多时间了，但是你不能肯定客户端那儿就没有其它让你更suprise的软件。

所以...本文别无其他的目的，提醒各位做前端的兄弟。只有你没有看到，没有你想不到的bug，有的时候不要给传统的惯性思维所束缚。
还有另外一个想说的，其实从这里就可以提现出你对用户所做的事情，前端很象服务业，服务业如何胜出呢？除了核心的竞争力外，还要特别重视细节。
能够保证你所做的产品在任何地方都可以使用，充分体现可操作性，可访问性才能体现你的价值。 [lol]

That's all.]]> <![CDATA[在opera里css出现渲染问题]]> ]]> Tue, 13 Jan 2009 00:54:32 +0800 这是在opera里about中显示的“浏览器识别”
Opera/9.62 (Windows NT 5.1; U; zh-cn) Presto/2.1.1

描述一下bug。
用relative+absolute时出现一些渲染不正常的情况。（这个是普遍情况，也就是说容器在opera浏览器中任何位置多多少少都有类似问题）
还有一个特殊情况，如果你的容器靠近边界，例如我下面的示例在浏览器右侧，则会出现很奇怪的横向滚动条。把滚动条拖过容器的可视范围，再移动下拉框中，滚动条又不见了-_-!
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, BlueDestiny, never-online">
 <style type="text/css" title="default" media="screen">

 /*<![CDATA[*/
      body {font:85%/2 arial;}
      #navigator {width:33em;position:absolute;right:6em;top:5em;}
      #navigator .menu {float:right;}

      .more {position:relative;cursor:hand;cursor:pointer;z-index:5;}
      .more span {position:absolute;top:-.5em;left:-.1em;width:7em;display:block;background:#fff;border:1px solid #09c;}
      .more span a {display:block;}

      #link { margin-top:5em;display:block; }
 /*]]>*/

 </style>

 </head>
 <body>

      <h1>opera render problem</h1>

      <p>在opera里看左边How more的下拉菜单</p>

      <ol>
        <li>出现滚动条</li>
        <li>渲染边框时出现问题</li>
      </ol>

      <div id="navigator">

        <div class="menu">

        <span class="more" onmouseover="var o=this.getElementsByTagName('span')[0];o.style.display='block';" onmouseout="var o=this.getElementsByTagName('span')[0];o.style.display='none';">How more&gt;&gt;

          <span style="display: none;">
            <a href="#">How more&lt;&lt;</a>
            <a href="#">Javascript</a>
            <a href="#">Compatibility</a>
            <a href="#">Accessbility</a>
          </span>

        </span>

        </div>

      </div>
      
      
      
      <div id="link">&copy; <a href="http://www.never-online.net/blog">never-online</a></div>
 </body>
</html>

解决方案，
  • 1. 用relative替代成absolute，
  • 不用relative+absolute的方案。
]]> <![CDATA[keydown在opera里与其他浏览器的区别]]> ]]> Tue, 06 Jan 2009 00:56:10 +0800
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, BlueDestiny, never-online">
 <style type="text/css" title="default" media="screen">
 /*<![CDATA[*/
      body{font:13px/1.4 arial,helvetica,sans-serif;*font-size:small;*font:x-small;}
      p {text-indent:2em;}
      table {width:500px;}
      table th {background:#eea;}
      table td {background:#eed;text-align:center;}
 /*]]>*/
 </style>

 </head>
 <body>
    <h1>keydown重复触发事件在几种浏览器里的差别</h1>
    <p>
      <table cellpadding="0" cellspacing="1" border="0" width="100%">
      <tr>
        <th>IE</th>
        <th>Firefox</th>
        <th>Opera</th>
        <th>Google Chrome</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Y</td>
        <td>Y</td>
        <td>N</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      </table>
    </p>
    <p>
      也就是在opera中，keydown一直按下只会触发一次该事件，而在其他浏览器当中则都会按照一定的频率来触发
    </p>
    <p id="log">请一直按下键盘不放可以查看到效果</p>
    <script type="text/javascript">//<![CDATA[
    document.onkeydown = function(e) {
      var nKeycode = window.event ? event.keyCode : e.which;
      document.getElementById('log').innerHTML = 'keyCode is ' +nKeycode+ ', random number' +Math.random();
    }
    //]]></script>
 </body>
</html>
]]> <![CDATA[面向对象之非开发应用]]> ]]> Wed, 31 Dec 2008 01:18:33 +0800 它们完全可以在开发方式和沟通方式上用。前几天同事和我谈到敏捷开发。不也是总结了传统的开发模型与面向对象的经验吗？
对于敏捷开发不太熟，这几天查了点资料，感觉是大团队用传统的开发方式，也可以说用文档驱动，而小团队是用敏捷开发方式，以人来驱动。因为对于大团队来说有可能需求是扩散的，而不是聚合型，假设以敏捷开发（人来驱动开发），以每个人为图的一个原点，那么N个人的连通图的总边数=N*(N-1)/2，所以沟通成本是很大的。

说跑题了~ [stun] 说回OO上来。既然面向对象是前人总结的经验，而面向对象是一种万物为对象的一种开发方式，那么我们可以肯定的说，它在一定程度上可以应用于我们平常的生活当中来。

例如：
adapter模式。
当两个人沟通出现问题的时候，可以通过中间人做adpter来达成一致。

command模式。
需求不能一条一条不停的发散的扑面而来，应该是和我们去饭店吃饭一样，用一张订单来记录你想要点什么东西，将订单交由厨师来处理。

template模式。
前人已有经验，自己做的事情应该根据前人经验（template），再把一些事情特殊处理。

factory，facade，flyweight等等都可以应用到生活当中去，OO的理解可以解释很多我们遇到问题的解决方法。
[lol]]]> <![CDATA[798随拍]]> ]]> Sun, 21 Dec 2008 01:11:07 +0800 798

注：是上个星期去的，今天刚才参加经典的聚会来着。因为前端的人比较多，为有啊做了宣传，也顺便提提招人的事。 [lol]
只是放些行程中可以看到的作品，算是随拍的照片吧。去的路上有个小插曲，我是先坐地铁到三元桥，然后转401路，查到地图上要我坐到酒仙桥......
后来往回走了几站路才到798...=_=

http://farm4.static.flickr.com/3055/3104858340_69069625ab.jpg?v=0

http://farm4.static.flickr.com/3223/3104027411_5c8cd26862.jpg?v=0

http://farm4.static.flickr.com/3233/3104029277_6ae8f33cc5.jpg?v=0

http://farm4.static.flickr.com/3237/3104030645_e0d7421a17.jpg?v=0

http://farm4.static.flickr.com/3217/3104031941_500837edd0.jpg?v=0

http://farm4.static.flickr.com/3161/3104860232_3b1e40cbda.jpg?v=0

http://farm4.static.flickr.com/3035/3104027931_8877185ba4.jpg?v=0

http://farm4.static.flickr.com/3009/3104859668_4485e0c2d9.jpg?v=0

http://farm4.static.flickr.com/3082/3104861632_0a3353c83c.jpg?v=0

http://farm4.static.flickr.com/3185/3104863808_f953699077.jpg?v=0

http://farm4.static.flickr.com/3151/3104032771_4c736cf593.jpg?v=0

http://farm4.static.flickr.com/3084/3104864658_a189f1890e.jpg?v=0

http://farm4.static.flickr.com/3237/3104865222_d5e21faac7.jpg?v=0

http://farm4.static.flickr.com/3134/3104034045_09438cf028.jpg?v=0

http://farm4.static.flickr.com/3206/3104866230_2f78b0541c.jpg?v=0

http://farm4.static.flickr.com/3157/3104866734_75f0c76ea0.jpg?v=0

http://farm4.static.flickr.com/3196/3104036183_dc57dfa1de.jpg?v=0

http://farm4.static.flickr.com/3066/3104868180_5a752e9d5d.jpg?v=0

http://farm4.static.flickr.com/3003/3104868620_6290b0e95a.jpg?v=0

http://farm4.static.flickr.com/3076/3104037585_80132d8aee.jpg?v=0

http://farm4.static.flickr.com/3075/3104037961_e707a9f982.jpg?v=0

http://farm4.static.flickr.com/3137/3104870074_a751b3d077.jpg?v=0
]]> <![CDATA[ie6 sp1+ssl+ajax(XMLHttpRequest)=trouble]]> ]]> Sun, 21 Dec 2008 01:04:33 +0800 随机出现一个winet的状态码：12152。如果你还没有看到过这个困惑的状态码，请参看这里。

这至少可以说明两个问题
  • new ActiveXObject(progId)生成的XMLHttpRequest是winet的一部分。MS很喜欢资源重利用，从select这个怪胎就可以看出来了。
  • MS ie7以下对ssl的支持不够好。
纵然ajax带来很好的用户体验，给无数前端开发的人员提供了就业机会。但是我的意见还是坚持的是，在没有ajax的时候，我们的web页面也要能成功的运行。
那么，从上面这样的bad case看来，如何让我没有ajax也能照常用呢？

让我们想想解决方案

解决方案也得从长计议，

1. 出现上述的情况基数人群很少很少，那么均衡整体项目考虑，我们可以短时间内可以不解决这个问题。
2. 无论如何都解决掉这个问题，拔掉牙中这根刺。而我们又不想彻底的抛弃ajax，该怎么办。（因为我们不仅仅只有ie6，MS还有ie7和ie8。所以不能因为 sp1或某些奇怪版本的ie用户而摒弃ajax。）
3. 如果1, 2都不成立，可以直接不用ajax，改用传统的提交方式。

1和3没有什么可说了，第二种情况会更多一些，我们可以：
  • 把无刷新页面看做是一个与服务器沟通的桥梁的话，这座桥除了用XMLHttpRequest之外，还可以用iframe。形成一个connection的adapter。
  • ajax出现的异常情况下用普通的方式去提交表单。
以下用一点小示例来说明问题用iframe回调的原理：
点击此处http://www.never-online.net/code/js/iframe-callback/default.html 查看示例。

请注意，当你的浏览器是ie6 sp1，装了高级版本的MSXML也是没有用的。因为这是与IE有关，与MSXML的版本没有任何关系。

另外，再加一个比较快速的解决方案
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
      switch(this.requestor.status)
      {
        case 12029:
        case 12030:
        case 12031:
        case 12152:
        case 12159:
          // fixed ie ssl bug, retry send data
          var loader = this;
          setTimeout( function() { loader.execute.call(loader); }, 10);
          break;
          
        default:
          this.onError(this);
      }
]]> <![CDATA[radio list的细节]]> ]]> Mon, 24 Nov 2008 20:34:57 +0800 IE在DOM操作有表单控件时的bug
  • 可支持方向键
  • 当radio最后一个选中时，按小键盘后会自动跳回第一个
  • checked可自动触发onclick
  • 支持各种浏览器,cross-browser
bellow is the example:
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, BlueDestiny, never-online">
 <style type="text/css" title="default" media="screen">
 /*<![CDATA[*/
    body { font:13px/1.5 arial; }
 /*]]>*/
 </style>
 </head>
 <body>
    <h1>radio list的妙用</h1>

    <ol>
      <li>可支持方向键</li>
      <li>当radio最后一个选中时，按小键盘后会自动跳回第一个</li>
      <li>checked可自动触发onclick</li>
      <li>支持各种浏览器,cross-browser</li>
    </ol>

    <h2>demo</h2>

    <p id="wrap">
    <input name="radio_n" type="radio"><input name="radio_n" type="radio"><input name="radio_n" type="radio"><span id="ad"></span>
    </p>

    <script type="text/javascript">//<![CDATA[
    document.getElementById('wrap').onclick = function () {
      document.getElementById('ad').innerHTML = ('never-online \'s weblog') + Math.random();
    }
    //]]></script>
 </body>
</html>

see also: IE在DOM操作有表单控件时的bug]]> <![CDATA[从trim原型函数看js正则表达式的性能]]> ]]> Mon, 24 Nov 2008 20:20:21 +0800 firefox 2 的正则表达式细节

如果你看到别人写trim函数是用循环而不用正则表达式来写，请不要取笑，也许，他们就是高手。如果你很自信你的trim函数效率很高，请看完本文再下结论。

一般情况下用正则写法为：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<script type="text/javascript">//<![CDATA[
  String.prototype.trim = function () {
    return this.replace(/^[\s\t ]+|[\s\t ]+$/g, '');
  }
  s = ' never-online\'s weblog, www.never-online.net/blog ';
  alert(s.trim().length);
//]]></script>

如果遇到大数据的变长字符串的话就会发现这个是很耗资源的。效率并不高，有的时候甚至无法忍受。
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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <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" />
 <style type="text/css" title="default" media="screen">
 /*<![CDATA[*/

 /*]]>*/
 </style>
 </head>
  <body>
  <textarea>请在这里写足够多的空格或者tab字符。</textarea>
  <script type="text/javascript">//<![CDATA[
  String.prototype.trim = function () {
    return this.replace(/^[\s\t ]+|[\s\t ]+$/g, '');
  }
  var s = document.getElementsByTagName('textarea')[0].value
  var d = new Date();
  s.trim();
  alert(new Date()-d);
//]]></script>
  </body>
</html>

在解释这个原因的时候想起以前看到master regular expression里面有提到过。NFA和DFA的引擎是有区别的。js/perl/php/java/.net都是NFA引擎。
而DFA与NFA机制上的不同带来5个影响：
1. DFA对于文本串里的每一个字符只需扫描一次，比较快，但特性较少；NFA要翻来覆去吃字符、吐字符，速度慢，但是特性丰富，所以反而应用广泛，当今主要的正则表达式引擎，如Perl、Ruby、Python的re模块、Java和.NET的regex库，都是NFA的。
2. 只有NFA才支持lazy和backreference（后向引用）等特性；
3. NFA急于邀功请赏，所以最左子正则式优先匹配成功，因此偶尔会错过最佳匹配结果；DFA则是“最长的左子正则式优先匹配成功”。
4. NFA缺省采用greedy量词(就是对于/.*/、/\w+/这样的“重复n”次的模式，以贪婪方式进行，尽可能匹配更多字符，直到不得以罢手为止)，NFA会优先匹配量词。
5. NFA可能会陷入递归调用的陷阱而表现得性能极差。

backtracking（回朔）
当NFA发现自己吃多了，一个一个往回吐，边吐边找匹配，这个过程叫做backtracking。由于存在这个过程，在NFA匹配过程中，特别是在编写不合理的正则式匹配过程中，文本被反复扫描，效率损失是不小的。明白这个道理，对于写出高效的正则表达式很有帮助。

定位/分析原因
在解释上面的trim原型方法的时候。经过测试，先不说结果是否正确，有几个方法是可以化解JS NFA引擎的回朔次数的
a. 去掉限定的量词，即改成
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
 String.prototype.trim = function () {
    return this.replace(/^[\s\t ]+|[\s\t ]$/g, '');
 }
b. 去掉字符串尾匹配。即改成:
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
 String.prototype.trim = function () {
    return this.replace(/^[\s\t ]+/g, '');
 }
c.加入多行匹配。即改成：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
 String.prototype.trim = function () {
    return this.replace(/^[\s\t ]+|[\s\t ]+$/mg, '');
 }

从以上三种改法结合文中开头的NFA资料，我们可以大概的知道trim性能出现问题的原因
  • 量词限定将优先匹配。
  • 量词限定在结尾可能会使JS的正则引擎不停的回朔，出现递归的一个陷阱，这个递归的深度太深。如果字符串更大一点应该会出现栈溢出了。
  • 多行既然能够匹配，而且性能消耗不大。性能上没有任何问题，从一个写这个正则程序的人角度上去看，多行明显比单行要替换的空串多得多。所以第二点的结论应该是对的
改良
首先确定匹配字符串的开始正则是没有任何效率问题的。而匹配结束的时候会出现性能问题，那可以采用正则与传统相结合来改善这个trim性能问题。

例如：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<script type="text/javascript">//<![CDATA[
  String.prototype.trim = function () {
    var s = this.replace(/^[\s\t ]+/g, '');
    从s后端开始查找，并回循环到最后一个非空字符串，代码略。
  }
//]]></script>

see also:firefox 2 的正则表达式细节]]> <![CDATA[构建通用UI控件的那点事]]> ]]> Sat, 22 Nov 2008 00:37:10 +0800
在应用当中如何构建一个比较灵活的UI控件是一个比较让人头痛的问题。

本文将自己的一些经验和思路拿出来和大家讨论一下，在这里并不想用设计模式的理论上去套，如果硬套上去感觉有点象是为了理论而理论了。但基本出发点是一样的。
为了少写和易于维护代码，所以我们尽量在前期做好设计。

首先，先概括一下我们做程序时应该遵循的大概原则。
  • 无强依赖
  • 事件模型
  • 易扩展性
  • 接口统一
  • 无硬偏码
  • 单一职责
  • 易用性
  • 简单灵活
无依赖性
比如你有一个很好的库，例如YUI之类的基础框架。如果你把UI控件很多的代码都依赖于这个框架，假设这个框架升级了大版本，你的代码将很有可能重构一次。或者再设想一个情况，如果你的控件依赖了好几个文件。我们在一个页面只需要用到一个UI控件，那么我们也不得不把所依赖的文件都链进来。这无疑增加了http请求。这时你可能会说，可以合并几个所依赖的文件。但是你是不是违被了你的初衷呢？——管理起来又复杂了。
在这里我不是说毫不依赖于框架。而是有所为有所不为。比如，如果你只在框架里用到判断是否浏览器是否为IE，何苦依赖于一个大的框架呢？一句!!window.ActiveXObject不就行了吗？
无依赖这点如何做是一个项目里评估并决策的过程，因此是否依赖根据实据情况而定。如果在这一点上我能为各位提一个醒，对一些朋友有所帮助就足矣。

事件模型
假设我们把一个框架/UI控件看成一个金字塔型，或者看作一个树结构。
如果你是喜欢一句代码就把一个UI控件生成，且控件帮你做所有的事的话，那么只能说这个UI控件是整个框架或者继承树的叶子（最末端）。通常这样做的后果是欠缺灵活，哪天需求变了，你的UI控件就必须得重写。我们现在的编程都是事件驱动的，因此，在很多情况下，灵活的事件机制可以达到象人的关节一样，练散打也可以，打太极也行。如何做就看你怎么用了。
关于这一点，我们可以向操作系统来学习。比如：DragDrop的设计，可以看做是实现一个事件模型；它完全可以说是一套事件驱动编程的典范。关于这一点以前也写过一篇文章。
详细的设计及JS伪代码可以参看一下我的这篇文章——设计简单可重用的拖动(DragDrop)库.。

易扩展性
易扩展是指至少在UI控件分层的时候应该有一个程序员可操作的层，这也是YUI的示例里还会有这么多的代码的原因。

接口统一
事实上我想我们应该把它和数据抽象联系起来。先言归正传吧，为什么我们要有一个统一的接口供使用者调用呢？
假设一个Tip组件，一个Dialog组件，你会怎么定义什么名字给使用该控件的人调用？
是这样？
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
var tip = new Tip(...);
var dlg = new Dialog(...);

tip.showTip();
dlg.showDialog();

这个思路是没有错的。而且使用该控件的人应该也没有什么怨言的了。但仔细考虑一下我们的设计：
首先我们都可以把他们归属于container类，（都可以说他们都是一个容器的扩展，且不说是is a container还是has a container的关系）
因此，我们可以把一个container定义一组统一的接口。例如显示，隐藏，设置坐标等接口，也可以包括设置left,top,width,height等等属性，他们应该是一样的公用接口。以上的代码因为没有在设计上把公用的接口抽象出来，虽然我们不完全面向对象，但至少接口也可算作是公用的约定。因此上面的代码个人觉得可以适当修改为：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
var tip = new Tip(...);
var dlg = new Dialog(...);
tip.show();
dlg.show();

无硬编码
硬编码是一个让人头疼的问题。举个例子：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
var img = document.getElementsByClassName('img-k');
for (var i=0, l=img.length; i<l; i++)
...
上面代码里这个'img-k'是什么类名对于维护这份代码的人完全不可知，他为了知道这代码的作用，得切换到HTML，找到HTML里img-k的结构，再分析JS获取该className元素集合的作用是什么。
假如改成以下这样：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
var dragDropClassName = 'img-k';
var img = document.getElementsByClassName(dragDropClassName);
for (var i=0, l=img.length; i<l; i++)
...
是不是会清晰多了。

单一职责
比如一个控件Dialog里面，你就不应该把控制坐标的代码在控件里面写，应当委托给一个坐标控制器。
一个基础的tabview里面就不应该写死结构。
如果坐标由Dialog来管，那么你UI控件里会有越来越多这样的代码。
如果tabview这样的标准结构：
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<div id="tabview">
  <ul>
    <li>tab1</li>
    <li>tab2</li>
  <ul>
  <div>
    <div>content1</div>
    <div>content2</div>
  </div>
</div>
代码结构很明显，是一个tab节点对应一个内容节点。在你的代码里是可以应付的。
假设一个tabview是纵向的tab排列。亦或者结构有变，我要改变HTML结构。你就比较麻烦了。这里又出现另一个问题，如何应付HTML结构与脚本代码的高耦合呢？
请参看这篇文章——降低HTML结构与脚本之间的强耦合 ，这里就暂不过多描述了。
把话说回来。tabview在我看来只是一个管理器，控制tabview的tab节点的事件触发我们定义好的事件模型。他不负责组织tabview的结构。
UI控件应该分层，但不要超过三层。每层都有他们的职责。让他们该干嘛干嘛，不要一个控件把所有的好事做完。

易用性，简单灵活：
这似乎和单一职责相矛盾。如果说要简单灵活，又要易用性好。就有必要在UI框架的叶端为其做一个能够足够满足大多数人的一个应用。
一个框架拆分得多了，学习成本似乎要提高。因为使用者必须了解更多的类型用来拼装成想要的一个应用。积木要搭好，还要看你这个积木的结构是怎么样的。
可以说，学习一个框架与学习一门新语言一样让人心烦。它使我们在学习成本，易用性，单一职责上面要做一个权衡。
需求永远都是我们的指路明灯。我个人觉得在这点上做得好不好，可以从代码架构上看出一个人的整体水平。
简单灵活的使用可以体现在我们的代码的传参，如果是一个UI控件，我会建议如果有标准循标准，否则建议传json，而不是传统的参数类型。一是为了以后你能很好的扩展你控件的参数个数。二是给使用者不必死记硬背参数的顺序。

YUI之所以受程序员的青睐，是因为他可以让我们不考虑兼容，提供了基础框架，
JQuery之所以精彩是因为他为我们的开发带来了具大的便利，也就是我们所说的易用性。

任何一个框架都是一个迭代和完善的一个过程，重构不可避免，没有完全无bug的程序，设计本就是一个自由体。

本文纯属自己的漫谈，如有不对，请各位及时指出。

see also:
剖析Prototype 1.6框架(一) 设计
剖析Prototype 1.6框架(二) 实现 ]]>