welefen http://www.welefen.com 风为人世在，在世人为风。 Thu, 02 Sep 2010 02:19:39 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 MBTI在线职业测试 http://www.welefen.com/mbti%e5%9c%a8%e7%ba%bf%e8%81%8c%e4%b8%9a%e6%b5%8b%e8%af%95.html http://www.welefen.com/mbti%e5%9c%a8%e7%ba%bf%e8%81%8c%e4%b8%9a%e6%b5%8b%e8%af%95.html#comments Thu, 26 Aug 2010 01:39:52 +0000 welefen http://www.welefen.com/?p=326 MBTI是什么？

MBTI 人格理论的基础是著名心理学家卡尔·荣格先生关于心理类型的划分，后经一对母女Katharine Cook Briggs 与Isabel Briggs Myers 研究并加以发展。

四个维度

共有四个维度：

MBTI 人格共有四个维度，每个维度有两个方向，共计八个方面。

分别是：

外向（E） 和 内向（I）

感觉（S） 和 直觉（N）

思考（T） 和 情感（F）

判断（J） 和 知觉（P）

十六种类型

四个维度，两两组合，共有十六种类型。以各个维度的字母表示类型，如下：

ESFP            ISFP               ENFJ              ENFP

ESTP            ISTP               INFJ               INFP

ESFJ            ISFJ                ENTP              INTP

ESTJ            ISTJ                ENTJ              INTJ

四个维度在每个人身上会有不同的比重，不同的比重会导致不同的表现，关键在于各个 　　维度上的人均指数和相对指数的大小。

更多介绍：http://baike.baidu.com/view/3062806.htm?fr=ala0_1

MBIT在线测试

本来想在网上找个地方测试下，找了好久都没找到在线测试。下了个小决心，决定自己写个。

花了2个小时给整出来了。

在线地址：http://www.welefen.com/lab/mbti/

]]> http://www.welefen.com/mbti%e5%9c%a8%e7%ba%bf%e8%81%8c%e4%b8%9a%e6%b5%8b%e8%af%95.html/feed 0 月陀岛之行 http://www.welefen.com/%e6%9c%88%e9%99%80%e5%b2%9b%e4%b9%8b%e8%a1%8c.html http://www.welefen.com/%e6%9c%88%e9%99%80%e5%b2%9b%e4%b9%8b%e8%a1%8c.html#comments Mon, 23 Aug 2010 03:54:49 +0000 welefen http://www.welefen.com/?p=304 周末space大bui，带了媳妇去月陀岛，由于下雨的关系，玩的地方并不多。发几张照片纪念下。

100821A000 100821A007 100822A000 100822A002 100822A003 100822A005 100822A007 100822A012 100822A014 100822A021 100822A025 100822A030 100822A034 100822A037 ]]> http://www.welefen.com/%e6%9c%88%e9%99%80%e5%b2%9b%e4%b9%8b%e8%a1%8c.html/feed 2 巧用XSS为实际需求服务 http://www.welefen.com/use-xss-for-program.html http://www.welefen.com/use-xss-for-program.html#comments Sat, 26 Jun 2010 01:39:14 +0000 welefen http://www.welefen.com/?p=283 昨天早上和JerryQu骑车上班的途中聊天，他这几天遇到一个特殊的需求。

页面中调用一个通过CMS发布的callback，callback返回一段字符串内容，然后页面拿到内容后直接innerHTML塞到某个ID里面去。本身这是个很简单的需求。

但是现在需求复杂了，希望callback返回内容中有一段脚本，用来操作页面的DOM。不想改变页面的原因是，要走整套上线流程，非常麻烦，你们懂的。

也就是本事返回的内容是“这是返回的内容”，现在变成“这是返回的内容<script>这里增加一些脚本操作页面</script>”，但是这样直接innerHTML进去的话是不被执行的。

一种解决方案是，将script标签变成iframe,嵌套一个新的页面（这个页面也是通过CMS发布，所以也很方便），然后iframe的页面用来操作父页面的DOM（当然是在同一个域下）。

后来想到了一种解决方案。利用XSS经常用的方式，插入一个img标签，设置src为一个不存在的URL，然后再onerror事件里操作页面的DOM，如：

返回内容为“这是返回的内容<img src=”h” onerror=”这里的脚本用来操作页面DOM”>”。

经测试，一切OK。

]]> http://www.welefen.com/use-xss-for-program.html/feed 0 按字节截取字符串 http://www.welefen.com/substr-by-byte.html http://www.welefen.com/substr-by-byte.html#comments Tue, 09 Mar 2010 04:02:58 +0000 welefen http://www.welefen.com/?p=273 在JS中，由于中文和英文是同等对待的，但有时候我们希望是一个中文按两个字节算，这就出现了按字节截取字符串的功能。下面列举了 2种实现方式。

循环检测

这种实现方式来自于Tangram，具体实现如下：

  1. baidu.string.getByteLength = function (source) {
  2.    return String(source).replace(/[^\x00-\xff]/g, "ci").length;
  3.    };
  4. /*
  5. * Tangram
  6. * Copyright 2009 Baidu Inc. All rights reserved.
  7. *
  8. * path: baidu/string/subByte.js
  9. * author: dron, erik
  10. * version: 1.1.0
  11. * date: 2009/11/30
  12. */
  13. /**
  14. * 对目标字符串按gbk编码截取字节长度
  15. *
  16. * @param {string} source 目标字符串
  17. * @param {number} length 需要截取的字节长度
  18. * @return {string} 字符串截取结果
  19. */
  20. baidu.string.subByte = function (source, length) {
  21.    source = String(source);
  22.    var getLen = baidu.string.getByteLength, i, len, current, next, currentLen, nextLen;
  23.    if (length < 0 || getLen(source) <= length) {
  24.       return source;
  25.       }
  26.    len = source.length;
  27.    for (i = Math.floor(length / 2) - 1; i < len; i++) {
  28.       current = next || source.substr(0, i);
  29.       currentLen = nextLen || getLen(current);
  30.       if (currentLen == length) {
  31.          return current;
  32.          }
  33.       else {
  34.          next = source.substr(0, i + 1);
  35.          nextLen = getLen(next);
  36.          if (nextLen > length) {
  37.             return current;
  38.             }
  39.          }
  40.       }
  41.    return source;
  42.    };

baidu.string是字符串常见操作的对象。

正则替换

这种方式的实现原理是先将中文替换成中文加个空格，这样变相的将一个中文变成了2个字节，然后在这个基础上截取，截取完成后在将中文加空格变成中文。

  1. baidu.string.subByte1 = function(source, length){
  2.     return (source+'').substr(0,length).replace(/([^\x00-\xff])/g,'$1 ').substr(0,length).replace(/([^\x00-\xff]) /g,'$1');
  3. }

这种实现方式不管是从代码量上还是从效率上都要比第一种高很多，这里有个测试案例。

]]> http://www.welefen.com/substr-by-byte.html/feed 6 js动态创建类和实例化 http://www.welefen.com/js%e5%8a%a8%e6%80%81%e5%88%9b%e5%bb%ba%e7%b1%bb%e5%92%8c%e5%ae%9e%e4%be%8b%e5%8c%96.html http://www.welefen.com/js%e5%8a%a8%e6%80%81%e5%88%9b%e5%bb%ba%e7%b1%bb%e5%92%8c%e5%ae%9e%e4%be%8b%e5%8c%96.html#comments Wed, 24 Feb 2010 08:39:34 +0000 welefen http://www.welefen.com/?p=265 在js中，创建一个类和实例化该类一般方式是：

  1. var cls = function(){}
  2. cls.prototype = {
  3. attr:'',
  4. method:function(){}
  5. }
  6. var clsInstance = new cls;

这种方式简单明了，但如果类很多的话就比较痛苦了，并且代码看起来不够优化。

动态创建类

动态创建类实际上类似于一种代理的模式，代码如下：

  1. var Fath = function(methods){
  2.     var cls = function(){
  3.         return new fn(arguments);
  4.     },
  5.     fn = function(args){
  6.         return this.init && this.init.apply && this.init.apply(this,args);
  7.     };
  8.     fn.prototype = cls.prototype = methods || {};
  9.     try{
  10.         return cls;
  11.     }finally{
  12.         cls = null;
  13.     }
  14. }

创建一个类：
var TestClass = Fath(methods) //这里的methods是方法或者属性集合，是一个静态对象
实例化该类：
var testInstance = TestClass(params) //这里的params是传进去的形参
通过这种方式后，一个好处就是实例化类的时候不用再使用new了，当然使用new也是可以的，作用的等价的。避免了到处是new和prototype的好处。
性能上在1K数量级上没有很大的区别。

]]> http://www.welefen.com/js%e5%8a%a8%e6%80%81%e5%88%9b%e5%bb%ba%e7%b1%bb%e5%92%8c%e5%ae%9e%e4%be%8b%e5%8c%96.html/feed 0 Smarty中实现模板继承功能 http://www.welefen.com/smarty-tpl-inherit.html http://www.welefen.com/smarty-tpl-inherit.html#comments Thu, 11 Feb 2010 03:41:22 +0000 welefen http://www.welefen.com/?p=256 在PHP+Smarty大行其道的今天，怎么样进行快速的模板开发成为了前端开发人员必须思考的问题。不同的页面，相同或者相似的页面结构是否进行了模块化处理，同样的头部或者尾部是否进行了内容分离决定了开发的效率。虽然Smarty本身支持include a file的功能，但这远远不够。我们需要的是不想重写同样的页面结构。

Jinja2的模板继承功能

Jinja是基于python的模板引擎，有个非常实用的功能就是模板继承。不太了解的可以去这里看详细的介绍http://opensource.csdn.net/bbs/thread/3943?lp=1

模板继承的好处就是你不在需要写整个页面，只要写页面的模块，然后用一个布局的页面套一下就可以了。并且页面中的模块书写顺序是无序的。

smarty本身并没有模板继承的功能，但我们可以通过block,capture和方法插件（其实block,capture也是插件）。

Smarty实现模板继承

首先我们看看一个实际的页面需要怎么写？

  1. {=block name=page type=normal =} //这里标识block名称和页面类型，这里是{=,=}是smarty的左右标记符，你可以定义其他的
  2.  
  3. {=block name=title=}
  4. 这里是页面的标题
  5. {=/block=}
  6.  
  7. {=block name=head_static=}
  8. 这里是页面的静态样式（如css）
  9. {=/block=}
  10.  
  11. {=block name=header=}
  12. 这里是页面的头部
  13. {=/block=}
  14.  
  15. {=block name=content=}
  16. 这里是页面的内容区
  17. {=/block=}
  18.  
  19. {=block name=footer=}
  20. 这里是页面的地步
  21. {=/block=}
  22.  
  23. {=block name=foot_static=}
  24. 这里是页面的静态样式（如js）
  25. {=/block=}
  26.  
  27. {=/block=}

从上面的代码我们可以看到，原本需要写一个完成的页面，现在只需要写页面的模块就可以了。如果某个模块引用是公共模块的话，还可以省略。这里主要的实现方式就是定义了一个为名为block的block块。下面我们看看是怎么解析这些block的。

解析block的插件放在smarty的插件目录下，名为block.block.php文件。

  1. <?php
  2. function smarty_block_block($params, $content, &$smarty)
  3. {
  4.     if($content === null) return;
  5.     $name = strtoupper($params['name']);
  6.     //页面型block
  7.     if($name == 'PAGE'){
  8.         $type = $params['type'];
  9.         if(empty($type)){
  10.             $type = 'normal';
  11.         }
  12.         $file = 'inc/page_'. $type . '.html';  //加载页面布局文件
  13.         $output = $smarty->fetch($file); //解析这个页面布局文件
  14.         //通过正则解析
  15.         $pattern = "/".preg_quote ($smarty->left_delimiter).":([a-z_0-9]+):(.*?)".preg_quote ($smarty->right_delimiter)."/is";
  16.         preg_match_all($pattern, $content, $matches);
  17.         $result = array();
  18.         $replace = array();
  19.         for($i=0,$count=count($matches[1]);$i<$count;$i++){
  20.             $item = $matches[1][$i];
  21.             $result[] = $matches[2][$i];
  22.             $replace[] = '/<!--\s*'.$item.'\s*-->/i';
  23.         }
  24.         $output = preg_replace($replace,$result,$output);
  25.         return $output;
  26.     }else{
  27.         //模块型block，如：title,head_static,header,content,footer,foot_static
  28.         return $smarty->left_delimiter.':'.$name.':' . $content .$smarty->right_delimiter;
  29.     }
  30. }

这个解析文件的原理就是根据block的name和type进行不同的模块解析。如果name为page表示为整个页面，其他值是为页面的子模块。

页面布局文件：

  1. {=include file="inc/inc_base.html"=}
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <title><!-- TITLE --></title>
  7.  
  8. {=load_css href=base.css =}
  9. <!-- HEAD_STATIC -->
  10. </head>
  11. <body>
  12. <div id="page">
  13.     <div id="header">
  14.         <!-- HEADER -->
  15.     </div>
  16.     <div id="content">
  17.         <!-- CONTENT -->
  18.     </div>
  19.     <div id="footer">
  20.         <!-- FOOTER -->
  21.     </div>
  22. </div>
  23. <!-- FOOT_STATIC -->
  24. </body>
  25. </html>

这个页面首先加载一个公共模板文件，这个文件里定义一些capture，这些capture就是一些公共的内容。页面布局文件定义了页面的布局，加载一些公用的静态文件或者其他模板。

这里整个模板继承功能就实现了。

Smarty实现模板继承的不足

由于smarty解析对这些并没有特殊的优化，所以编译后的文件要加载一些smarty插件文件，这样速度上稍微要差一些，不过差多少要看具体的页面复杂度。

需要做的工作：可以对smarty编译进行优化，使这种实现模式跟原有的在速度上没什么区别。

其他实现方式

1、shell脚本实现。这种方式在速度上跟原有方式没有区别，但每次看效果都要手动编译一次，浪费一些开发时间。

2、大为的lite模板引擎。

]]> http://www.welefen.com/smarty-tpl-inherit.html/feed 2 生日与星座绑定的杯具 http://www.welefen.com/%e7%94%9f%e6%97%a5%e4%b8%8e%e6%98%9f%e5%ba%a7%e7%bb%91%e5%ae%9a%e7%9a%84%e6%9d%af%e5%85%b7.html http://www.welefen.com/%e7%94%9f%e6%97%a5%e4%b8%8e%e6%98%9f%e5%ba%a7%e7%bb%91%e5%ae%9a%e7%9a%84%e6%9d%af%e5%85%b7.html#comments Sat, 30 Jan 2010 10:08:50 +0000 welefen http://www.welefen.com/?p=218 这个标题是基于生日是阴历的情况下。在中国，我相信有很多人过的都是阴历，我就是其中一个，并且是在腊月。但在国内很大网站，包括一些大型网站生日都没有阴阳历的选择。这样会导致什么样的后果呢？就拿我自己来说吧，我过的是阴历，本来我很想把真实的生日填上去的，这样在生日的时候可以接受一些生日礼物，这对社区型网站是非常重要的，这样可以增加用户的回访率。但现实很残酷，由于并不是每一年的阴阳历都是对应的（如：我出生是86年12月11日，对应的阳历是87年01月10日。但在2009年这两个日期是不对应的）。曾经出现这样的事情，hi上给我祝贺时，我只能说今天不是我生日。但个人很杯具，但对这个产品更杯具，几次下来这个用户可能就流失了。

现在已经有几个产品已经注意到这个问题了。下面从我知道的意义列举，他们做的确实非常不错。

QQ

不管QQ是如何出生的，但QQ2009做的非常不错，非常好看的UI，也很不错的UE。QQ2009用了一年多了没出现过崩溃和卡死的现象，这是百度Hi和阿里旺旺所不能及的，当然后2款IM产品存在时间确实也ＱＱ要短很多，所以可以原谅。

回到本文的标题上，最近QQ2009有个更新，那就是生日有阴阳历选择了，并且生日不与星座绑定的。效果如下：

qq

并且阴阳历可以对应切换，虽然这个实现了不难。

并且结合qzone里提前给好友送生日礼物，对增加用户粘度是非常不错的。

kaixin001和白社会

SNS网站kaixin001和搜狐的白社会现在也有了生日可以选择阴阳历的功能。

但开心网上生日是与星座绑定的，白社会上根本就没星座这个选项。

对于生日与星座需不需要绑定，这还要用户的心声。

我认为，如果生日有阴阳历选择的功能，绑定也没啥关系了。

百度需要做的工作

百度的passport产品线在这个方面还要做很多的工作：

1、生日没有阴阳历选择，并且生日还和星座绑定。

2、邮箱绑定后无法修改，这是个非常严重的问题。

]]> http://www.welefen.com/%e7%94%9f%e6%97%a5%e4%b8%8e%e6%98%9f%e5%ba%a7%e7%bb%91%e5%ae%9a%e7%9a%84%e6%9d%af%e5%85%b7.html/feed 2 那些伴随成长的野果 http://www.welefen.com/%e9%82%a3%e4%ba%9b%e4%bc%b4%e9%9a%8f%e6%88%90%e9%95%bf%e7%9a%84%e9%87%8e%e6%9e%9c.html http://www.welefen.com/%e9%82%a3%e4%ba%9b%e4%bc%b4%e9%9a%8f%e6%88%90%e9%95%bf%e7%9a%84%e9%87%8e%e6%9e%9c.html#comments Fri, 01 Jan 2010 01:23:07 +0000 welefen http://www.welefen.com/?p=228 那些伴随成长的野果，现在却叫不全名字来，着实是个大杯具。

记忆力下降惊人啊。。。

大茶树上长的果子，未成熟时是青色，待外面的皮脱了才好吃。不过吃的时候要小心掰开，因为有的里面会有“百节虫”。

]]> http://www.welefen.com/%e9%82%a3%e4%ba%9b%e4%bc%b4%e9%9a%8f%e6%88%90%e9%95%bf%e7%9a%84%e9%87%8e%e6%9e%9c.html/feed 1 回顾2009 http://www.welefen.com/%e5%9b%9e%e9%a1%be2009.html http://www.welefen.com/%e5%9b%9e%e9%a1%be2009.html#comments Thu, 31 Dec 2009 15:35:36 +0000 welefen http://www.welefen.com/?p=220 2009马上就要过去，2010马上就要开始。在展望新的一年的同时，回顾下我在2009年的变化。

一切从年初开始说起。。。

杭州的故事

继去年的惨淡经历后，混迹于杭州，继续在阿里巴巴做前端开发外包工作。

但心里暗下决心，2009我一定要改变什么，不然就废弃了，到了2010估计就没奋斗的决心了。

但由于某些方面的特殊性，又不能太果断的换工作，对我来说找一份新的工作太难了。

虽然每天上下班要在公交车了呆4个小时，但始终疲惫的坚持着。

6月份获知阿里巴巴要在8月初搬到滨江的新大楼。

这样我上班就更远了，给我一种换工作的准备。

正好在blueidea看到上海的一个外企在招前端开发工程师的职位，想到外企应该在某些方面不是很严，于是乎就投了简历。

今天下来就收到了offer，一个月后告别杭州，去了上海。

这样终于告别了再阿里巴巴的外包工作，感叹他们在某些方面太严。

自己虽然不是个特别优秀的人才，但比他们招进来的一些人还是稍微强一些的，一切都是个杯具。。。一个大杯具

在这里要特别感谢冯婷，她给了我很多的帮助。她弟弟也为我做了件特殊的事情。

上海，新的开始

记得当天去的时候，还没找好房子，当天晚上是住在宾馆的，第二天就要上班。

就这样加盟到lexisnexis上海分公司。

上班后，正式加入到了一个新的团体，虽然这个团体不是很强，但还是希望自己尽快融入到他们中。

计划是这里是新的开始，要在这里好好发展。

经过自己的努力，第二个月就拿到了优秀员工奖，是一种鼓励，也是一种安慰。

一个小小的遗憾就是，在这里并不在单单做前端开发的工作，更多的是做PHP方面的开发。

自己做饭，午餐吃自己带的便当，平平淡淡，身体要好很多。

生活很有规律，吃早餐，喝牛奶，早睡早起。。。一切都很好

国庆节回了趟杭州，因为家人都在那边。

回来后发现金大为在QQ上给我留言了，说有事找我。

说百度前端在招人，要我给个简历给他。

慢慢等待，经理面试，技术面试，经历了一个多月。

这一个多月是在担心和紧张中度过的。

这还只是个开始。

突然有一天，我们经理说，要给我转正，因为我差不多来了三个月了。

一边是百度的offer还没来，一边是上海这边的经理要给我转正。

转正后离职就要一个月了。

在办理转正手续前一分钟，终于说出了辞职。

大家都一愣一愣，感觉对不起他们。

这里要感谢金大为，没有他的推荐，就没办法来百度。

北京 – 跌倒后再爬起

12.2号加入到百度。

去年就是从北京跌倒的。

去不了百度，去不了新浪，只能回家休养一段时间。

今年我又回来了。

并且看上去不是太糟。

愿一切继续好下去，不指望有太好的成就。

因为我折腾不起。。。

好好发展，慢慢发展，坚持。。。

结语

再次感谢冯婷，金大为。

感谢JerryQu，阿贵。

2009，他们在工作上给了我很大的帮助。

感谢一切给我帮助的人，愿你们一切都好。

愿大家都有个好身体，不要瞎折腾。

]]> http://www.welefen.com/%e5%9b%9e%e9%a1%be2009.html/feed 7 select节点clone全解析 http://www.welefen.com/select-clone.html http://www.welefen.com/select-clone.html#comments Fri, 18 Dec 2009 03:01:35 +0000 welefen http://www.welefen.com/?p=177 在开发ns-log项目中，统计分类有复制的功能。由于之前的统计分类中的数据是通过JS赋值进去的，之后用户可能又进行了修改，发现进行节点克隆时，出现了 无法复制select下拉框值的怪异现象。本文对这个怪异现象进行解析和给出解决办法。

问题现状

使用节点的cloneNode(true/false)进行克隆时，目前是下面的表现情况：

  1. select为设置初始值或者初始值是第一个option。
    表现：各大浏览器都没什么问题。
  2. select初始值不是在第一个option。
    表现：IE下无法克隆，其他内核的浏览器没什么问题。
  3. select的值被用户或者JS修改。
    表现：各个浏览器均无法克隆到真确的值。值结果跟第二条结果相同。

IE的特殊处理

对于上面第二条，初始值不在第一个option时无法克隆的情况，确实是IE的一个Bug，相信不少人都遇到过这样的问题。并且IE下使用cloneNode方法时，还有Event方面的问题，所以差不多可以放弃使用这个方法。

IE下可以使用节点的outerHTML属性解决这个问题，它能够实时的获取节点的内容，哪怕是select的值被用户或者程序改变。下面给出简单的实现。

function clone(node){
var div = document.createElement(‘div’);
div.innerHTML = node.outerHTML;
return div.childNodes[0];
}

其他内核浏览器的处理

既然IE内核的浏览器可以通过outerHTML属性来解决这个问题，那FF等浏览器可以通过类似的方法来实现吗？虽然FF等浏览器没有outerHTML属性，但是可以通过innerHTML属性实现，如：

function getOuterHTML(node){
var div = document.createElement(‘div’);
div.appendChild(node);
try{
return div.innerHTML;
}catch(e){
div = null;
}
}

答案是否定。

为什么会这样呢？难道是FF等浏览器的bug？

下面还是从W3C中对cloneNode方法,select标签，属性的定义进行说明。

下面引用的资料都是来自HTML5草案，HTML4或者XHTML对这些没有太多详细的定义。虽然是HTML5的，但这些节点跟以前没什么变化。

W3C中的cloneNode

具体链接：http://www.w3.org/TR/DOM-Level-2-Core/core.html

里面有2点比较重要：

  1. 克隆时会拷贝节点的所有属性和对应的值。
  2. 如果cloneNode方法的参数为true，会通过递归的方法克隆子节点。

W3C中的select节点

具体链接：http://dev.w3.org/html5/spec/forms.html#the-select-element

W3C对于属性的定义有2种，一种是内容性属性（Content attributes），另一种是操作性属性（未给出具体的命名，这里暂时使用这个名字）。

对于select标签，内容性属性主要有：Global attributes，autofocus，disabled，form，multiple，name，size。其中Global attributes包含一些常用的属性(accesskey,class,contenteditable,contextmenu,dir,draggable,hidden,id,itemid,
itemprop,itemref,itemscope,itemtype,lang,spellcheck,style,tabindex,title)，这些属性是所有标签里都包含的，具体的见http://dev.w3.org/html5/spec/dom.html#global-attributes

而selectedIndex和value都属于操作性属性，这两个属性获取值的方式如下：

select . selectedIndex [ = value ]
Returns the index of the first selected item, if any, or −1 if there is no selected item.

Can be set, to change the selection.

select . value [ = value ]
Returns the value of the first selected item, if any, or the empty string if there is no selected item.

Can be set, to change the selection.

内容性属性和操作性属性的区别

给节点添加属性有两种方式，如下面所示：

var div = document.createElement(‘div’)
div.id = ‘welefen’; //直接加属性
div.setAttribute(‘id’,'welefen’); //通过setAttribute方法添加属性

对于内容性属性，这两种方法是完全相同的。

但对于操作性属性，第一种方式只会将属性添加在操作范围内，当把节点添加到DOM中，属性就失效了。

由于selectedIndex和value都是操作性属性，如果select的值被用户或者程序改变，clone时当前的值是无法带过去的。所以才会出现了无法克隆值的情况。并且也无法使用innerHTML来克隆值，因为innerHTML的原理跟这个是一样的。

innerHTML实现原理请看这里：http://www.w3.org/TR/2008/WD-html5-20080610/serializing.html#html-fragment

FF等浏览器解决方案

目前有2中解决方案，第一种是在select绑定change事件，触发change的时候，改变options里的selected属性，当然这种方法是很不可取的。另一种方案就是在克隆时获取元素的值，然后再赋值到克隆后的对象上去。

总结

当前出现这个情况的时候，以为是FF等浏览器的bug。当后来仔细想想，应该不会这样的情况，后来反复查看W3C相关的文档，终于确认了这一问题。下面给出完整的解决方案：

function cloneSelect(select){
if(document.all){
var html = select.outerHTML,
div = document.createElement(‘div’);
div.innerHTML = html;
return div.childNodes[0];
}
var cloneSelect = select.cloneNode(true);
cloneSelect.selectedIndex = select.selectedIndex;
cloneSelect.value = select.value;
return cloneSelect;
}

]]> http://www.welefen.com/select-clone.html/feed 0