cody-utils 1.0.1

package/src/object/deepClone.js

@@ -0,0 +1,105 @@
+/* 
+深度克隆
+1). 大众乞丐版
+    问题1: 函数属性会丢失
+    问题2: 循环引用会出错
+2). 面试基础版本
+    解决问题1: 函数属性还没丢失
+3). 面试加强版本
+    解决问题2: 循环引用正常
+4). 面试加强版本2(优化遍历性能)
+    数组: while | for | forEach() 优于 for-in | keys()&forEach() 
+    对象: for-in 与 keys()&forEach() 差不多
+*/
+/* 
+1). 大众乞丐版
+  问题1: 函数属性会丢失
+  问题2: 循环引用会出错
+*/
+export function deepClone1(target) {
+  return JSON.parse(JSON.stringify(target))
+}
+
+/* 
+获取数据的类型字符串名
+*/
+function getType(data) {
+  return Object.prototype.toString.call(data).slice(8, -1)
+}
+
+/*
+2). 面试基础版本
+  解决问题1: 函数属性还没丢失
+*/
+export function deepClone2(target) {
+  const type = getType(target)
+
+  if (type==='Object' || type==='Array') {
+    const cloneTarget = type === 'Array' ? [] : {}
+    for (const key in target) {
+      if (target.hasOwnProperty(key)) {
+        cloneTarget[key] = deepClone2(target[key])
+      }
+    }
+    return cloneTarget
+  } else {
+    return target
+  }
+}
+
+/* 
+3). 面试加强版本
+  解决问题2: 循环引用正常
+*/
+export function deepClone3(target, map = new Map()) {
+  const type = getType(target)
+  if (type==='Object' || type==='Array') {
+    let cloneTarget = map.get(target)
+    if (cloneTarget) {
+      return cloneTarget
+    }
+    cloneTarget = type==='Array' ? [] : {}
+    map.set(target, cloneTarget)
+    for (const key in target) {
+      if (target.hasOwnProperty(key)) {
+        cloneTarget[key] = deepClone3(target[key], map)
+      }
+    }
+    return cloneTarget
+  } else {
+    return target
+  }
+}
+
+/* 
+4). 面试加强版本2(优化遍历性能)
+    数组: while | for | forEach() 优于 for-in | keys()&forEach() 
+    对象: for-in 与 keys()&forEach() 差不多
+*/
+export function deepClone4(target, map = new Map()) {
+  const type = getType(target)
+  if (type==='Object' || type==='Array') {
+    let cloneTarget = map.get(target)
+    if (cloneTarget) {
+      return cloneTarget
+    }
+
+    if (type==='Array') {
+      cloneTarget = []
+      map.set(target, cloneTarget)
+      target.forEach((item, index) => {
+        cloneTarget[index] = deepClone4(item, map)
+      })
+    } else {
+      cloneTarget = {}
+      map.set(target, cloneTarget)
+      Object.keys(target).forEach(key => {
+        cloneTarget[key] = deepClone4(target[key], map)
+      })
+    }
+
+    return cloneTarget
+  } else {
+    return target
+  }
+}

package/src/object/merge.js

@@ -0,0 +1,14 @@
+/* 
+merge(...objs): 合并多个对象, 返回一个合并后对象(不改变原对象)
+{ a: [{ x: 2 }, { y: 4 }], b: 1}
+{ a: { z: 3}, b: [2, 3], c: 'foo'}
+合并后: { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }
+*/
+export function mergeObject(...objs) {
+  return objs.reduce((pre, obj) => {
+    return Object.keys(obj).reduce((p, key) => {
+      p[key] = !p.hasOwnProperty(key) ? obj[key] : [].concat(p[key], obj[key])
+      return p
+    }, pre)
+  }, {})
+}

package/src/object/myInstanceOf.js

@@ -0,0 +1,22 @@
+/* 
+自定义instanceof工具函数: 
+  语法: myInstanceOf(obj, Type)
+  功能: 判断obj是否是Type类型的实例
+  实现: Type的原型对象是否是obj的原型链上的某个对象, 如果是返回true, 否则返回false
+*/
+export function myInstanceOf(obj, Type) {
+  // 得到原型对象
+  let protoObj = obj.__proto__
+
+  // 只要原型对象存在
+  while(protoObj) {
+    // 如果原型对象是Type的原型对象, 返回true
+    if (protoObj === Type.prototype) {
+      return true
+    }
+    // 指定原型对象的原型对象
+    protoObj = protoObj.__proto__
+  }
+
+  return false
+}

package/src/object/newInstance.js

@@ -0,0 +1,20 @@
+/* 
+自定义new工具函数
+  语法: newInstance(Fn, ...args)
+  功能: 创建Fn构造函数的实例对象
+  实现: 创建空对象obj, 调用Fn指定this为obj, 返回obj
+*/
+export function newInstance(Fn, ...args) {
+  // 创建一个新的对象
+  const obj = {}
+  // 执行构造函数
+  const result = Fn.apply(obj, args) // 相当于: obj.Fn()
+  // 如果构造函数执行的结果是对象, 返回这个对象
+  if (result instanceof Object) {
+    return result
+  }
+  // 如果不是, 返回新创建的对象
+  obj.__proto__.constructor = Fn // 让原型对象的构造器属性指向Fn
+  
+  return obj
+}

package/src/promise/index.js

@@ -0,0 +1,226 @@
+const PENDING = 'pending' // 初始未确定的状态
+const RESOLVED = 'resolved' // 成功的状态
+const REJECTED = 'rejected' // 失败的状态
+
+/* 
+Promise构造函数
+*/
+function Promise(excutor) {
+
+  const self = this // Promise的实例对象
+  self.status = PENDING // 状态属性, 初始值为pending, 代表初始未确定的状态
+  self.data = undefined // 用来存储结果数据的属性, 初始值为undefined
+  self.callbacks = [] // {onResolved(){}, onRejected(){}}
+
+  /* 
+  将promise的状态改为成功, 指定成功的value
+  */
+  function resolve(value) {
+    // 如果当前不是pending, 直接结束
+    if (self.status !== PENDING) return
+
+    self.status = RESOLVED // 将状态改为成功
+    self.data = value // 保存成功的value
+
+    // 异步调用所有缓存的待执行成功的回调函数
+    if (self.callbacks.length > 0) {
+      // 启动一个延迟时间为0的定时器, 在定时器的回调中执行所有成功的回调
+      setTimeout(() => {
+        self.callbacks.forEach(cbsObj => {
+          cbsObj.onResolved(value)
+        })
+      })
+    }
+  }
+
+  /* 
+  将promise的状态改为失败, 指定失败的reason
+  */
+  function reject(reason) {
+    // 如果当前不是pending, 直接结束
+    if (self.status !== PENDING) return
+
+    self.status = REJECTED // 将状态改为失败
+    self.data = reason // 保存reason数据
+
+    // 异步调用所有缓存的待执行失败的回调函数
+    if (self.callbacks.length > 0) {
+      // 启动一个延迟时间为0的定时器, 在定时器的回调中执行所有失败的回调
+      setTimeout(() => {
+        self.callbacks.forEach(cbsObj => {
+          cbsObj.onRejected(reason)
+        })
+      })
+    }
+  }
+
+  // 调用excutor来启动异步任务
+  try {
+    excutor(resolve, reject)
+  } catch (error) { // 执行器执行出错, 当前promise变为失败
+    console.log('-----')
+    reject(error)
+  }
+
+}
+
+/* 
+用来指定成功/失败回调函数的方法
+    1). 如果当前promise是resolved, 异步执行成功的回调函数onResolved
+    2). 如果当前promise是rejected, 异步执行成功的回调函数onRejected
+    3). 如果当前promise是pending, 保存回调函数
+返回一个新的promise对象
+    它的结果状态由onResolved或者onRejected执行的结果决定
+    2.1). 抛出error ==> 变为rejected, 结果值为error
+    2.2). 返回值不是promise   ==> 变为resolved, 结果值为返回值
+    2.3). 返回值是promise    ===> 由这个promise的决定新的promise的结果(成功/失败)
+*/
+Promise.prototype.then = function (onResolved, onRejected) {
+  const self = this
+
+  onResolved = typeof onResolved === 'function' ? onResolved : value => value // 将value向下传递
+  onRejected = typeof onRejected === 'function' ? onRejected : reason => {
+    throw reason
+  } // 将reason向下传递
+
+  return new Promise((resolve, reject) => { // 什么时候改变它的状态
+
+    /* 
+    1. 调用指定的回调函数
+    2. 根据回调执行结果来更新返回promise的状态
+    */
+    function handle(callback) {
+      try {
+        const result = callback(self.data)
+        if (!(result instanceof Promise)) { //  2.2). 返回值不是promise   ==> 变为resolved, 结果值为返回值
+          resolve(result)
+        } else { // 2.3). 返回值是promise    ===> 由这个promise的决定新的promise的结果(成功/失败)
+          result.then(
+            value => resolve(value),
+            reason => reject(reason)
+          )
+          // result.then(resolve, reject)
+        }
+      } catch (error) { // 2.1). 抛出error ==> 变为rejected, 结果值为error
+        reject(error)
+      }
+    }
+
+    if (self.status === RESOLVED) {
+      setTimeout(() => {
+        handle(onResolved)
+      })
+    } else if (self.status === REJECTED) {
+      setTimeout(() => {
+        handle(onRejected)
+      })
+    } else { // PENDING
+      self.callbacks.push({
+        onResolved(value) {
+          handle(onResolved)
+        },
+        onRejected(reason) {
+          handle(onRejected)
+        }
+      })
+    }
+  })
+}
+
+/* 
+用来指定失败回调函数的方法
+catch是then的语法糖
+*/
+Promise.prototype.catch = function (onRejected) {
+  return this.then(undefined, onRejected)
+}
+
+/* 
+用来返回一个指定vlaue的成功的promise
+value可能是一个一般的值, 也可能是promise对象
+*/
+Promise.resolve = function (value) {
+  return new Promise((resolve, reject) => {
+    // 如果value是一个promise, 最终返回的promise的结果由value决定
+    if (value instanceof Promise) {
+      value.then(resolve, reject)
+    } else { // value不是promise, 返回的是成功的promise, 成功的值就是value
+      resolve(value)
+    }
+  })
+}
+
+/* 
+用来返回一个指定reason的失败的promise
+*/
+Promise.reject = function (reason) {
+  return new Promise((resolve, reject) => {
+    reject(reason)
+  })
+}
+
+/* 
+返回一个promise, 只有当数组中所有promise都成功才成功, 否则失败
+*/
+Promise.all = function (promises) {
+  return new Promise((resolve, reject) => {
+
+    let resolvedCount = 0 // 已经成功的数量 
+    const values = new Array(promises.length) // 用来保存成功promise的value值
+    // 遍历所有promise, 取其对应的结果
+    promises.forEach((p, index) => {
+      p.then(
+        value => {
+          resolvedCount++
+          values[index] = value
+          if (resolvedCount === promises.length) { // 都成功了
+            resolve(values)
+          }
+        },
+        reason => reject(reason)
+      )
+    })
+  })
+}
+
+/* 
+返回一个promise, 由第一个完成promise决定
+*/
+Promise.race = function (promises) {
+  return new Promise((resolve, reject) => {
+    // 遍历所有promise, 取其对应的结果
+    promises.forEach(p => {
+      // 返回的promise由第一个完成p来决定其结果
+      p.then(resolve, reject)
+    })
+  })
+}
+
+/* 
+返回一个延迟指定时间才成功(也可能失败)的promise
+*/
+Promise.resolveDelay = function (value, time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      // 如果value是一个promise, 最终返回的promise的结果由value决定
+      if (value instanceof Promise) {
+        value.then(resolve, reject)
+      } else { // value不是promise, 返回的是成功的promise, 成功的值就是value
+        resolve(value)
+      }
+    }, time)
+  })
+}
+
+/* 
+返回一个延迟指定时间才失败的promise
+*/
+Promise.rejectDelay = function (reason, time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      reject(reason)
+    }, time)
+  })
+}
+
+export default Promise

package/src/pub-sub/index.js

@@ -0,0 +1,95 @@
+/* 
+自定义消息订阅与发布
+*/
+
+const PubSub = {}
+/* 
+  {
+    add: {
+      token1: callback1, 
+      token2: callback2
+    },
+    update: {
+      token3: callback3
+    }
+  }
+*/
+let callbacksObj = {} // 保存所有回调的容器
+let id = 0 // 用于生成token的标记
+
+// 1. 订阅消息
+PubSub.subscribe = function (msgName, callback) {
+
+  // 确定token
+  const token = 'token_' + ++id
+  // 取出当前消息对应的callbacks
+  const callbacks = callbacksObj[msgName]
+  if (!callbacks) {
+    callbacksObj[msgName] = {
+      [token]: callback
+    }
+  } else {
+    callbacks[token] = callback
+  }
+  // 返回token
+  return token
+}
+
+
+// 2. 发布异步的消息
+PubSub.publish = function (msgName, data) {
+  // 取出当前消息对应的callbacks
+  let callbacks = callbacksObj[msgName]
+  // 如果有值
+  if (callbacks) {
+    // callbacks = Object.assign({}, callbacks)
+    // 启动定时器, 异步执行所有的回调函数
+    setTimeout(() => {
+      Object.values(callbacks).forEach(callback => {
+        callback(data)
+      })
+    }, 0)
+  }
+}
+
+// 3. 发布同步的消息
+PubSub.publishSync = function (msgName, data) {
+  // 取出当前消息对应的callbacks
+  const callbacks = callbacksObj[msgName]
+  // 如果有值
+  if (callbacks) {
+    // 立即同步执行所有的回调函数
+    Object.values(callbacks).forEach(callback => {
+      callback(data)
+    })
+  }
+}
+
+/*
+4. 取消消息订阅
+  1). 没有传值, flag为undefined
+  2). 传入token字符串
+  3). msgName字符串
+*/
+PubSub.unsubscribe = function (flag) {
+  // 如果flag没有指定或者为null, 取消所有
+  if (flag === undefined) {
+    callbacksObj = {}
+  } else if (typeof flag === 'string') {
+    if (flag.indexOf('token_') === 0) { // flag是token
+      // 找到flag对应的callbacks
+      const callbacks = Object.values(callbacksObj).find(callbacks => callbacks.hasOwnProperty(flag))
+      // 如果存在, 删除对应的属性
+      if (callbacks) {
+        delete callbacks[flag]
+      }
+    } else { // flag是msgName
+      delete callbacksObj[flag]
+    }
+
+  } else {
+    throw new Error('如果传入参数, 必须是字符串类型')
+  }
+}
+
+export default PubSub

package/src/string/index.js

@@ -0,0 +1,28 @@
+/* 
+1. 字符串倒序: reverseString(str)  生成一个倒序的字符串
+2. 字符串是否是回文: palindrome(str) 如果给定的字符串是回文，则返回 true ；否则返回 false
+3. 截取字符串: truncate(str, num) 如果字符串的长度超过了num, 截取前面num长度部分, 并以...结束
+*/
+
+/* 
+1. 字符串倒序: reverseString(str)  生成一个倒序的字符串
+*/
+export function reverseString(str) {
+  // return str.split('').reverse().join('')
+  // return [...str].reverse().join('')
+  return Array.from(str).reverse().join('')
+}
+
+/* 
+2. 字符串是否是回文: palindrome(str) 如果给定的字符串是回文，则返回 true ；否则返回 false
+*/
+export function palindrome(str) {
+  return str === reverseString(str)
+}
+
+/* 
+3. 截取字符串: truncate(str, num) 如果字符串的长度超过了num, 截取前面num长度部分, 并以...结束
+*/
+export function truncate(str, num) {
+  return str.length > num ? str.slice(0, num) + '...' : str
+}

package/test/01_call_apply_bind.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>函数的call/apply/bind()</title>
+</head>
+<body>
+
+  <!-- 
+    1. 区别call()/apply()/bind()
+        call(obj)/apply(obj): 调用函数, 指定函数中的this为第一个参数的值
+        bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值
+        注意: 如果obj是null/undefined, this为window
+    2. 应用
+        call()/bind()应用: 根据伪数组生成真数组
+        bind(): react中组件的自定义方法 / vue中的事件回调函数内部
+    3. 自定义call()/apply()
+        1). 给obj添加一个临时方法, 方法名任意, 值为当前函数
+        2). 通过obj调用这个临时方法, 并将接收的参数传入
+        3). 删除obj上的这个临时方法属性
+    4. 自定义实现bind()
+        1). 返回一个新函数
+        2). 在新函数内部通过原函数对象的call方法来执行原函数
+            指定this为obj
+            指定参数为bind调用的参数和后面新函数调用的参数
+  -->
+
+  <script src="../dist/atguigu-utils.js"></script>
+  <script>
+    function fn(a, b) {
+      console.log(a, b, this)
+    }
+
+    const obj = {m: 1}
+    
+    aUtils.call(fn, obj, 2, 3)  // 相当于执行了obj.fn(2, 3)
+    aUtils.apply(fn, obj, [2, 3])
+    aUtils.call(fn, undefined, 2, 3)
+
+    aUtils.bind(fn, obj)(2, 3)
+    aUtils.bind(fn, obj, 4)(2, 3)
+    aUtils.bind(fn, undefined, 4)(2, 3)
+  </script>
+</body>
+</html>

package/test/02_throttle_debounce.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>函数节流与防抖</title>
+</head>
+<body>
+
+  <button id="throttle">测试函数节流</button>
+  <button id="debounce">测试函数防抖</button>
+  
+  <!-- 
+    1. 事件频繁触发可能造成的问题?
+        1). 一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成浏览器性能问题
+        2). 如果向后台发送请求，频繁触发，对服务器造成不必要的压力
+    
+    2. 如何限制事件处理函数频繁调用
+        1). 函数节流
+        2). 函数防抖
+
+    3. 函数节流(throttle)
+        1). 理解: 
+            在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次
+            适合多次事件按时间做平均分配触发
+        2). 场景：
+            窗口调整（resize）
+            页面滚动（scroll）
+            DOM 元素的拖拽功能实现（mousemove）
+            抢购疯狂点击（click）
+            
+    4. 函数防抖(debounce)
+        1). 理解:
+            在函数需要频繁触发时: 在规定时间内，只让最后一次生效，前面的不生效。
+            适合多次事件一次响应的情况
+        2). 场景：
+            输入框实时搜索联想（keyup/input）
+  -->
+
+  <script src="../dist/atguigu-utils.js"></script>
+  <script>
+    /* 处理点击事件的回调函数 */
+    function handleClick(event) { // 处理事件的回调
+      console.log('处理点击事件', this, event)
+    }
+
+    // document.getElementById('throttle').onclick = handleClick
+    document.getElementById('throttle').onclick = aUtils.throttle(handleClick, 2000)
+    document.getElementById('debounce').onclick = aUtils.debounce(handleClick, 2000)
+  </script>
+
+</body>
+</html>

package/test/03_array_declare.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>数组声明式方法</title>
+</head>
+<body>
+  <script src="../dist/atguigu-utils.js"></script>
+  <script>
+    /* 
+    自定义实现一组数组声明式方法
+      1). map()
+      2). reduce()
+      3). filter()
+      4). find()
+      5). findIndex()
+      6). every()
+      7). some()
+    */
+    /* 
+    需求:
+    1. 产生一个每个元素都比原来大10的新数组
+    2. 得到所有奇数的和
+    3. 得到值大于8且下标是偶数位的元素组成的数组
+    4. 找出一个值大于8且下标是偶数位的元素
+    5. 找出一个值大于8且下标是偶数位的元素的下标
+    6. 判断下标为偶数的元素是否都为奇数
+    7. 判断是否有下标为偶数的元素值为奇数
+    */
+
+    const arr = [1, 3, 6, 9, 15, 19, 16]
+
+    console.log(aUtils.map(arr, (item, index) => item + 10))
+    console.log(aUtils.reduce(arr, (preTotal, item, index) => {
+      return preTotal + (item%2===1 ? item : 0)
+    }, 0))
+    console.log(aUtils.filter(arr, (item, index) => item>8 && index%2===0))
+    console.log(aUtils.find(arr, (item, index) => item>8 && index%2===0))
+    console.log(aUtils.findIndex(arr, (item, index) => item>8 && index%2===0))
+    console.log(aUtils.every(arr, (item, index) => index%2===1 || item%2===1))
+    console.log(aUtils.some(arr, (item, index) => index%2===1 || item%2===1))
+    aUtils.test()
+  </script>
+
+  <script>
+    
+  </script>
+</body>
+</html>