前端开发、用户体验、PHP

按字节截取字符串

welefen — Tue, 09 Mar 2010 04:02:58 +0000

在JS中，由于中文和英文是同等对待的，但有时候我们希望是一个中文按两个字节算，这就出现了按字节截取字符串的功能。下面列举了 2种实现方式。

循环检测

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

baidu.string.getByteLength = function (source) {
return String(source).replace(/[^\x00-\xff]/g, "ci").length;
};
/*
* Tangram
* Copyright 2009 Baidu Inc. All rights reserved.
*
* path: baidu/string/subByte.js
* author: dron, erik
* version: 1.1.0
* date: 2009/11/30
*/
/**
* 对目标字符串按gbk编码截取字节长度
*
* @param {string} source 目标字符串
* @param {number} length 需要截取的字节长度
* @return {string} 字符串截取结果
*/
baidu.string.subByte = function (source, length) {
source = String(source);
var getLen = baidu.string.getByteLength, i, len, current, next, currentLen, nextLen;
if (length < 0 || getLen(source) <= length) {
return source;
}
len = source.length;
for (i = Math.floor(length / 2) - 1; i < len; i++) {
current = next || source.substr(0, i);
currentLen = nextLen || getLen(current);
if (currentLen == length) {
return current;
}
else {
next = source.substr(0, i + 1);
nextLen = getLen(next);
if (nextLen > length) {
return current;
}
}
}
return source;
};

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

正则替换

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

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

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

js动态创建类和实例化

welefen — Wed, 24 Feb 2010 08:39:34 +0000

在js中，创建一个类和实例化该类一般方式是：

var cls = function(){}
cls.prototype = {
attr:'',
method:function(){}
}
var clsInstance = new cls;

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

动态创建类

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

var Fath = function(methods){
var cls = function(){
return new fn(arguments);
},
fn = function(args){
return this.init && this.init.apply && this.init.apply(this,args);
};
fn.prototype = cls.prototype = methods || {};
try{
return cls;
}finally{
cls = null;
}
}

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

Smarty中实现模板继承功能

welefen — Thu, 11 Feb 2010 03:41:22 +0000

在PHP+Smarty大行其道的今天，怎么样进行快速的模板开发成为了前端开发人员必须思考的问题。不同的页面，相同或者相似的页面结构是否进行了模块化处理，同样的头部或者尾部是否进行了内容分离决定了开发的效率。虽然Smarty本身支持include a file的功能，但这远远不够。我们需要的是不想重写同样的页面结构。

Jinja2的模板继承功能

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

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

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

Smarty实现模板继承

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

{=block name=page type=normal =} //这里标识block名称和页面类型，这里是{=,=}是smarty的左右标记符，你可以定义其他的
{=block name=title=}
这里是页面的标题
{=/block=}
{=block name=head_static=}
这里是页面的静态样式（如css）
{=/block=}
{=block name=header=}
这里是页面的头部
{=/block=}
{=block name=content=}
这里是页面的内容区
{=/block=}
{=block name=footer=}
这里是页面的地步
{=/block=}
{=block name=foot_static=}
这里是页面的静态样式（如js）
{=/block=}
{=/block=}

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

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

function smarty_block_block($params, $content, &$smarty)
{
if($content === null) return;
$name = strtoupper($params['name']);
//页面型block
if($name == 'PAGE'){
$type = $params['type'];
if(empty($type)){
$type = 'normal';
}
$file = 'inc/page_'. $type . '.html'; //加载页面布局文件
$output = $smarty->fetch($file); //解析这个页面布局文件
//通过正则解析
$pattern = "/".preg_quote ($smarty->left_delimiter).":([a-z_0-9]+):(.*?)".preg_quote ($smarty->right_delimiter)."/is";
preg_match_all($pattern, $content, $matches);
$result = array();
$replace = array();
for($i=0,$count=count($matches[1]);$i<$count;$i++){
$item = $matches[1][$i];
$result[] = $matches[2][$i];
$replace[] = '//i';
}
$output = preg_replace($replace,$result,$output);
return $output;
}else{
//模块型block，如：title,head_static,header,content,footer,foot_static
return $smarty->left_delimiter.':'.$name.':' . $content .$smarty->right_delimiter;
}
}

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

页面布局文件：

{=include file="inc/inc_base.html"=}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title>
{=load_css href=base.css =}
head>
<body>
<div id="page">
<div id="header">
div>
<div id="content">
div>
<div id="footer">
div>
div>
body>
html>

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

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

Smarty实现模板继承的不足

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

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

其他实现方式

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

2、大为的lite模板引擎。

生日与星座绑定的杯具

welefen — Sat, 30 Jan 2010 10:08:50 +0000

这个标题是基于生日是阴历的情况下。在中国，我相信有很多人过的都是阴历，我就是其中一个，并且是在腊月。但在国内很大网站，包括一些大型网站生日都没有阴阳历的选择。这样会导致什么样的后果呢？就拿我自己来说吧，我过的是阴历，本来我很想把真实的生日填上去的，这样在生日的时候可以接受一些生日礼物，这对社区型网站是非常重要的，这样可以增加用户的回访率。但现实很残酷，由于并不是每一年的阴阳历都是对应的（如：我出生是86年12月11日，对应的阳历是87年01月10日。但在2009年这两个日期是不对应的）。曾经出现这样的事情，hi上给我祝贺时，我只能说今天不是我生日。但个人很杯具，但对这个产品更杯具，几次下来这个用户可能就流失了。

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

QQ

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

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

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

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

kaixin001和白社会

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

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

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

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

百度需要做的工作

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

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

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

那些伴随成长的野果

welefen — Fri, 01 Jan 2010 01:23:07 +0000

那些伴随成长的野果，现在却叫不全名字来，着实是个大杯具。

记忆力下降惊人啊。。。

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

回顾2009

welefen — Thu, 31 Dec 2009 15:35:36 +0000

2009马上就要过去，2010马上就要开始。在展望新的一年的同时，回顾下我在2009年的变化。

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

杭州的故事

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

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

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

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

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

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

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

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

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

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

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

上海，新的开始

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

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

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

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

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

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

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

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

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

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

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

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

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

这还只是个开始。

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

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

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

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

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

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

北京 – 跌倒后再爬起

12.2号加入到百度。

去年就是从北京跌倒的。

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

今年我又回来了。

并且看上去不是太糟。

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

因为我折腾不起。。。

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

结语

再次感谢冯婷，金大为。

感谢JerryQu，阿贵。

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

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

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

select节点clone全解析

welefen — Fri, 18 Dec 2009 03:01:35 +0000

在开发ns-log项目中，统计分类有复制的功能。由于之前的统计分类中的数据是通过JS赋值进去的，之后用户可能又进行了修改，发现进行节点克隆时，出现了无法复制select下拉框值的怪异现象。本文对这个怪异现象进行解析和给出解决办法。

问题现状

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

select为设置初始值或者初始值是第一个option。
表现：各大浏览器都没什么问题。
select初始值不是在第一个option。
表现：IE下无法克隆，其他内核的浏览器没什么问题。
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点比较重要：

克隆时会拷贝节点的所有属性和对应的值。
如果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;
}

javascript中toInt的几种方法

welefen — Wed, 16 Dec 2009 08:20:26 +0000

在javascript中，如果要将一个字符串转变成数字，一般是通过parseInt这个函数进行。但如果对输入串有很高确定性的话，其实可以用更简单的方法。如：只是将字符串“123”变成数字123。下面给出具体的说明。

parseInt函数

parseInt函数是专门用来处理将字符串变成整型的。具体请见：ECMA-262 P114。

支持八进制和十六进制，如：’0111′，’0×111′。
支持非正数。如：’-111′。
支持数字后还有字符串，如：’111abc’。
支持第二个参数，是传递的转换进制，数值为2到36。如：parseInt(’111′,2)，即将111转换为二进制。
忽略前面的空白字符，如：\n，\t，\r。
如果无法将字符串转换为一个数值，则返回NaN。

一元操作符“+”

在javascript中，“+”号即可以作为二元操作符，又可以作为一元操作符。作为一元操作符的时候，就是将对象变成数值形式的。具体见：ECMA-262 P82。

其实执行+的时候，调用JS引擎的ToNumber函数。

true/false转成1/0。
null转成0。
支持非正数。
忽略前面的空白字符。
支持16进制，八进制会当十进制处理。
“111″转换成111，其他情况基本都是 NaN。

Number构造器

当number构造器当函数使用时，是将其他对象转化成数值。转换原理跟一元操作符”+”完全一样，因为都是调用JS引擎ToNumber函数。所以这个方式基本不用，因为使用它比使用“+”要多7个字符。

二进制操作符“|”

使用二进制操作符“|”结合0可以将对象转换成整形的。如’111′|0。

true/false转换成1/0。
忽略前面的特殊字符。
支持16进制，八进制会当十进制处理。
null转成0。
支持非正数。
不能转换成整型的，则返回为0。如：’111abc’结果为0。

二进制操作符“>>”

使用二进制操作符“>>”结合0可以将对象转换成整形的。如’111′>>0。

true/false转换成1/0。
忽略前面的特殊字符。
支持16进制，八进制会当十进制处理。
null转成0。
支持非正数。
不能转换成整型的，则返回为0。如：’111abc’结果为0。

二进制操作符“>>>”

使用二进制操作符“>>>”结合0可以将对象转换成整形的。如’111′>>>0。

true/false转换成1/0。
忽略前面的特殊字符。
支持16进制，八进制会当十进制处理。
null转成0。
非正数的时候则转换为2^32-概数的绝对值。如：’-111′>>>0为4294967185。
不能转换成整型的，则返回为0。如：’111abc’结果为0。

测试结果

对于转换的对象数字加字符或者其他类型的，只能用parseInt转换。

对于一般的转化，如将“123”转化成123时，有如下的测试结果：

	parseInt	+	\|	>>	>>>
IE8(执行10^5次)	96ms	65ms	61ms	59ms	58ms
FF3.5(执行10^7次)	49ms	48ms	52ms	48ms	53ms
Safari4(执行10^5次)	38ms	15ms	15ms	15ms	16ms
Chrome(执行10^5次)	25ms	33ms	37ms	38ms	37ms
Opera10(执行10^5次)	113ms	61ms	63ms	63ms	66ms

从上面可以看出，除了FF和Chrome下parseInt和其他的没什么差别，其他的使用parseInt函数都要比操作符慢。

所以有时候可以使用“|”操作符来完成字符到数值的转换工作，并且转换默认是0，而不是NaN。

规范一下自己的生活

welefen — Fri, 11 Dec 2009 05:44:54 +0000

来北京已经有一个多星期了，之前住在同学那，生活时间跟同学走。现在自己搬了地方，是要规范一下自己的生活了，虽然年轻但还是要珍惜身体，关注健康。

作息时间

上班时间早上8点到8点20起床，喝杯蜂蜜水，准备上班。
早餐在公司吃。
在公司喝枸杞菊花决明子茶。
中餐后去健身房稍微锻炼下，主要是炼下臂力和骑下自行车（轻微运动）。
在公司餐厅饮食还可以的话，中餐和晚餐也在餐厅解决，尽量吃清淡的食物。
无特殊情况，晚上8点到9点之间回家。
回家后稍微上会网，喝杯蜂蜜水，洗澡上床睡觉（在11点之前）。

其他活动

参加一些非剧烈运动的活动。

javascript数组唯一化实现方式

welefen — Mon, 07 Dec 2009 05:10:18 +0000

到目前为止，javascript中array还没有内置的unique方法，本来这篇文章很早就写了，但由于之前的虚拟主机忘记续费导致数据丢了，前几天JerryQu问了我这个问题，觉得可能还有其他人要，这里在写出来，备大家参考。

实现方式

这里给出2中实现方式。一种是大家应该都知道的indexOf检测的方式，另一种是结合lastIndexOf和splice实现方式。

下载: array_unique.js

//首先给Array对象原型上添加indexOf和lastIndexOf方法.(如果没有的话)
if(!Array.prototype.indexOf){
   Array.prototype.indexOf = function(element, index){
   var length = this.length;
   if(index == null){
   index = 0;
   }else{
   index = +index || 0;
   if(index < 0) index+= length;
   if(index < 0) index = 0;
   }
   for(var current;index<length;index++){
   current = this[index];
   if(current === element) return index;
   }
   return -1;
   }
}
if(!Array.prototype.lastIndexOf){
   Array.prototype.lastIndexOf = function(element, index){
   var length = this.length;
   if(index == null){
   index = length - 1;
   }else{
   index = +index || 0;
   if(index < 0) index+= length;
   if(index < 0) index = -1;
   else if(index >= length) index = length - 1;
   }
   for(var current;index>=0;index--){
   current = this[index];
   if(current === element) return index;
   }
   return -1;
   }
}
//很常见的实现方式
var arrayUnique1 = function(arr){
   for(var i=0,len=arr.length,result=[],item;i<len;i++){
   item = arr[i];
   if(result.indexOf(item) < 0) {
   result[result.length] = item;
   }
   }
   return result;
}
//通过lastIndexOf和splice方法实现方式
var arrayUnique2 = function(arr){
   var length = arr.length;
   while(--length){
   //如果在前面已经出现，则将该位置的元素删除
   if(arr.lastIndexOf(arr[length],length-1) > -1) {
   arr.splice(length,1);
   }
   }
   return arr;
}

测试结果

测试数据：var arr = [1,2,3,1,2,3,2,1,3,4,2,232];
IE7循环10,000次：
arrayUnique1为460ms，arrayUnique2为190ms。
FF3.5循环100,000次：
arrayUnique1为170ms，arrayUnique2为63ms。

从测试结果上可以看出，通过lastIndexOf和splice的方式的速度是普通方式的2-3倍。

其他实现方式

除了上面描述的2中实现方式外，其实还是有其他实现方式的。jQuery中就一种实现方式。我们可以看下具体的代码：

unique: function( array ) {
   var ret = [], done = {};
   try {
   for ( var i = 0, length = array.length; i < length; i++ ) {
   var id = jQuery.data( array[ i ] );
   if ( !done[ id ] ) {
   done[ id ] = true;
   ret.push( array[ i ] );
   }
   }
   } catch( e ) {
   ret = array;
   }
   return ret;
}

这种是通过创建一个临时的对象，然后获取元素的ID保存在对象的key中。但这种实现方式只能针对对象，对于普通的直接量（如：数字，字符串等）是无用的。并且经过测试，这种方式在执行速度上和lastIndexOf结合splice还是有点差距的。