zhaozhen161的博客

原创 再回顾一波节流防抖很有用

1、什么是节流和防抖？节流(throttle)：节流可以控制事件触发的频率，节流就跟小水管一样，如果不加节流的话，水就会哗啦啦啦啦啦啦的流出来，但是一旦加了节流阀，你就可以自己控制水的流速了，加了节流后水可以从哗啦啦啦变成滴答滴答滴答，放到我们的函数事件里面说就是可以让事件触发变慢，比如说事件触发可以让它在每一秒内只触发一次；防抖(debounce)：防抖就是可以限制事件在一定时间内不能多次触发，比如说你疯狂按点击按钮，一顿操作猛如虎，不加防抖的话它也会跟着你疯起来，疯狂执行触发的方法。但是一旦加了防

翻译 Promises讲解

原生 Promises 是在 ES2015 对 JavaScript 做出最大的改变。它的出现消除了采用 callback 机制的很多潜在问题，并允许我们采用近乎同步的逻辑去写异步代码。可以说 promises 和 generators ，代表了异步编程的新标准。不论你是否用它，你都得 必须 明白它们究竟是什么。Promise 提供了相当简单的 API ，但也增加了一点学习曲线。如果你以前从没...

翻译 useEffect, useCallback, useMemo三者有何区别？

hooks

原创 构建一个web前端项目

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、现成模板二、使用命令行创建这种方式需要安装相应的命令，然后由命令来创建项目。2.读入数据3.自己搭建项目骨架3.1选择合适的规范来写代码3.2选择合适的构建工具3.3确定是单页面应用（SPA）还是多页面应用3.4选择合适的前端框架与 UI 库3.5定好目录结构3.6搭建一个好的脚手架3.7使用版本控制系统管理源代码（git）3.8编写代码3.9组件化3.10测试3.11构建3.12部署3.13持续集成测试、构建、部署3.1.

原创 React Hook的最全总结（附demo，收藏一波）

React Hook的最全总结（附demo）（阅读指南：建议将每个小demo都手动执行一遍，保证你会不虚此行。）Hook是React 16.8（包括react-dom 16.8）新增的特性，它可以让你在不编写class的情况下使用state及其它的React特性，Hook是一个特殊的函数。React-router 从V5.1开始存在Hook方法并支持hook。React Redux 从 v7.1.0 开始支持 Hook API 并暴露了 useDispatch 和 useSelecto.

转载 Promise(resolve、reject、then、catch)、all、race等异步请求的介绍与使用

ES6 Promise 用法讲解Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成'); resolve('随便什么数据'); }, 2000

原创 Promise.all的错误处理（挺有用的）

通常处理多个请求的时候我们会用Promise.all()方法。该方法指当所有在可迭代参数中的 promises 已完成，或者第一个传递的 promise（指 reject）失败时，返回 promise。但是当其中任何一个被拒绝的话。主Promise.all([..])就会立即被拒绝，并丢弃来自其他所有promis的全部结果。 var p1 = Promise.resolve(3); var p2 = Promise.reject(2); var p3 = new Promise(

原创 Redux实现原理解析及应用

1、为什么要用redux在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件（通过props）,所以，两个非父子组件之间通信就相对麻烦，redux的出现就是为了解决state里面的数据问题2、Redux设计理念Redux是将整个应用状态存储到一个地方上称为store,里面保存着一个状态树store tree,组件可以派发(dispatch)行为(action)给store,而不是直接通知其他组件，组件内部通过订阅store中的状态state来刷新自己的视图。3、.

原创 发一个关于知识体系的学习路线

转载 Node.js中package.json中库的版本号详解(^和~区别)

当我们查看package.json中已安装的库的时候，会发现他们的版本号之前都会加一个符号，有的是插入符号（^），有的是波浪符号（~）。那么他们到底有什么区别呢？先贴一个例子，对照例子来做解释："dependencies": { "bluebird": "^3.3.4", "body-parser": "~1.15.2" }bluebird的版本号：^3.3.4body-parse的版本号：~1.15.2当我们使用最新的Node运行‘npm instal -..

转载 使用 React 开发小程序

为什么要用 React 开发小程序大家知道微信小程序在商业上取得了非常大的成功，正是因为小程序在商业上的成功，导致后面不管是支付宝还是其他厂商在推出自己的小程序时，都参考了微信小程序的 API 设计。但是作为小程序的开发者来说，大家其实对于小程序的 API 设计都是很不满意的，所以现在小程序社区中有非常多的小程序框架，大家都希望能改善小程序的开发体验。那我们为什么要选择 React 作为小程序的开发框架呢，当然是因为我们熟悉 React，我们希望能以非常小的学习成本去切换到小程序的开发上..

原创 关于组件开发中遇到的防抖和节流的一些知识

问题1：如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？问题2：如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？为了应对如上场景，便出现了 函数防抖 和 函数节流 两个概念，总的来说：这两个方法是...

翻译 js Array 交集 并集 差集 去重

最劲项目需要用到js数组去重和交集的一些运算，我的数组元素个数可能到达1000以上，网上的实现方式都是2次循环，性能不适合我的需求，1000*1000那循环次数太多了，所以我这里采用对象object来做处理，用空间换时间，code 如下：///集合取交集 Array.intersect = function () { var result = new ...

翻译 js中的事件委托或是事件代理详解

起因：1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考；概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同...

原创 React中state和props分别是什么？

总结

原创 js+html纯原生代码 简单的下载对话框 点击按钮自动读条

1. 这个小案例是：页面初始只有一个button，上面显示文字【startDownload】点击button后，button文字变为【Downloading】,并弹出模态对话框模态对话框的body部分，显示下载进度的文字表示和进度条表示（文字和进度条的进度要一致）button显示【CancelDownload】下载结束后，文字和button内容会有变化点击【close】按钮，关闭对话框，页...

原创 js原生调色器

1. js纯原生颜色选择器的实现(1)html部分：<div id="hezi"> <span class="red"><div class="r"></div></span> <span class="green"><div class=&qu