博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery源码分析(1) - 连字符如何变驼峰写法
阅读量:5096 次
发布时间:2019-06-13

本文共 1342 字,大约阅读时间需要 4 分钟。

把以前看的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

 

转载于:https://www.cnblogs.com/easonw/p/11505200.html

你可能感兴趣的文章
Enterprise Library - Data Access Application Block 6.0.1304
查看>>
重构代码 —— 函数即变量(Replace temp with Query)
查看>>
Bootstrap栅格学习
查看>>
程序员的数学
查看>>
聚合与组合
查看>>
洛谷 P2089 烤鸡【DFS递归/10重枚举】
查看>>
我眼中的技术地图
查看>>
lc 145. Binary Tree Postorder Traversal
查看>>
在centos上开关tomcat
查看>>
无人值守安装linux系统
查看>>
黑马程序员——2 注释
查看>>
android dialog使用自定义布局 设置窗体大小位置
查看>>
ionic2+ 基础
查看>>
查询消除重复行
查看>>
[leetcode]Minimum Path Sum
查看>>
内存管理 浅析 内存管理/内存优化技巧
查看>>
Json格式的字符串转换为正常显示的日期格式
查看>>
[转]Android xxx is not translated in yyy, zzz 的解决方法
查看>>
Mobiscroll脚本破解,去除Trial和注册时间限制【转】
查看>>
Redis快速入门
查看>>