今天中秋节,放假三天。看zeptojs文档时,看到camelCase()转驼峰的方法,就想着也不难,就自己实现了一遍……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 字符串操作方式
function camelCase_1(str){
var i=1,
arr = str.split('-'),
len = str.split('-').length;
var result = arr[0];
for(;i<len;i++){
result += arr[i].substring(0,1).toUpperCase()+arr[i].substring(1);
}
return result;
}
function camelCase_2(str){
var arr = str.split('-');
for (var i=1;i<arr.length;i++) {
arr[i] = arr[i].charAt(0).toUpperCase()+arr[i].substring(1);
}
return arr.join('');
}
// 正则方式
// 分组概念 $0 代表整体,$1 第一个匹配子项
function camelCase_3(str){
return str.replace(/-(\w)/g,function($0,$1){
return $1.toUpperCase();
});
}

再看下jquery实现方案:

1
2
3
4
5
6
//str.replace(/^-ms-/,'ms-')是有IE下有,-ms-前缀的,比如转换成msTransform,而其他转换成首字母大写,如:WebkitTransform
function camelCase_2(str){
return str.replace(/^-ms-/,'ms-').replace(/-([\da-z])/gi,function(all,letter){
return letter.toUpperCase();
});
}

再看zeptojs实现方案:

1
2
3
4
5
//zepto.js实现方式:没处理-ms-,兼容性IE10+,但依旧有很多IE10依旧要加-ms-前缀的css3属性。为啥zeptojs没实现呢,难道还没碰到这个bug?
//并且,空字符串写toUpperCase()依旧是空字符串。所以不需要写三目运算。
function camelCase_3(str){
return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' })
}

测试:

1
2
3
4
5
6
7
8
9
10
11
12
var webkitstr = '-webkit-transfrom';
var msstr = '-ms-transfrom';
console.log(camelCase_1(webkitstr));//WebkitTransfrom
console.log(camelCase_1(msstr)); //MsTransfrom
console.log(camelCase_2(webkitstr));//WebkitTransfrom
console.log(camelCase_2(msstr)); //MsTransfrom
console.log(camelCase_3(webkitstr));//WebkitTransfrom
console.log(camelCase_3(msstr)); //MsTransfrom
console.log(camelCase_4(webkitstr)); //WebkitTransfrom
console.log(camelCase_4(msstr)); //msTransfrom
console.log(camelCase_5(webkitstr));//WebkitTransfrom
console.log(camelCase_5(msstr)); //MsTransfrom

看到这里,其实很想给zepto提pull request的。但还是没有提。

小结:分析jquery/zeptojs源码,发现能学到很多。

本文地址: https://lxchuan12.github.io/2016/09/15/20160915-camelCase/