VUE ソースコード学習 - Camelize: ハイフンでつながった文字列をこぶマーク付きの文字列に変換、キャッシュ関数、純粋関数

1、キャメル化

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 を定義します。これは、文字列内のすべてのハイフン「-」とハイフン以降の文字をハイフン以降の大文字に置き換えることを意味します。つまり、ハイフンで囲まれた文字列をキャメルケースに変更します。

空のオブジェクト {} を作成し、それをキャッシュに割り当て、cachedFn 関数 (クロージャ) を返すキャッシュされた関数を定義します。queuedFn では、キャッシュ内のパラメータ str の値をヒットに割り当て、ヒットに値がある場合はそれを返し、そうでない場合はパラメータ str をキャメルケース文字列に変換し、キーの形式でキャッシュに格納します。 -value ペア、キー名はパラメータ str、値は str のキャメルケースです。

たとえば、camelize('search-form');camelize('search-form') を実行するには、次のようにします。
最初の Camelize('search-form') を実行し、空のオブジェクトキャッシュを作成します
キャッシュ['search-form']をヒットに割り当てます。ヒットは未定義です
run queue[str] = fn(str)
run str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
この時点では、cache['search-form'] = 'searchForm'
'検索フォーム' を返します
2 番目の Camelize('search-form') を実行します
キャッシュ['search-form']をヒットに割り当てると、ヒットは'searchForm'になります
'検索フォーム' を返します

2つ目はキャッシュ機能

前述したように、cachedFn はクロージャである関数を返すため、キャッシュの目的を達成するためにキャッシュは常にメモリ内にあります。したがって、上記の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('李四')

出力は次のとおりです。

初めて Camelize('Zhang San') を実行します。ヒットは未定義です。fn を実行します。つまり、Zhang San の ID を見つけて返し、それをキャッシュ ['Zhang San'] に割り当て、Zhang San の ID を出力します。
上記と同じように、camelize('Li Si') を初めて実行します。
Camelize('Zhang San') を 2 回目に実行し、cache['Zhang San'] を出力します。これは、Zhang San のキャッシュされた ID です。
上記と同じように、camelize('Lee Si') を 2 回目に実行します。

3. 純粋な関数

純粋関数とは、入力が出力と同じである関数です。したがって、上記のキャッシュ関数では、キャッシュを文字列そのものに変更するだけで純粋な関数を実現できます。もはや。

要約する

この記事は、vue のソースコード内の Camelize 関数の関連内容を記録しています。間違いがあれば修正してください~