VUE源码学习——camelize：将连字符-连接的字符串转化成驼峰标识的字符串、缓存函数、纯函数

最新推荐文章于 2024-08-08 15:10:37 发布

Zoie_ting

最新推荐文章于 2024-08-08 15:10:37 发布

阅读量424

点赞数 1

分类专栏： Vue和element ui 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/sxww_zyt/article/details/130132578

版权

Vue和element ui 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

一、camelize

vue源码中有这样一段代码：

  /**
   * Create a cached version of a pure function.
   */
  function cached (fn) {
    var cache = Object.create(null);
    return (function cachedFn (str) {
      var hit = cache[str];
      return hit || (cache[str] = fn(str))
    })
  }

  /**
   * Camelize a hyphen-delimited string.
   */
  var camelizeRE = /-(\w)/g;
  var camelize = cached(function (str) {
    return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
  });

定义一个正则camelizeRE，其含义是将字符串中所有连字符 '-' 和连字符后的字母替换为连字符后的字母大写，即将连字符连接的字符串改为驼峰。

定义cached函数，该函数创建一个空对象{}，赋值给cache，返回一个cachedFn函数（闭包）。在cachedFn中，将cache中键名为参数str的值赋给hit，如果hit有值，则返回，否则，将参数str转为驼峰式字符串以键值对形式存储在cache中，键名为参数str，值为str的驼峰式。

例如，运行camelize('search-form');camelize('search-form')：
运行第一个camelize('search-form')，创建一个空对象cache
将cache['search-form']赋值给hit，这时hit为undefined
运行cache[str] = fn(str)
运行str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
此时cache['search-form'] = 'searchForm'
返回'searchForm'
运行第二个camelize('search-form')
将cache['search-form']赋值给hit，这时hit为'searchForm'
返回'searchForm'

二、缓存函数

上文说到cachedFn返回一个函数，是一个闭包，所以cache会一直在内存中，以此达到缓存的目的。因此，上面的cached其实是一个缓存函数，缓存的内容是字符串的驼峰式，在实际应用中，我们也可以改造它，使它缓存我们需要的内容，比如缓存身份证号、商品库存、自增等。

var person = [
    {name:'张三',id:'214325199602034526'},
    {name:'李四',id:'214325199804125632'}
]
function cached (fn) {
    var cache = Object.create(null);
    return (function cachedFn (str) {
      var hit = cache[str];
      console.log(hit || (cache[str] = fn(str)))
    })
  }

  var camelize = cached(function (str) {
    console.log('开始缓存' + str)
    let item = person.filter((val) => val.name === str)
    return item[0].id;
  });
camelize('张三')
camelize('李四')
console.log('开始取出缓存')
camelize('张三')
camelize('李四')

输出如下：