VUE source code learning - camelize: convert a hyphen-connected string into a hump-marked string, cache function, pure function

One, camelize

There is such a piece of code in the vue source code:

  /**
   * 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() : ''; })
  });

Define a regular camelizeRE, which means to replace all hyphens ' - ' and letters after the hyphen in the string with uppercase letters after the hyphen, that is, change the hyphenated string to camel case.

Define the cached function, which creates an empty object {}, assigns it to the cache, and returns a cachedFn function (closure). In cachedFn, assign the value of the parameter str in the cache to the hit, if the hit has a value, return it, otherwise, convert the parameter str into a camel case string and store it in the cache in the form of a key-value pair, the key name is Parameter str, the value is the camel case of str.

For example, to run camelize('search-form');camelize('search-form'):
Run the first camelize('search-form'), create an empty object cache
Assign cache['search-form'] to hit, then hit is undefined
run cache[str] = fn(str)
run str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
At this point cache['search-form'] = 'searchForm'
return 'searchForm'
Run the second camelize('search-form')
Assign cache['search-form'] to hit, then hit is 'searchForm'
return 'searchForm'

Second, the cache function

As mentioned above, cachedFn returns a function, which is a closure, so the cache will always be in memory to achieve the purpose of caching. Therefore, the above cached is actually a cache function, and the cached content is the camel case of the string. increase etc.

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('李四')

The output is as follows:

Run camelize('Zhang San') for the first time, hit is undefined, run fn, that is, find Zhang San's id and return it, assign it to cache['Zhang San'], and output Zhang San's id;
Run camelize('Li Si') for the first time, same as above;
Run camelize('Zhang San') for the second time, and output cache['Zhang San'], which is the cached ID of Zhang San
Run camelize('Lee Si') for the second time, same as above.

3. Pure functions

A pure function is one whose input is the same as its output . Therefore, in the above cache function, a pure function can be realized only by changing the cache to the string itself. No longer.

Summarize

This article records the relevant content of the camelize function in the vue source code. If there is any error, please correct me~