qq_42753705的博客

防抖 (debounce)防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。想要了解一个概念，必先了解概念所应用的场景。在 js 这个世界中，有哪些防抖的场景呢登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖文本编辑器实时保存，当无任何更改操作一秒后进行保存代码如下：防抖重在清零 clearTimeout(timer)function d

实际项目中遇到的问题const data = await queryLiveMsgList({ lastMsgId: this.liveMessage.length > 0 ? this.liveMessage[this.liveMessage.length - 1].id : 0, lastMsgTime: this.liveMessage.length > 0 ? new D

v-model指令的原理是什么？v-bind绑定一个value属性v-on监听当前元素的input事件，当数据变化时，将值传递给value实时更新数据v-model和v-bind:value有什么区别？自定义组件中，必定会使用v-bind指令来实现组件之间值的传递，所以在我还是菜鸟的那段时间，我一直有个疑惑， 既然有的v-bind指令，为什么还需要在自定义的组件中实现v-model指令呢？在我实践了一番之后，我才明白， v-model既能够实现值的传递，也能够实现页面数据的实时变化，而v-bin

心血来潮，想要手写实现一个类似pubsub-js或者vue中央事件总线的发布订阅的小类库代码如下：新建一个文件 JasonMa_PubSub.jsconst JasonMa_PubSub = { //存储事件及方法 listenStore: {}, //订阅/监听 on: function(method, cb) { //如果已监听过这个方法，就push这个回调函数；如果没监听就创建键值对，值为一个数组用于存储当前回调函数 if (this.listenStore[

js深拷贝的三种实现方式1. 使用递归的方式实现深拷贝 //使用递归的方式实现数组、对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空，并且是对象或者是 if (obj && typeof obj === "obj

直接上代码，总共测试了下面这些情况（看注释）<template> <h2>当前求和为：{{ sum }}</h2> <button @click="sum++">点我+1</button> <hr /> <h2>当前的信息为：{{ msg }}</h2> <button @click="msg += '！'">修改信息</button> <hr />

vue2.x的响应式实现原理：对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。Object.defineProperty(data, 'count', { get () {}, set () {}})存在问题：新增属性、删除属性, 界面不会更新。直接通过下标修改数组, 界面不会自动更新。Vue3.0的响应式

react-router-dom 编程式路由导航 (v5)1.push跳转+携带params参数 props.history.push(`/b/child1/${id}/${title}`);2.push跳转+携带search参数props.history.push(`/b/child1?id=${id}&title=${title}`);3.push跳转+携带state参数props.history.push(`/b/child1`, { id, title });4.repl

路由传值的三种方式（v5.x）params参数//路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link> //或 <Link to={{ pathname:'/demo/test/tom/18' }}>详情</Link>//注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/> //接收参数：this.

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。命令式地获取及操作DOM：function TextInputWithFocusButton() {  // 通过useRef创建并获取Dom元素  const inputEl = useRef(null);      const onButtonClick = () =&

1.复制微信开发者工具启动路径 ："C:\Program Files (x86)\Tencent\微信web开发者工具\微信web开发者工具.exe" 不要后面的 “微信web开发者工具.exe”；2.在HBuilderX中，工具-》设置，打开下图3.微信开发者工具的配置：回到HBuilderX上，点击工具栏的运行，选择小程序上启动，既可！兄弟姐妹们，点波关注吧，一起分享有趣的技术！掘金： https://juejin.cn/user/3034307824456296/posts 全部

分享大家一个CDN网站：https://www.bootcdn.cn/eruda 移动端网页调试工具的使用: <script src="https://cdn.bootcdn.net/ajax/libs/eruda/1.6.0/eruda.js"></script> <script>eruda.init();</script>效果如下，点击小按钮即可vConsole 移动端网页调试工具的使用: <script src="htt.

原理通过不同移动端的ua弹窗 获取user-agent 参数包含的信息，进行判断浏览器类型在Android上QQ内置环境的ua中有关键字 MQQBrowser， 并且后面包含一个【空白符+QQ】字符；QQ浏览器仅有【MQQBrowser】因此在Android上区分，需要用正则判断ua中包含MQQBrowser，并且剔除【MQQBrowser】之后包含【空白符+QQ】，则是QQ内置浏览器，QQ浏览器：ua中包含MQQBrowser但是不包含QQ在ios上QQ内置浏览器： ua包含一个空格

创建react项目create-react-app mobx-demo cd my-app npm run start使用react-app-rewirednpm install customize-cra react-app-rewired @babel/plugin-proposal-decorators --save在你的根目录即 和src同级的地方新建js文件 config-overrides.js 粘贴下方代码:const{override,addDecoratorsLegacy

首先安装：yarn add mobx mobx-react 或 npm i mobx mobx-react --save-dev一、创建mobx仓库使用@observable装饰器import { makeObservable, observable, action, computed } from "mobx";/** 方式1： 使用@observable装饰器 */class A { //声明状态 @observable list = [ { id: 1, .

（原创）深入解读s React 中的useState Hook 修改了值，但是不重新渲染，不刷新的问题

安装依赖npm i react-router-dom引入实现路由所需的组件，以及页面组件import { BrowserRouter, Routes, Route } from 'react-router-dom';import Foo from './Foo';import Bar from './Bar';​function App(){ return ( <BrowserRouter> <Routes> .

微信小程序项目使用npm安装vant-weapp的正确步骤1、在当前小程序项目目录npm init -y 构建npm项目2、运行命令 npm install vant-weapp -S --production安装完 发现在当前小程序目录下新增node_modules目录 下面有了vant-weapp组件文件夹 如下图：3、详情里面：选中使用npm模块4、进入微信开发工具：选择 工具 -> 构建npm5、下面以引入button组件到某页面为例子：在此页面的.json中配置