jQuery源码分析(1) - 连字符如何变驼峰写法

把以前看的jQuery源码的分析笔记搬到博客上，重温经典，也是为了方便查询。

 

jQuery里有一段源码，用来将连字符-改成驼峰，精简提炼出来如下：

function camelCase(str) {
   return str.replace(/-([a-z])/g, function(all, letter) {
    console.log(all, letter); // -s, s
    return letter.toUpperCase();
  })
}
camelCase('font-size'); // fontSize
// 为什么结果不是font-Size呢？

replace这个方法接受两个参数:

  第一个参数 可以是一个 RegExp 对象或者一个字符串(这个字符串不会被转换成正则表达式)。如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有子字符串，唯一的办法就是提供一个正则表达式，而且要指定全局(g)标志。

var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");
alert(result);    //"cond, bat, sat, fat"
result = text.replace(/at/g, "ond");
alert(result);    //"cond, bond, sond, fond" 

  第二个参数 可以是一个字符串或者一个函数。为函数时，在只有一个匹配项(即与模式匹配的字符串)的情况下，会向这个函数传递 3 个参数:模式的匹配项、模式匹配项在字符串中的位置和原始字符串。这个函数应该返回一个字符串，表示应该被替换的匹配项使用函数作为 replace()方法的第二个参数可以实现更加精细的替换操作。

 

正则表达式中定义了多个捕获组的情况下，传递给函数的参数依次是模式的匹配项、第一个捕获组的匹配项、第二个捕获组的匹配项......，但最后两个参数仍然分别是模式的匹配项在字符串中的位置和原始字符串。

replace()方法的第一个参数是一个RegExp 对象，则代表第n个括号匹配的字符串。

()内的[a-z]是定义的第一个子串(匹配组)，可以得知letter是's'。

为什么不是font-Size呢？

函数通过迭代取出满足第一个正则表达式的字符'-s', 但是return出去的是'S'，所以得到fontSize。

 

反过来，将驼峰写法转成'-'连字符写法：

function styleHyphenFormat(propertyName) {
    function upperToHyphenLower(match) {
        return '-' + match.toLowerCase();
    }
    return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
styleHyphenFormat('fontSize'); // font-size