- 博客(497)
- 资源 (8)
- 收藏
- 关注
原创 使用微任务来实现缓冲队列
Javascript的所有的任务分为两种:在主线程上排队执⾏的任务,只有前⼀个任务执⾏完毕,才能执⾏后⼀个任务同步任务>微任务>宏任务以上内容参考:js中的同步和异步,宏任务和微任务,async和await - 百度文库我们可以明确知道 微任务的执行是低于同步任务的,有了这个概念后,对后面的内容理解就更加容易了。现在value变化一次时候,就会马上更新一下dom上面的doSomeThing函数的执行,是处于主线程中的,也是同步任务,是堵塞的,也是马上执行的。所以我们得把目光放到异步任务上
2022-06-11 19:13:14 346 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 374
原创 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 1826
原创 wap 横屏适配和竖屏适配的通用方案
这个话题应该能聊的东西挺多的,从16年做手机端开始就研究,也写了两篇博客来记录过(但是受限于但是的经验和认知,现在看起来不是特别清晰)。为什么今天会继续这个话题呢,在做了reactnative和之前小游戏横屏页面后,我觉得有必要总结一下。本篇博客,最终针对wap横屏和竖屏给出两个通用的适配方案,rn上面可能实现方式和web的不大一样,但是思路逻辑是一样的。从生产流程来考虑,适配这个东西,产品经理和设计都是需要考虑的,相对传统pc设计,移动端能展示的区域比较小。这个就要求设计出来的产品(.
2021-03-18 20:07:00 1766 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 2203
原创 vue指令以及dom操作
“AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。”这是我最初接触“指令”这个词。还记得那时候,ng大行其道的时候,我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题。后来随着前端工作的深入,我用了jq的data-attr并且学会了jq的插件使用。但,这这并不能让我把它“指令...
2017-02-19 15:13:35 16331
原创 XmlHttpRequest responseType: ‘stream‘ &&图片代理服务器
它是一个存在于原生对象中的属性。在 Web API 中,XMLHttpRequest对象用于发送 HTTP 或 HTTPS 请求到服务器,并接收响应。属性就是用来指定预期从服务器返回的响应数据的类型。
2024-03-13 10:06:29 589
原创 Object和Function是函数,函数都有一个prototype属性
在上面代码中,fun1、fun2、fun3 都是函数对象,obj1、obj2、obj3 都是普通对象。在 JavaScript 中,万物皆对象,你要一个吗?new Object() 啊!都有一个 prototype 属性,这个属性的指向被称为这个函数对象的。而 Object 和 Function 都是 JavaScript。当然,就好比同样为人,也区分普通人和天才。对象也是有分类的,分为。
2024-02-23 22:22:22 622
原创 Object.create和Object.setPrototypeOf区别
Object.create实现属性继承时候,重新为prototype属性赋值,同时删除原型对象的constructor属性所以需要从新更新原型对象的构造函数指向。
2024-02-23 10:44:55 195
原创 Object.create的作用,生成个对象?远远不止这些
是 JavaScript 中的一个方法,用于创建一个新对象,并使用现有的对象作为新创建的对象的__proto__(即原型)。换句话说,会执行与以下代码相同的操作:其中是一个函数,其原型属性包含了你想要新对象继承的属性。proto这里有一个使用的基本示例在这个例子中,person1对象是通过创建的,因此成为了person1的原型。这意味着person1可以访问上定义的所有属性和方法。之后,我们给person1添加了name和isHuman属性,并调用了原型上的方法。
2024-02-22 16:33:47 290
原创 __proto__和protype的区别
都是JavaScript中非常重要的概念,它们在原型链和继承中发挥着关键作用。理解它们的区别和用途对于掌握JavaScript中的对象模型和继承机制至关重要。是JavaScript中两个重要的概念,它们在对象原型链和继承中起着关键作用。
2024-02-22 09:09:22 405
原创 election 28.1.4 踩坑
这是浏览器加载和解析本地javascript时候需要一点点时间,index.html是已经读取了的,如果怀疑的话可以试下在index.html文件里面加点背景颜色,可以看到会先出现背景颜色,稍后才后内容。如果和Mac一样一个命令行,在 build的target里面配置两个arch,他会把支持两个bit的包都打到一个文件,mac却是不会。到打包后的目录,找到app.asa文件,在该目录打开终端,执行下面命令,在aaa目录下就能找到反编译后的内容。(效果一般,第一次点击图标后,好久才会出现窗口)
2024-02-17 09:43:40 854
原创 javascript 常见的继承方式
继承是基于“类”的,在没有es6前,一的函数就充当了“类”的,构造函数的prototype上面的属性就等于实例的共享属性。
2024-01-17 21:57:24 451
原创 react setState调用为什么会触发整个组件函数的重新运行
这里的index申明是否可以省略呢,其实也可以,但是这样就得手动给App函数添加index属性,Function是Object的实现,所以它也可以有自己的属性。上面代码里面的index每次调用的时候都会递增,那setState调用时候会触发App的调用那index不是还是会继续递增么?setAge执行会导致App函数重新执行,但是age还是保存之前的结果!然后setState的执行会触发执行它的函数的重新运行,这个怎么写呢?这样无法做到index和我们useState的调用顺序保持一致!
2024-01-07 10:59:43 439
转载 Husky 格式化代码和校验 Commit 信息
Husky 是一个很有用的工具,能够利用 Git hook 在本地 Commit 时,配合 eslint 等 Linter 工具做文件的格式化,并配合Commitlint 校验 commit 信息格式,是工程化统一代码风格的一大利器。
2024-01-05 21:53:18 31
原创 webpack 5 mode的作用和区别
通过选择production或none之中的一个,来设置mode参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为production。会将中的值设置为. 为模块和 chunk 启用有效的名。例如js文件里面打印。
2024-01-02 15:59:18 744
原创 useConsole的封装,vue,react,htmlscript标签,通用
之前用了接近hack的方式实现了console的封装,目标是获取console.log函数的执行(所在位置)所在的代码行数。例如以下代码,执行window.mylog(1)时候,console.log实际是在匿名的箭头函数()=>{//这里执行的}如果代码改为以下,因为log返回的是conosle.log本身,并且它并没有在函数内执行,也就是函数。
2023-12-19 10:08:17 711
转载 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 289
原创 es6字符串模板之标签化模板
我们经常搞前端开发工作的都会用到。它可以保留字符串换行格式,还能接受变量。这个给前端的字符串拼接带来了非常大的方便。但是还有一种用法可能是我们平时还是没有怎么用到的。
2023-11-26 23:07:30 1313
原创 react-hook-form。 useFieldArray Controller 必填,报错自动获取较多疑问记录
动态多个数据Controller包裹时候,原生html标签input可以add时候自动获取焦点,聚焦到最近不符合要求的元素上面。
2023-10-31 02:47:37 531
原创 使用patch-package保存node_modules包修改
遇到情况,第三方包存在bug或者缺少文件时候,我们手动修改了某个包时候,下次npm安装时候会导致原来的修改呗覆盖。
2023-09-16 17:50:45 371
转载 eslint vscsode自动化格式化配置
pretter没有对代码的质量进行检查的能力,只关注格式化,并不具有eslint检查语法等能力,其只会对代码风格按照指定的规范进行统一,避免一个项目中出现多种不同的代码风格。ESlint插件默认只提供代码风格检测功能,不能开启代码格式化功能,我们需要配置打开该功能,方便我们在开发时帮助我们格式化代码。也可以进行代码格式化,但是运行项目时错误会造成项目跑不起来,如果只想红色波浪线提示错误,可以在。进入设置界面,可以在搜索框中搜索要配置的文件进行勾选,但是只有基本配置项。安装插件ESlint,打开扩展,搜索。
2023-09-09 10:38:12 640
原创 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 851
原创 css flex:1;详解,配合demo效果解答
给设置了display:flex的子组件设置了flex:1;就能让他填满整个容器,如果有多个就平均flex:1;是另外三个样式属性的简写,等同我们就针对上面3个属性结合代码来进行讲解。
2023-09-07 11:45:16 2141
原创 22行 手写实现promise
手写promise,面试了一个面试题,promise的标准是非常的复杂的,但是这里我们不探讨具体promise的实现,只正对上面的代码分析下面用1⃣️2⃣️3⃣️4⃣️来标注下四个函数。
2023-09-06 16:54:43 98
原创 console.log封装,显示调用的位置
一般我们都哦说直接调用console.log,但是有时候console.log太多了,非常影响效率,我们想统一开启console.log(不是生产环境移除console.log)但是控制面板哪里定位到的位置不是调用window.mylog的代码的地方,这给我们带来了非常大的麻烦,不方便调试。可以拿到代码报错的栈,用\n分割,分别展示代码允许的函数位置锚点,可以通过锚点直接定位到代码位置,每次console.log都新建个new Error对象,这个也会有新的内存开销,为什么会这样呢,我也不造也~~
2023-09-01 10:59:57 277
转载 GIT 遴选操作
其中C,D,E三次提交的commit-id可以在develop分支下通过git log查看。链接:https://www.jianshu.com/p/fa5e47f6c917。
2023-08-01 10:26:32 348
原创 Vue3 让localstorage变响应式
原生的window.localStorage.setItem肯定无法实现数据响应式所以需要从写改函数。通过window.localStorage.setItem可以更改本地存储是,还可以更新aa的值。通过aa.value++;既可以更改js的数据修改试图,还有更新本地存储。,需用用到watch来监听数据的变化。此外,还需要对默认参数进行判断,支持数组,对象,和普通类型数据。在组件销毁前也需要移除依赖收集。对于上面2个需求的代码实现都。区分对象类型和普通类型。
2023-08-01 00:33:28 566
转载 谈谈干前端四年的几点感受
是计算机网络,是计算机组成原理,是数据结构与网络,是操作系统,是信息安全,是项目管理,是软件测试。我们常说,人要和自己比,不要和别人比,人别人,气死人。这时候,小兵心态就出现了,拿多少钱多少活,我就拿这点工资,整这么多活,我无法承担,只能摆烂了。如果这件事情,对你有成长,有帮助,比如做一些工程化,脚手架,性能优化的工作,肯定得先干出成果。是网络请求,是nginx,是性能优化,是前端工程化,是脚手架,是对UI的基本审美。技术说到底是工具,工具最重要的使用,不是本身,而且只要是工具,便都有替代品,
2023-07-23 21:16:25 92
原创 js 在浏览器窗口关闭后还可以不中断网络请求
有个需求,我们需要在用户发送数据过程中,如果用户关闭了网页(包括整个浏览器关闭),不要中断数据传递为了测试效果我们用nodejs写了个http服务器代码 文件名为httpServer.js如下,执行node httpServer.js就可以跑起来,支持get,post携带数据。
2023-07-23 20:52:58 745
原创 Js迭代器协议和可迭代对象协议
如果迭代器已将序列迭代完毕,则为 true。这种情况下,value 是可选的,如果它依然存在,即为迭代结束之后的默认返回值。其中Symbol.iterator 是一个函数,返回一个迭代器(上面说到),但是next函数没有对外暴露,所以。如果迭代器可以产生序列中的下一个值,则为 false。是个对象,他本身可迭代,而不是给其他对象提供迭代功能,协议也和上面的不一样。上的某个对象)必须有一个键为 @@iterator 的属性,可通过常量。// 针对数组创建一个迭代器(数组本身自带迭代器,这里只是用来举例)
2023-07-21 19:11:23 103
原创 浏览器通过js打开文件,新建文件,静默实时保存文件
这个api不支持在iframe中运行,所以下面的例子无法 新建,保存,打开新建文件后,可以直接保存文件,不需要再次下载文件,也只有第一次保存时候才会出现确认弹窗。
2023-07-07 15:40:28 550 2
原创 vue3+vite项⽬搭建-配置环境变量env
但是nodejs的配置文件无法使用import.meta.env.VITE_NODE_ENV,依旧需要使用cross-env的方式来配置_(¦3」∠)_,然后我的package.json脚本命令行就变成了这样了。在nodejs配置文件里面也用process.env.VITE_NODE_ENV == "production"然后在项目文件里面用process.env.VITE_NODE_ENV == "production",打包后就不行了,找不到这个process.env.VITE_NODE_ENV。
2023-07-04 15:10:36 789
cors,谷歌插件,破除下载图片空白
2023-07-10
程序员的数学,程序员的数学 3线性代数
2018-08-02
jqZoom放大镜,淘宝放大镜,jqZoom.js
2015-07-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人