10个常见的前端手写功能

已于 2023-03-30 15:10:55 修改
阅读量738 收藏 7
点赞数
文章标签： 前端 javascript json
于 2022-08-03 11:02:30 首次发布
原文链接：https://juejin.cn/post/7031322059414175774
版权

10个常见的前端手写功能

1、防抖

防抖是指在一段时间内，只执行最后一次事件，而忽略在这段时间内发生的其他事件。通常用于用户频繁操作的场景，例如按钮点击、滚动事件等。

实现防抖可以用setTimeout来实现，例如：

function debounce(fn, delay) {
  let timerId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timerId);
    timerId = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

在这个例子中，debounce函数接收两个参数，第一个是需要防抖的函数，第二个是延迟时间。返回一个函数，每次调用这个函数时，首先清除之前设置的定时器，然后再设置一个新的定时器。如果在延迟时间内多次调用这个函数，只有最后一次调用会被执行。

2、节流

节流是指在一段时间内，只执行一次事件，而忽略在这段时间内发生的其他事件。通常用于用户频繁触发事件，例如鼠标移动、窗口resize等。

实现节流可以用setTimeout和时间戳来实现，例如：

function throttle(fn, delay) {
  let timerId;
  let lastTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(context, args);
      lastTime = now;
    } else {
      clearTimeout(timerId);
      timerId = setTimeout(function() {
        fn.apply(context, args);
      }, delay - (now - lastTime));
    }
  };
}

在这个例子中，throttle函数接收两个参数，第一个是需要节流的函数，第二个是时间间隔。返回一个函数，每次调用这个函数时，判断当前时间与上次调用时间的时间差是否大于等于时间间隔，如果大于等于，执行函数并更新上次调用时间；否则，清除之前设置的定时器，并设置一个新的定时器，延迟时间为时间间隔减去时间差。这样，在时间间隔内多次调用这个函数，只有第一次调用会被执行。

3、深拷贝

JSON方法

// 不支持值为undefined、函数和循环引用的情况
const cloneObj = JSON.parse(JSON.stringify(obj))

递归拷贝

function deepClone(obj, cache = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj
  if (obj instanceof Date) return new Date(obj)
  if (obj instanceof RegExp) return new RegExp(obj)
  
  if (cache.has(obj)) return cache.get(obj) // 如果出现循环引用，则返回缓存的对象，防止递归进入死循环
  let cloneObj = new obj.constructor() // 使用对象所属的构造函数创建一个新对象
  cache.set(obj, cloneObj) // 缓存对象，用于循环引用的情况

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], cache) // 递归拷贝
    }
  }
  return cloneObj
}

// 测试
const obj = { name: 'Jack', address: { x: 100, y: 200 } }
obj.a = obj // 循环引用
const newObj = deepClone(obj)
console.log(newObj.address === obj.address) // false

4、手写Promise

class MyPromise {
  constructor(executor) {
    this.status = 'pending' // 初始状态为等待
    this.value = null // 成功的值
    this.reason = null // 失败的原因
    this.onFulfilledCallbacks = [] // 成功的回调函数数组
    this.onRejectedCallbacks = [] // 失败的回调函数数组
    let resolve = value => {
      if (this.status === 'pending') {
        this.status = 'fulfilled'
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn()) // 调用成功的回调函数
      }
    }
    let reject = reason => {
      if (this.status === 'pending') {
        this.status = 'rejected'
        this.reason = reason
        this.onRejectedCallbacks.forEach(fn => fn()) // 调用失败的回调函数
      }
    };
    try {
      executor(resolve, reject)
    } catch (err) {
      reject(err)
    }
  }
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.status === 'fulfilled') {
        setTimeout(() => {
          const x = onFulfilled(this.value);
          x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
        })
      }
      if (this.status === 'rejected') {
        setTimeout(() => {
          const x = onRejected(this.reason)
          x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
        })
      }
      if (this.status === 'pending') {
        this.onFulfilledCallbacks.push(() => { // 将成功的回调函数放入成功数组
          setTimeout(() => {
            const x = onFulfilled(this.value)
            x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
          })
        })
        this.onRejectedCallbacks.push(() => { // 将失败的回调函数放入失败数组
          setTimeout(() => {
            const x = onRejected(this.reason)
            x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
          })
        })
      }
    })
  }
}

// 测试
function p1() {
  return new MyPromise((resolve, reject) => {
    setTimeout(resolve, 1000, 1)
  })
}
function p2() {
  return new MyPromise((resolve, reject) => {
    setTimeout(resolve, 1000, 2)
  })
}
p1().then(res => {
  console.log(res) // 1
  return p2()
}).then(ret => {
  console.log(ret) // 2
})

5、异步控制并发数

function limitRequest(urls = [], limit = 3) {
  return new Promise((resolve, reject) => {
    const len = urls.length
    let count = 0

    // 同时启动limit个任务
    while (limit > 0) {
      start()
      limit -= 1
    }

    function start() {
      const url = urls.shift() // 从数组中拿取第一个任务
      if (url) {
        axios.post(url).then(res => {
          // todo
        }).catch(err => {
          // todo
        }).finally(() => {
          if (count == len - 1) {
            // 最后一个任务完成
            resolve()
          } else {
            // 完成之后，启动下一个任务
            count++
            start()
          }
        })
      }
    }

  })
}

// 测试
limitRequest(['http://xxa', 'http://xxb', 'http://xxc', 'http://xxd', 'http://xxe'])

6、继承

ES5 继承（寄生组合继承）

function Parent(name) {
  this.name = name
}
Parent.prototype.eat = function () {
  console.log(this.name + ' is eating')
}

function Child(name, age) {
  Parent.call(this, name)
  this.age = age
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

// 测试
let xm = new Child('xiaoming', 12) 
console.log(xm.name) // xiaoming
console.log(xm.age) // 12
xm.eat() // xiaoming is eating

ES6继承

class Parent {
  constructor(name) {
    this.name = name
  }
  eat() {
    console.log(this.name + ' is eating')
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name)
    this.age = age
  }
}

// 测试
let xm = new Child('xiaoming', 12) 
console.log(xm.name) // xiaoming
console.log(xm.age) // 12
xm.eat() // xiaoming is eating

7、数组排序

sort排序

// 对数字进行排序，简写
const arr = [3, 2, 4, 1, 5]
arr.sort((a, b) => a - b)
console.log(arr) // [1, 2, 3, 4, 5]

// 对字母进行排序，简写
const arr = ['b', 'c', 'a', 'e', 'd']
arr.sort()
console.log(arr) // ['a', 'b', 'c', 'd', 'e']

冒泡排序

function bubbleSort(arr) {
  let len = arr.length
  for (let i = 0; i < len - 1; i++) {
    // 从第一个元素开始，比较相邻的两个元素，前者大就交换位置
    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        let num = arr[j]
        arr[j] = arr[j + 1]
        arr[j + 1] = num
      }
    }
    // 每次遍历结束，都能找到一个最大值，放在数组最后
  }
  return arr
}

//测试
console.log(bubbleSort([2, 3, 1, 5, 4])) // [1, 2, 3, 4, 5]

8、数组去重

Set去重

const newArr = [...new Set(arr)]
// 或
const newArr = Array.from(new Set(arr))

indexOf去重

const newArr = arr.filter((item, index) => arr.indexOf(item) === index)

9、获取 url 参数

URLSearchParams 方法

// 创建一个URLSearchParams实例
const urlSearchParams = new URLSearchParams(window.location.search);
// 把键值对列表转换为一个对象
const params = Object.fromEntries(urlSearchParams.entries());

split 方法

function getParams(url) {
  const res = {}
  if (url.includes('?')) {
    const str = url.split('?')[1]
    const arr = str.split('&')
    arr.forEach(item => {
      const key = item.split('=')[0]
      const val = item.split('=')[1]
      res[key] = decodeURIComponent(val) // 解码
    })
  }
  return res
}

// 测试
const user = getParams('http://www.baidu.com?user=%E9%98%BF%E9%A3%9E&age=16')
console.log(user) // { user: '阿飞', age: '16' }

10、发布订阅模式

class EventEmitter {
  constructor() {
    this.cache = {}
  }

  on(name, fn) {
    if (this.cache[name]) {
      this.cache[name].push(fn)
    } else {
      this.cache[name] = [fn]
    }
  }

  off(name, fn) {
    const tasks = this.cache[name]
    if (tasks) {
      const index = tasks.findIndex((f) => f === fn || f.callback === fn)
      if (index >= 0) {
        tasks.splice(index, 1)
      }
    }
  }

  emit(name, once = false) {
    if (this.cache[name]) {
      // 创建副本，如果回调函数内继续注册相同事件，会造成死循环
      const tasks = this.cache[name].slice()
      for (let fn of tasks) {
        fn();
      }
      if (once) {
        delete this.cache[name]
      }
    }
  }
}

// 测试
const eventBus = new EventEmitter()
const task1 = () => { console.log('task1'); }
const task2 = () => { console.log('task2'); }

eventBus.on('task', task1)
eventBus.on('task', task2)
eventBus.off('task', task1)
setTimeout(() => {
  eventBus.emit('task') // task2
}, 1000)

转载于：https://juejin.cn/post/7031322059414175774

阿铭同学
关注
一些常用的前端功能
...
06-15 1289
文字无缝向左滚动 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;script src="http://libs.baidu.com/j
10个常见的前端手写功能，你全都会吗？
q1472750149的博客
11-18 563
这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战 本篇译自：enlear.academy/50-tool-onl… 又来了，本瓜又来了~ 对于 web 技术在线资源收集，绝不手软！ 一个链接????，就是一个新世界????！开冲????‍！ 1. Browser Default Styles 可以在 Browser Default Styles 中查询 HTML 元素在每个浏览器下的默认样式； 2. Clippy 可以在 Clippy 为你的图片作剪辑，并且生
前端面试手写功能
一个超爱喝可乐的web前端攻城狮
11-29 166
前端面试手写功能 1,防抖 function debounce(fn, delay) { let timer return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, args) }, delay) } } // 测试 function task() { console.lo
10个常见的前端手写功能，你会多少？
weixin_45178716的博客
04-06 506
万丈高楼平地起，地基打的牢，才能永远立于不败之地。今天给大家带来的是10个常见的 JavaScript 手写功能，重要的地方已添加注释。有的是借鉴别人的，有的是自己写的，如有不正确的地方，欢迎多多指正。1、防抖functiondebounce(fn,delay){ lettimer returnfunction(...args){ if(t...
前端常用功能笔记
苍老师背后的男人
07-20 667
1.字符串.replace(正则, function(v,i,str){ return 'xxx' }) //xxx为替换掉匹配到的内容 'myTestJob'.replace(/[A-Z]/g, (v,i,str) => `_${v.toLowerCase()}`) //v为匹配到的值，i是下标，str是'myTestJob'这个字符串 输出结果为 'my_test_job' 2.如何用异步post请求 文件流数据，并触发浏览器的下载功能 ......
前端手写篇
quitv的博客
04-05 626
假如我们有一块内存，专门用来缓存我们最近发访问的网页，访问一个新网页，我们就会往内存中添加一个网页地址，随着网页的不断增加，内存存满了，这个时候我们就需要考虑删除一些网页了。这一整个过程就可以称之为。函数，这个意思是将多个函数合并成一个函数，这个合并后的函数会依次执行传入的每个函数，并将前一个函数的执行结果作为后一个函数的输入参数，直到最后一个函数执行完毕并返回结果。像dom的拖拽，如果用防抖的话，就会出现卡顿的感觉，因为只在停止的时候执行了一次，这个时候就应该用节流，在一定时间内多次执行，会流畅很多。
项目中常见的前端手写功能（含代码）
前端程序猿的博客
01-17 1007
JavaScript相关工具代码（方便又实用）时间工具，获取当前URL截取参数对象，判断移动端，判断IOS端Android端，判断浏览器的简单有效方法，JS,Jquery获取各种屏幕的宽度和高度，js实现手机横屏显示，js拖拽效果，获取上传文件的大小，限制上传文件的类型，购物车，电梯导航，手风琴（待完成）
金九银十：20道前端手写面试题
java_beautiful的博客
08-10 1549
最后希望大家能理解这些题并知晓why，有些题，并不是单单只是用来考你。而是变相的让你理解这其中深藏的意义。以上的题目，我的答案并非就是最优答案。若你有更好的解决方法，请不要吝啬，大胆的敲到评论区！我会把你的解决方法补充到文章里面。...
前端常见的方法及概念手写原理
weixin_47926886的博客
06-04 487
前端常见的方法及概念手写原理
前端手写系列
越思考越清晰
12-07 2148
js原生类 效果
前端实现手写签名
最新发布
m0_48353529的博客
07-11 856
目前项目需求为签名在一张图片上，使用canvas就需要先把图片渲染在画板上，然后根据鼠标移动事件连接点位从而组成签名，最后导出为图片。
前端手写电子签名板实现方案
weixin_43809685的博客
12-29 3222
前端实现手写签名 canvas实现电子签名 前端手写电子签名板 电子签名
前端手写汇总
qq_40511157的博客
12-26 318
1. 手写防抖与节流 // 时间戳实现的节流函数 function throttle (cb, waitTime) { let previous = 0; return function (...args) { let now = new Date(); let context = this; if (now - previous > waitTime) { previous = now;
20212022最新Web前端经典面试题笔试题之前端手写功能(含答案)史上最全【笔试题】
南北极之间
02-24 864
前端面试中常见的手写功能
php调用手写板,怎样使用Vue+canvas实现移动端手写板功能
weixin_39777488的博客
03-11 150
这次给大家带来怎样使用Vue+canvas实现移动端手写板功能，使用Vue+canvas实现移动端手写板功能的注意事项有哪些，下面就是实战案例，一起来看一下。清除保存Canvas画板 var draw;var preHandler = function(e){e.preventDefault();}class Draw {constructor(el) {this.el = elthis.can...
前端四大手写
如果有了可惜
07-31 500
转载的 手写 bind bind 用法不难，一句话解释就是把新的 this 绑定到某个函数 func 上，并返回 func 的一个拷贝。使用方法如下： let boundFunc = func.bind(thisArg[, arg1[, arg2[, …argN]]]) 那怎么实现呢？我认为手写 bind 可以分为三个等级： 初级：只用 ES6 新语法 优点：因为可以使用 const 、… 操作符，代码简洁 缺点：不兼容 IE 中级：使用 ES5 语法 优点：兼容 IE 缺点：参数要用Array.proto
前端各种手写简易工具库
a77321a的博客
10-21 552
/** * 功能类库 */ /** * * @type {Object} */ var util = {}; /** * [function 返回数组的指定项] * @param {[type]} array [description] * @param {[type]} item [description] * @return {[type]}
前端常见手写功能
weixin_43624099的博客
02-14 120
以下是转载的内容，觉得挺不错的就保存一份，出处在最下方哦~ 1、防抖 function debounce(fn, delay) { let timer return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, args) }, delay) } } // 测试 function ta
提升前端面试竞争力：手写EventBus实现与代码规范分析
本资源主要聚焦于前端面试中关于手写`EventBus`（事件总线）的考察。EventBus是一种在单向数据流架构中常见的组件，用于在应用程序的不同部分之间传递事件，促进解耦和模块化。面试官会关注以下几个关键点： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值