- 博客(21)
- 收藏
- 关注
RSS订阅原创 避免重复定义回调函数
在 React 函数组件中，每一次 UI 的变化，都是通过重新执行整个函数来完成的。我们知道，当事件处理函数定义在函数组件内部时，在多次渲染之间，是无法重用事件处理函数的，而是每次都需要创建一个新的回调函数。
2022-05-08 23:28:05
584
原创 浅谈迭代器和生成器
本文主要讲解迭代器协议以及js中的迭代器规则，从迭代器出发引出生成器，包括生成器的协程机制，生成器使用规则等，最后阐述async...await语法糖的实现原理。
2022-04-11 23:31:19
498
原创 浅谈http
文章目录关于规范与本质关于规范与本质规范我认为是官方制定的标准，我们需要去遵守，而本质是让我们更容易去认识新事物。当浏览器点击发送请求时，我们会觉得很神奇，甚至有的朋友十分抵触浏览器这个黑盒，一度认为http既熟悉又陌生，我们敬畏知识，但是我们也可以从别的方面去认识它。从本质来看，我们可以理解http无非就是一串字符串，服务器接收到这个东西时也是字符串。我们通过简单的node服务器打印便可知道。提示：以下是本篇文章正文内容，下面案例可供参考...
2022-04-09 22:30:39
2435
原创 vue2最佳实践
vue2最佳实践为列表渲染设置属性key在v-if/v-if-else/v-else中使用key关于路由切换组件不变的解决方案路由导航守卫beforeRouteUpdate观察$route对象的变化为router-view组件添加属性key为所有的路由统一添加query使用全局守卫beforeEach使用函数劫持区分Vuex与props的使用边界避免v-if和v-for一起使用为组件样式设置作用域避免在scoped中使用元素选择器避免隐性的父子组件通信最佳实践主要来源于《深入浅出vue》一书为列表渲染
2022-03-20 21:50:57
714
原创 浅谈vue3的Reactivity API和Composition API
文章目录Reactivity API响应式数据reactiverefcomputed判断数据转换数据小结监听数据watchEffectwatch小结Composition APIsetup生命周期小结总结Reactivity API响应式数据vue3的响应式系统是脱离组件的，下面的代码可在js文件中直接执行。reactivereactive可以使数据变成响应式。import {reactive} from 'vue'//本质上,下面的代码等于new Poxy({ count: 0 })co
2022-03-19 21:19:23
1076
原创 vue2风格规范
vue2风格规范前言单组件如何命名单文件组件的文件名的大小写基础组件名单例组件名紧密耦合的组件名组件名中的单词顺序完整单词的组件名组件名为多个单词模板中的组件名大小写JS/JSX中的组件名大小写自闭合组件prop名的大小写多个特性的元素模板中简单的表达式简单的计算属性指令缩写良好的代码顺序组件/实例的选项顺序元素特性的顺序单文件组件顶级元素的顺序前言项目开发，以个人愚见，应从规范入手，遵从社区规范，学习前辈们经验总结的最佳实践，这于个人于团队都是有利的。编程除了有些是靠思维，我认为大多数还是靠记忆的
2022-03-18 16:56:21
1404
原创 vue3相比vue2有哪些变化？
vue3相比vue2有哪些变化？API和数据响应式的变化去除构造函数组件实例中的API响应式的变化生命周期Vue3新增模板中的变化v-model与.sync修饰符v-for和v-ifkeyFragment组件的变化异步组件可自行更改组件结构API和数据响应式的变化去除构造函数在vue2中，当一个页面需要多个vue应用时，在需要插件的场景下，会导致多个应用都挂载了相同的插件，因为插件的注册是在new vue之前，即挂载在vue的原型上。Vue.use(XXX)Vue.mixin(XXX)new
2022-03-17 14:34:13
1254
原创 vue3相比vue2效率提升在哪些方面？
vue3相比vue2效率提升在哪些方面？静态提升静态提升相比vue2，vue3对以下静态节点进行提升：元素节点没有绑定的动态内容//vue2的静态节点render(h){ //直接render h('h1',null,'this is h1')}//vue3的静态节点const hoisted = createdVNode('h1',null,'this is h1')render(){ //直接使用被提升的静态节点}通过打开vue3工程，可以看到起运行代码中包含着h
2022-03-16 14:48:20
2264
原创 webpack之常见性能优化
webpack之常见性能优化构建性能传输性能运行性能关于webpack常见的性能优化，可从以下三方面做处理。构建性能，当构建性能越高，开发效率越高。传输性能，在这方面重点考虑网络中总的传输量，以及文件数量等。运行性能，主要是指js在客户端的运行效率。构建性能传输性能运行性能...
2022-03-15 18:06:50
11106
1
原创 反射与代理
代理与反射属性描述符Object.definePropertyObject.defineProperties反射属性描述符Object.defineProperty属性描述符一般是指Object.defineProperty，通过该方法可以对对象的属性进行描述操作。同时这个属性也是vue2响应式系统的关键。具体用法如下： var obj = { a:1, } Object.defineProperty(obj, 'a', { value: 2,//值赋值成2
2022-03-12 21:18:27
1828
原创 手写react路由之path-to-regexp
文章目录一、path-to-regexp是什么？1.第一个参数（必填）：匹配规则2.第二个参数（可选），包含匹配路径关键字的数组3.第三个参数（可选），配置对象总结一、path-to-regexp是什么？路由的匹配需要对路径进行正则匹配，而path-to-regexp这个库则提供了匹配的方法。1.第一个参数（必填）：匹配规则先看看库的使用import {pathToRegexp} from "path-to-regexp"const result = pathToRegexp("api/bl
2021-05-16 16:38:31
2074
原创 react里的context
文章目录一、什么是上下文（context）？二、旧版本的上下文上下文的创建上下文的使用二、新版本的上下文总结一、什么是上下文（context）？上下文，当一个组件创建了上下文后，其后代组件都可以使用该上下文中的数据。在之前的学习中，我们知道react的数据要么来源于自身的状态，要么来源于父级传过来的props。有了上下文之后，组件多了一个数据来源，那就是context上下文。react16版本前的的上下文和16版本之后的上下文是不一样的。二、旧版本的上下文旧版本的react认为只有类才有状态
2021-05-01 23:38:13
1177
原创 关于setState的那点事
文章目录一、setState执行初探事件里的setState定时器里的setState二、setState的使用setState的第二个参数（callback）关于多个setState的执行setState第一个参数（函数写法）三、浅谈setState源码总结一、setState执行初探事件里的setState请说出以下代码按钮点击之后输出的值：import React, { Component } from 'react'export default class App extends Co
2021-04-28 23:18:28
590
3
原创 浅谈浏览器中的进程
文章目录前言一、线程与进程二、单进程浏览器三、多进程浏览器四、面向服务架构总结前言提示：博主学浅，文章仅作学习记录和总结分享，如果有不足的地方欢迎指正。一、线程与进程二、单进程浏览器三、多进程浏览器四、面向服务架构总结...
2021-04-27 14:06:00
746
1
原创 浅谈react组件实例三大属性
文章目录一、state 1.state的初始化 2.state的改变二、props 1.类组件里的props 2.函数组件里的props三、refs 1. 字符串形式的ref(这种方式已经过时了) 2. 对象形式的ref 3. 函数形式的ref总结一、state 1.state的初始化状态(state)，本质上是类组件的一个属性，是一个对象，状态是由组件自行维护，状态需要初始化，组件有权改变状态里的数据。初始化的方式有两种：1.写在constructor里：import React, { Co
2021-04-22 23:20:45
578
原创 react之新旧生命周期
React生命周期前言一、旧版生命周期二、新版生命周期总结前言生命周期仅存在于类组件中。旧版生命周期：react版本 < 16.0.0旧版生命周期：react版本 >= 16.0.0提示：以下是本篇文章正文内容，下面案例可供参考一、旧版生命周期如图：二、新版生命周期图为16.3的生命周期：图为16.3之后的生命周期，相比之前的新版，主要是getDerivedStateFromProps的调整：新版常用的钩子函数：总结提示：这里对文章进行总结：例如：以上就是今
2021-04-15 23:47:40
358
原创 常见跨域解决方案
跨域总结前言一、跨域简介二、跨域解决方案1.JSONP2.CORS3.Node中间件代理4.Nginx反向代理5.window.name+iframe6.location.hash+iframe7.document.domain+iframe8.postMessage跨域9.WebSocket协议跨域总结前言上期我们讲到CORS，这里就不讲解了，需要明确的是CORS是作为目前跨域http请求的根本解决方案。本章仅对跨域方案做总结，如有遗漏或不对的地方请指正哈一、跨域简介跨域是指由于浏览器
2021-04-10 16:52:54
349
1
原创 浅谈跨域之CORS
CORS简介CORS是全称是Cross-Origin Resource Sharing（跨域资源共享），是基于http1.1的一种跨域解决方案。值得注意的是，CORS对不同请求模式有不同的处理规范，我们将之分成简单请求、需要预检的请求、携带身份凭证的请求。简单请求问题：如何定义一个简单请求？请求方法仅限于get、post、head；请求头仅包含安全的字段，常见的安全字段大概是Accept、Accept-Language、Content-Language、Content-Type、DPR、Down
2021-03-28 11:19:31
1439
4
原创 浅谈前端两种盒模型
盒模型讲解先说说一个盒子的结构：由content+padding+border+margin组成先说说标准盒模型的宽高怎么计算：元素宽度 = borderLeft + paddingLeft + width + paddingRight + borderRight元素高度=borderTop+paddingTop+height+paddingBottom+borderBottom这里说到的元素宽度和高度，指的是实际占据的宽高，而且在标准模式盒模型下，我们设置的 width 和 height 指的
2021-02-25 21:17:56
391
3
原创 如何在Linux上部署你的项目
前言楼主是一只前端小菜鸟，因为需要部署自己的项目，所以后端接口是基于NodeJs的，部署过程仅供参考。Linux常用指令复习：ls：展示当前文件夹中的内容pwd：展示当前文件夹路径cd / ：返回根目录mkdir 目录名：创建目录touch 文件名：创建文件echo "内容" >> 当前目录下的文件名：往文件输入内容查看文件内容：cat 文件名vim 文件名：编辑文件exit：退出移动文件到指定路径：mv 文件名 路径名解压压缩包：unzip 压缩包删除文件或目录：
2021-02-23 21:59:14
875
4
原创 如何使用git上传本地仓库文件到github上，实现静态网页的访问
声明：博主本人比较笨，如有错误请指正。首先你需要去官网下载git：git官网在官网的右下角，直接点击download就行，下载之后直接点下一步下一步安装就好了，这里不做解释。而且前提你要有注册一个github账号。重点来了：先在github创建一个分支。点击这个New按钮，创建新的分支。Repository name：“分支名称”。Description：“分支描述”。下面的选项为是否开源：记得把initialize this repository with a README √ 上，这
2020-06-02 18:21:40
1248
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人