- 博客(499)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 使用微任务来实现缓冲队列
Javascript的所有的任务分为两种:在主线程上排队执⾏的任务，只有前⼀个任务执⾏完毕，才能执⾏后⼀个任务同步任务>微任务>宏任务以上内容参考:js中的同步和异步，宏任务和微任务，async和await - 百度文库我们可以明确知道 微任务的执行是低于同步任务的，有了这个概念后，对后面的内容理解就更加容易了。现在value变化一次时候，就会马上更新一下dom上面的doSomeThing函数的执行，是处于主线程中的，也是同步任务，是堵塞的，也是马上执行的。所以我们得把目光放到异步任务上
2022-06-11 19:13:14
352
2
原创 避免异步任务竞态更新-已过期的不再允许更新
这个概念在前端里面其实比较少听到，但是其实我们是有遇见过的，并且很常见。只是翻遍了前端书籍都很难到对这个概念的解释。有幸读到霍春阳的《vue.js设计于实现》，真的是三生有幸有代码①如下:let res=null;function async update(){res=await Api.get(“someThing”);return res;}var A=update();// 假设返回结果为avar B=update();//假设放回结果为b假设受到网络波动的..
2022-05-14 13:23:05
386
原创 react Dva.js框架分享
Dva.js出现的原因:React React 专注解决视图层问题，UI = f(data)只提供简单的setState手动更新 数据来触发视图更新，对多组件通讯或需要全局状态管理的支持不够健全，也缺乏computed这种生成组合变量的功能以及对某个组件变量的watchDva就是对react状态管理方面进行拓展依赖:redux提供功能:1.状态管理2.异步加载3.提供集成环境应用层面的语法:es6 Generator它简化了 redux 的使用，并且.
2021-11-14 06:34:50
1848
原创 wap 横屏适配和竖屏适配的通用方案
这个话题应该能聊的东西挺多的，从16年做手机端开始就研究，也写了两篇博客来记录过（但是受限于但是的经验和认知，现在看起来不是特别清晰）。为什么今天会继续这个话题呢，在做了reactnative和之前小游戏横屏页面后，我觉得有必要总结一下。本篇博客，最终针对wap横屏和竖屏给出两个通用的适配方案，rn上面可能实现方式和web的不大一样，但是思路逻辑是一样的。从生产流程来考虑，适配这个东西，产品经理和设计都是需要考虑的，相对传统pc设计，移动端能展示的区域比较小。这个就要求设计出来的产品（.
2021-03-18 20:07:00
1813
2
原创 react-native 表单校验库 react-native-validator
npm i react-native-validator说明这是一个类似jQuery.validator的表单校验工具点击查看demo提供两种常用的校验方式（1.点击校验所有表单元素通过就提交，2.在输入表单过程中自动验证，如果所有表单验证通过按钮高亮可点击提交）你可以覆盖所有样式支持动态表单校验(包括数组和对象)目前校验规则是写在elFormItem里面的，暂时不考虑在elForm上加MP4演示需要科学上网，你也可以下载仓库里面的video.mp4如果你npm下载后使用报错，建议拷贝包
2020-06-18 00:58:25
2221
原创 vue指令以及dom操作
“AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。”这是我最初接触“指令”这个词。还记得那时候，ng大行其道的时候，我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题。后来随着前端工作的深入，我用了jq的data-attr并且学会了jq的插件使用。但，这这并不能让我把它“指令...
2017-02-19 15:13:35
16345
原创 element plus el-date-picker type=“datetime“ 限制年月日 时分秒选择
是不是小时就是disabled-hours,依此类推其他就是disabled-minutes。上面的时间组件很明显和el-time-picker一样，我是这样猜到的，那小时，分钟，秒呢？它提供的disabled-date给我们来限制日期选择。
2024-04-18 11:35:50
291
原创 根据2个坐标+运动速度，计算速度分量，实现小球方向运动
为正，球将向右移动；如果为负，球将向左移动。这个值的大小决定了球在X轴方向上移动的快慢。通过不断更新球的位置（例如，）在X轴和Y轴方向上的速度分量。这些分量是基于球的角度（代表了球在X轴方向上的移动速度。），你可以模拟球在水平方向上的移动。在给定的代码片段中，
2024-04-14 21:34:51
415
原创 XmlHttpRequest responseType: ‘stream‘ &&图片代理服务器
它是一个存在于原生对象中的属性。在 Web API 中，XMLHttpRequest对象用于发送 HTTP 或 HTTPS 请求到服务器，并接收响应。属性就是用来指定预期从服务器返回的响应数据的类型。
2024-03-13 10:06:29
669
原创 Object和Function是函数，函数都有一个prototype属性
在上面代码中，fun1、fun2、fun3 都是函数对象，obj1、obj2、obj3 都是普通对象。在 JavaScript 中，万物皆对象，你要一个吗？new Object() 啊！都有一个 prototype 属性，这个属性的指向被称为这个函数对象的。而 Object 和 Function 都是 JavaScript。当然，就好比同样为人，也区分普通人和天才。对象也是有分类的，分为。
2024-02-23 22:22:22
628
原创 Object.create和Object.setPrototypeOf区别
Object.create实现属性继承时候，重新为prototype属性赋值，同时删除原型对象的constructor属性所以需要从新更新原型对象的构造函数指向。
2024-02-23 10:44:55
207
原创 Object.create的作用，生成个对象？远远不止这些
是 JavaScript 中的一个方法，用于创建一个新对象，并使用现有的对象作为新创建的对象的__proto__（即原型）。换句话说，会执行与以下代码相同的操作：其中是一个函数，其原型属性包含了你想要新对象继承的属性。proto这里有一个使用的基本示例在这个例子中，person1对象是通过创建的，因此成为了person1的原型。这意味着person1可以访问上定义的所有属性和方法。之后，我们给person1添加了name和isHuman属性，并调用了原型上的方法。
2024-02-22 16:33:47
314
原创 __proto__和protype的区别
都是JavaScript中非常重要的概念，它们在原型链和继承中发挥着关键作用。理解它们的区别和用途对于掌握JavaScript中的对象模型和继承机制至关重要。是JavaScript中两个重要的概念，它们在对象原型链和继承中起着关键作用。
2024-02-22 09:09:22
420
原创 election 28.1.4 踩坑
这是浏览器加载和解析本地javascript时候需要一点点时间，index.html是已经读取了的，如果怀疑的话可以试下在index.html文件里面加点背景颜色，可以看到会先出现背景颜色，稍后才后内容。如果和Mac一样一个命令行，在 build的target里面配置两个arch，他会把支持两个bit的包都打到一个文件，mac却是不会。到打包后的目录，找到app.asa文件，在该目录打开终端，执行下面命令，在aaa目录下就能找到反编译后的内容。（效果一般，第一次点击图标后，好久才会出现窗口）
2024-02-17 09:43:40
886
原创 javascript 常见的继承方式
继承是基于“类”的，在没有es6前，一的函数就充当了“类”的，构造函数的prototype上面的属性就等于实例的共享属性。
2024-01-17 21:57:24
469
原创 react setState调用为什么会触发整个组件函数的重新运行
这里的index申明是否可以省略呢，其实也可以，但是这样就得手动给App函数添加index属性，Function是Object的实现，所以它也可以有自己的属性。上面代码里面的index每次调用的时候都会递增，那setState调用时候会触发App的调用那index不是还是会继续递增么？setAge执行会导致App函数重新执行，但是age还是保存之前的结果！然后setState的执行会触发执行它的函数的重新运行，这个怎么写呢？这样无法做到index和我们useState的调用顺序保持一致！
2024-01-07 10:59:43
477
转载 Husky 格式化代码和校验 Commit 信息
Husky 是一个很有用的工具，能够利用 Git hook 在本地 Commit 时，配合 eslint 等 Linter 工具做文件的格式化，并配合Commitlint 校验 commit 信息格式，是工程化统一代码风格的一大利器。
2024-01-05 21:53:18
43
原创 webpack 5 mode的作用和区别
通过选择production或none之中的一个，来设置mode参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为production。会将中的值设置为. 为模块和 chunk 启用有效的名。例如js文件里面打印。
2024-01-02 15:59:18
769
原创 useConsole的封装,vue,react，htmlscript标签，通用
之前用了接近hack的方式实现了console的封装，目标是获取console.log函数的执行（所在位置）所在的代码行数。例如以下代码，执行window.mylog(1)时候，console.log实际是在匿名的箭头函数()=>{//这里执行的}如果代码改为以下，因为log返回的是conosle.log本身，并且它并没有在函数内执行，也就是函数。
2023-12-19 10:08:17
721
转载 vue node_modules\node-sass: Command failed. 安装失败，如何解决，使用 sass 替换
在使用 vue create appName 创建 vue 项目，手动配置项目框架内容时，可以手动选择 sass/scss 的插件，之前我都是默认选 node-sass ，现在我只用 sass，让这个编译给烦透了。scss 的具体使用方法，可以参见： https://kylebing.blog.csdn.net/article/details/89738636。node-sass 的主要功能是将 sass/scss -> css ，跟 sass 的作用是一样的， sass 是 dart 语言写的，
2023-12-12 06:11:07
423
原创 es6字符串模板之标签化模板
我们经常搞前端开发工作的都会用到。它可以保留字符串换行格式，还能接受变量。这个给前端的字符串拼接带来了非常大的方便。但是还有一种用法可能是我们平时还是没有怎么用到的。
2023-11-26 23:07:30
1349
原创 react-hook-form。 useFieldArray Controller 必填，报错自动获取较多疑问记录
动态多个数据Controller包裹时候，原生html标签input可以add时候自动获取焦点，聚焦到最近不符合要求的元素上面。
2023-10-31 02:47:37
578
原创 使用patch-package保存node_modules包修改
遇到情况，第三方包存在bug或者缺少文件时候，我们手动修改了某个包时候，下次npm安装时候会导致原来的修改呗覆盖。
2023-09-16 17:50:45
382
转载 eslint vscsode自动化格式化配置
pretter没有对代码的质量进行检查的能力，只关注格式化，并不具有eslint检查语法等能力，其只会对代码风格按照指定的规范进行统一，避免一个项目中出现多种不同的代码风格。ESlint插件默认只提供代码风格检测功能，不能开启代码格式化功能，我们需要配置打开该功能，方便我们在开发时帮助我们格式化代码。也可以进行代码格式化，但是运行项目时错误会造成项目跑不起来，如果只想红色波浪线提示错误，可以在。进入设置界面，可以在搜索框中搜索要配置的文件进行勾选，但是只有基本配置项。安装插件ESlint，打开扩展，搜索。
2023-09-09 10:38:12
702
原创 React refers to UMD global, but the current file is a module vite初始化react项目
【代码】React refers to UMD global, but the current file is a module。
2023-09-09 10:33:21
867
原创 css flex:1；详解，配合demo效果解答
给设置了display：flex的子组件设置了flex：1；就能让他填满整个容器，如果有多个就平均flex：1；是另外三个样式属性的简写，等同我们就针对上面3个属性结合代码来进行讲解。
2023-09-07 11:45:16
2729
原创 22行 手写实现promise
手写promise，面试了一个面试题，promise的标准是非常的复杂的，但是这里我们不探讨具体promise的实现，只正对上面的代码分析下面用1⃣️2⃣️3⃣️4⃣️来标注下四个函数。
2023-09-06 16:54:43
101
原创 console.log封装，显示调用的位置
一般我们都哦说直接调用console.log，但是有时候console.log太多了，非常影响效率，我们想统一开启console.log（不是生产环境移除console.log）但是控制面板哪里定位到的位置不是调用window.mylog的代码的地方，这给我们带来了非常大的麻烦，不方便调试。可以拿到代码报错的栈，用\n分割，分别展示代码允许的函数位置锚点，可以通过锚点直接定位到代码位置,每次console.log都新建个new Error对象，这个也会有新的内存开销,为什么会这样呢，我也不造也～～
2023-09-01 10:59:57
337
转载 GIT 遴选操作
其中C，D，E三次提交的commit-id可以在develop分支下通过git log查看。链接：https://www.jianshu.com/p/fa5e47f6c917。
2023-08-01 10:26:32
384
原创 Vue3 让localstorage变响应式
原生的window.localStorage.setItem肯定无法实现数据响应式所以需要从写改函数。通过window.localStorage.setItem可以更改本地存储是，还可以更新aa的值。通过aa.value++;既可以更改js的数据修改试图，还有更新本地存储。，需用用到watch来监听数据的变化。此外，还需要对默认参数进行判断，支持数组，对象，和普通类型数据。在组件销毁前也需要移除依赖收集。对于上面2个需求的代码实现都。区分对象类型和普通类型。
2023-08-01 00:33:28
649
转载 谈谈干前端四年的几点感受
是计算机网络，是计算机组成原理，是数据结构与网络，是操作系统，是信息安全，是项目管理，是软件测试。我们常说，人要和自己比，不要和别人比，人别人，气死人。这时候，小兵心态就出现了，拿多少钱多少活，我就拿这点工资，整这么多活，我无法承担，只能摆烂了。如果这件事情，对你有成长，有帮助，比如做一些工程化，脚手架，性能优化的工作，肯定得先干出成果。是网络请求，是nginx，是性能优化，是前端工程化，是脚手架，是对UI的基本审美。技术说到底是工具，工具最重要的使用，不是本身，而且只要是工具，便都有替代品，
2023-07-23 21:16:25
98
原创 js 在浏览器窗口关闭后还可以不中断网络请求
有个需求，我们需要在用户发送数据过程中，如果用户关闭了网页(包括整个浏览器关闭)，不要中断数据传递为了测试效果我们用nodejs写了个http服务器代码 文件名为httpServer.js如下，执行node httpServer.js就可以跑起来，支持get，post携带数据。
2023-07-23 20:52:58
846
原创 Js迭代器协议和可迭代对象协议
如果迭代器已将序列迭代完毕，则为 true。这种情况下，value 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。其中Symbol.iterator 是一个函数，返回一个迭代器（上面说到）,但是next函数没有对外暴露，所以。如果迭代器可以产生序列中的下一个值，则为 false。是个对象，他本身可迭代，而不是给其他对象提供迭代功能，协议也和上面的不一样。上的某个对象）必须有一个键为 @@iterator 的属性，可通过常量。// 针对数组创建一个迭代器（数组本身自带迭代器,这里只是用来举例）
2023-07-21 19:11:23
107
cors，谷歌插件，破除下载图片空白
2023-07-10
程序员的数学，程序员的数学 3线性代数
2018-08-02
jqZoom放大镜,淘宝放大镜，jqZoom.js
2015-07-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人