Lodash源码阅读

0

clipboard.png

.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()


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...