Lodash源碼閱讀

• lodash github : https://github.com/lodash/lodash
• 閱讀的版本： 4.17.11

.internal

Hash類 （Hash緩存）

const HASH_UNDEFINED = '__lodash_hash_undefined'

class Hash{
  // Hash 只接收一個二維數組做爲參數
  // new Hash([['tes1',1],['test2',2],['test3',3]]) 
  // => 
  // {
  //   size: 3,
  //   __data__: {
  //     test1: 1,
  //     test2: 2,
  //     test3: 3
  //   }
  // }
  constructor(entires) {
    let index = -1
    const length = entries == null ? 0 : entries.length
    // 初始化 __data__ 屬性和 size
    this.clear()
    // 遍歷傳入的二維數組，調用 set 方法，初始化緩存的值
    while(++index < length) {
      const entry = entries[index]
      this.set(entry[0], entry[1])
    }
  }
  // 初始化 __data__ 屬性和 size
  // clear 的做用是清空緩存
  clear() {
    // Object.create 的第一個參數爲建立對象的原型對象，
    // 傳入 null 的時候，返回的就是一個真空對象，即沒有原型的對象，所以不會有原型屬性的干擾，用來作緩存對象十分適合。
    this.__data__ = Object.create(null)
    this.size = 0
  }

  //delete 方法用來刪除指定 key 的緩存
  // 成功刪除返回 true， 不然返回 false
  // 刪除操做一樣須要維護 size 屬性和緩存值。
  delete (key) {
    //調用 has 方法來判斷緩存是否存在，若是存在，用 delete 操做符將 __data__ 中對應的屬性刪除。
    const result = this.has(key) && delete this.__data__
    // delete 操做符在成功刪除屬性時會返回 true，若是成功刪除，則須要將 size 減小 1 。
    this.size -= result ? 1 : 0
    return result
  }
  
  // get 方法是從緩存中取值
  get(key) {
    const data = this.__data__
    const result = data[key]
    return result === HASH_UNDEFINED ? undefined : result
  }
  // has 用來判斷是否已經有緩存數據，若是緩存數據已經存在，則返回 true
  // 這個判斷有一個坑
  has(key) {
    const data = this.__data__
    return data[key] !== undefined
  }

  // set 用來增長或者更新須要緩存的值
  // set 的時候須要同時維護 size 和在緩存的值。
  set(key, value) {
    const data = this.__data__
    // 判斷對應的 key 是否已經被緩存過，若是已經緩存過，則 size 保持不變，不然 size 加 1
    this.size += this.has(key)? 0 : 1
    data[key] = value === undefined ? HASH_UNDEFINED : value
    return this

    // 在 has 中說到用 data[key] !== undefined 有一個坑，由於要緩存的值也能夠是 undefined ，若是不作處理，確定會致使判斷錯誤。
    // lodash 的處理方式是將 undefined 的值轉換成 HASH_UNDEFINED ，也即一開始便定義的 __lodash_hash_undefined__ 字符串來儲存。
    // 因此在緩存中，是用字符串 __lodash_hash_undefined__ 來替代 undefined 的。
  }
}

export default Hash

lodash.uniq

lodash.join

should return join all array elements into a string

_.join(['a', 'b', 'c'], '~');
 * // => 'a~b~c'

查看這段代碼中的應用 : https://github.com/skychx/web...

/**
 * 2.filename 和 chunkFilename 的區別
 */

 let btn = document.createElement('button')
 btn.innerHTML = 'click me'
 document.body.appendChild(btn)

 async function getAsyncComponent() {
   var element = document.createElement('div')
   const { default: _ } = await import ('lodash')
   element.innerHTML = _.join(['hello!', 'dynamic', 'imports', 'async', ' '])

   return element
 }

 btn.addEventListener('click', () => {
   getAsyncComponent().then(component => {
     document.body.appendChild(component)
   })
 })

參考

pocket-lodash
Object.create()