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

1
2
3
4
5
6
7
8
9
10
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;
}

再看下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
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

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

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

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