![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 66
Zdde_
学生党一枚
展开
-
useState vs useReducer使用场景介绍
React HooksReact Hooks 推出以后,函数组件中经常使用useState保存状态。用过一段时间后发现过多的useState导致页面非常臃肿,具有关联性的状态分散,不利于维护。基于此,其实React在推出管理状态的Hook时就考虑到了,另一个useReducer就是用于解决上面的现象。那么考虑其使用场景就是必须的了。何时使用useState或useReducer一个典型的例子:累加器import { useState } from 'react'const Counter =原创 2021-10-13 15:54:12 · 2106 阅读 · 1 评论 -
高阶函数——优雅的封装
高阶函数抽象、重复的抽象、可组合性抽象看下面的代码,我们将代码封装成函数,它的好处是什么呢?let total = 0, count = 1;while(count <= 10) { total += count; count = 1;}console.log(total)上面是一个简单的累加代码,命令式的编写代码,再简单逻辑的时候我们能够很清楚在干什么,但是一旦变量增多,代码行增加,逻辑复杂起来,我们就很难一下子明白这段代码是在干什么。console.log(sum(r原创 2021-09-26 21:51:25 · 249 阅读 · 0 评论 -
如何实现:fn(‘a.b.c.d.e‘, obj) // zdde ?
递归实现多层嵌套key取值const obj = { type: 'person', a: { b: { c: { d: {e:'zdde'}} } } }}实现const deepPick = (key, obj) => { const [fitst, ...props] = key.split('.'); return props.length ? deepPick(props.join('.'), obj[first]) : obj[原创 2021-09-12 18:19:25 · 882 阅读 · 0 评论 -
手撕Vue-Router原理-实现自己的路由插件
1.路由总结基础知识点是必须掌握的,无论在业务开发过程中还是准备面试复习,都需要扎实掌握。手写路由插件-基础版1.初始化一个vue项目新建一个vuerouter文件夹,在文件夹中创建一个index.js文件,我们的vue插件就写在index中。2.VueRouter的使用方式 vue-router的基本使用方式: import Router from ‘vue-router’ Vue.use(Router) export default new Router({ mode: 'his原创 2021-07-13 13:50:28 · 203 阅读 · 0 评论 -
vuejs源码之createElement
vue使用createElement函数创建vnode上文中我们提到了vue使用虚拟dom来描述dom节点,这样做的目的是较少浏览器的开销,提高性能。那么vue是如何创建虚拟dom的呢?下面我们来分析vue中的createElement函数是如何创建vnode的。...原创 2021-05-26 10:33:06 · 740 阅读 · 0 评论 -
vuejs源码之render函数的分析
render函数分析紧接上文分析到了src\core\instance\lifecycle.js文件下的mountComponent函数,该函数首先就判断了用户是否自己再配置选项中写了render,如果用户没有自己写render,那么vue会进行创建。用户自己写render示例如下:在index.html 中 <div id="app"></div>new Vue({ el: '#app', render(createElement){ return cre原创 2021-05-23 10:41:54 · 270 阅读 · 0 评论 -
vuejs源码之实例对象挂载分析
vm.$mount的实现逻辑在new Vue(options)之后,vue做了一系列的初始化过程,在init()函数最后进行了挂载操作。if (vm.$options.el) { vm.$mount(vm.$options.el)}vm.$mount方法在多个地方都有定义,如 src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js、src/platform/weex/runtim原创 2021-05-20 16:15:32 · 290 阅读 · 1 评论 -
vuejs源码之初始化过程分析
vue中初始化流程分析首先观察Vue构造函数function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options)}从源码中可见,构造函数执行原创 2021-05-17 18:24:58 · 217 阅读 · 2 评论 -
vuejs源码之编译构建过程
vuejs打包构建流程梳理package.json 找到入口文件vue2.6.11源码中打包命令分别为以下三个: "build": "node scripts/build.js", "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer", "build:weex": "npm run build -- weex",ssr 服务端渲染 和 weex版本 暂时不关注。主要看 build 默认构建。这原创 2021-05-17 14:04:56 · 548 阅读 · 1 评论 -
JavaScript之二叉树前中后序遍历(递归与非递归版对比)
构建二叉树数据binaryTree.jsconst bt = { val: 1, left: { val: 2, left: { val: 3, left: null, right: null }, right: { val: 4, left: null, right: null } }, right: { val: 5, left: { val: 6, left: null, right: null },原创 2021-05-11 09:35:37 · 132 阅读 · 0 评论 -
Vue源码系列之数据响应式原理
Vue数据响应式原理响应式数据vue中响应式数据主要表现在数据发生变化会导致页面随之更新,页面操作更新也会导致vue数据的更改。那么,实现响应式数据也需要用到数据劫持的方法,当我们DOM结构中使用到相关数据时,就要对使用到的数据进行监听,无论数据是否重复,都需要对所依赖的数据进行监听。上图中,name属性用到了两次,那么就需要进行两次监听。代码实现Vue.js class Vue{ constructor(options){ //保存该选项 this.$option原创 2021-03-26 20:04:34 · 125 阅读 · 0 评论 -
Vue源码系列之数据代理和数据劫持
数据代理和数据劫持数据代理有如下数据:a:{ b:{ name:'张三'; }}a.b.name // 张三上述代码在访问name属性时需要a.b.name这样访问,那么如果能够直接使用a.name这样访问,就说对象a代理了a.b的任务,实现了数据代理。那么在Vue中我们能够直接使用Vue实例对象访问到data中的数据就是将数据代理到了Vue实例对象下面,即vm.name代理了vm.$data.name。数据劫持数据劫持是实现数据代理的一种技术。Vue2.x中使用的是Object原创 2021-03-25 17:59:21 · 666 阅读 · 1 评论 -
JS之LeetCode_01_02_20题分析记录
算法基础薄弱抓紧时间多补补LeetCode 01 两数之和如题:分析暴力破解肯定时间复杂度较大,而且面试官肯定不想看到这样的答案。我们将目光从数组中拉出来,关注一下target = 9,我们可以利用9 减去 数组中的每个数得到和为target的另一个值,记为res。假如nums = [ 2 ,7 ,11 ,15];9 - nums[i] = 7 , 2 , -2 , -6; 那么 nums[i] = 2 7 11 15 ,这里我们可以借助Map集合来帮助我们找出两个数的下标。将nums[i原创 2021-03-12 21:46:41 · 127 阅读 · 0 评论 -
如何实现函数节流和函数防抖?
函数节流函数节流从现象来看首次执行事件函数后间隔一段时间后再次执行该事件函数,从而将频繁的触发导致的事件函数频繁执行这一频率给降低。如下图频率的比较从图上看出,未进行节流处理的事件回调函数,会因为频繁的触发导致事件回调函数频繁的执行,如果是含有请求的事件回调函数,那么势必对服务器造成压力,如果是操作dom元素也会对浏览器的渲染产生压力。应用场景比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数;函数节流实现function thrott原创 2021-03-06 11:01:42 · 246 阅读 · 0 评论 -
自定义系列之Vue全局事件总线
自定义全局事件总线对象模块解决Vue中多重组件嵌套以及兄弟组件之间传值问题Vue中以及提供了解决方案为什么还要自定义呢?答:模仿Vue的实现方式自己来完成功能,能够提高我们编程思维,从设计的角度出发,往往能让我们更清楚底层逻辑实现。提高我们的编码质量。模仿 $on $emit $off首先,我们看看vue中要是使用这些方法,该如何使用。应该明确的是,这些方法一般用在组件中。//父组件mounted(){ this.$on('add',this.addHandle)}methods:{原创 2021-02-19 10:51:41 · 563 阅读 · 0 评论 -
一文讲清vue中自定义事件监听和分发
自定义全局事件总线事件监听和组件传值方式在Vue中我们可以使用下面的代码来实现组件中自定义事件的监听和分发://在父组件中mounted () { //给Header组件添加addTodo事件,通过$on监听 this.$on('addTodo', this.addTodo)}methods: { addTodo (todo) { this.todos.unshift(todo) },}//Header组件中methods: {原创 2021-02-17 21:14:06 · 844 阅读 · 0 评论 -
妈妈再也不用担心系列之上传进度条
妈妈再也不用担心系列之上传进度条进度条的实现话不多说,有图有真相!!!原理是啥?首先明白两个东西页面的进度条是由div 宽度百分比 实现的上传百分比是由XMLHttpRequest 对象的upload.onprocess函数产生的ok,基于这两点,我们就可以完成上传进度条了。代码撸起来!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t原创 2020-12-18 18:11:06 · 145 阅读 · 1 评论 -
快来看啦!~百度搜索JSONP实战!
先设计一个简单的搜索样式如下图基础内容参考文章 如何优雅的使用JSONP?猛戳此处!!!<div class="search-wrap "> <div class="input-wrap"> <input type="text" class="search-input J_searchInput" placeholder="百度一下"> </div> <div class="list-wrap">原创 2020-12-18 16:36:52 · 324 阅读 · 2 评论 -
如何优雅的使用JSONP?猛戳此处!!!
如何优雅的使用JSONP?猛戳此处!!!JSONP(JSON with Padding)JSONP 是一种json的使用模式,主要是用来解决跨域请求数据。因为有同源策略存在的原因,导致我们从不同的域(网站)访问数据会出现跨域报错。JSONP就是用来解决该问题的手段之一。清楚JSONP为什么不会跨域<script src="https://www.baidu.com/wd=D"></script>//这种方式的请求是不会产生跨域的,因此我们可以利用script标签的src来请原创 2020-12-18 15:39:47 · 164 阅读 · 0 评论 -
如何优雅的封装原生ajax?原来如此简单!
封装原生AjaxJQuery中的写法<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><script> $.ajax({ type:'get', url:'data.json', success:function (data) { console.log(data);原创 2020-12-15 21:06:31 · 145 阅读 · 0 评论 -
promise请求数据实战
function getJSON(url){ return new Promise((resolve,reject)=>{ const request = new XMLHttpRequest(); request.open("GET",url); request.onload = function(){ try...原创 2019-11-04 14:56:29 · 614 阅读 · 0 评论 -
解决复制word导致格式杂乱的问题——wangeditor
解决复制word内容导致格式杂乱的问题网上有很多关于wangeditor编辑框解决word内容格式的问题,基本都是通过自定义的一个粘贴过滤字符串,通过正则滤过一些xml,class,span,空格等字符串editor.customConfig.pasteTextHandle = function (content) { var html = content; html = ht...原创 2019-10-24 09:00:42 · 3685 阅读 · 0 评论 -
JavaScript——闭包和作用域
JavaScript——闭包和作用域理解闭包1,什么是闭包?闭包的概念网上一搜一大把,但是我这还是得说说。概念:闭包允许函数访问并操作函数外部的变量。只要变量或函数存在于声明函数时的作用域内,闭包即可使函数能够访问这些变量。2,实例这样的写法或许我们已经写过上百次了,但是并没有意识到我们正在写闭包,那是因为value变量和valueF()函数是在全局作用域下声明的,这个作用域一直存...原创 2019-10-23 19:59:24 · 251 阅读 · 0 评论