
前端
文章平均质量分 71
前端
ZHgogogoha
这个作者很懒,什么都没留下…
展开
-
React 高质量博客学习笔记
React个人读过一些高质量的文章,并写了一些简要总结。react hook初学者必读:useEffect guide里面也引用了其他文章,都非常高质量,下面也会列出。总结:useEffect具有闭包的特性,虽然对新手不友好,但比class组件中莫名其妙被修改props更加可控可追踪。react-hooks-fetch-datauseReducer vs useState如果你的useState长这样:const [state, setState] = useState(原创 2021-10-11 09:47:18 · 311 阅读 · 0 评论 -
wsl+tmux+ohmyzsh+vscode 打造前端高效工作流
最强终端Windows Subsystem for Linux (WSL),具体百度,总的来说就是弥补了windows terminal太过于鸡肋的问题。为啥要写这篇文章电脑坏了,重装了系统,因此边装边记录使用WSL还是有很多坑的,比如更换主题、字体等等。还涉及到哪些黑科技tmuxohmyzshz插件等等alias经过作者将近一年的实践经验,最后将这些移植到vscode上,效率简直起飞!wsl的安装官方安装指南...原创 2021-06-18 13:56:24 · 3042 阅读 · 1 评论 -
一道Promise处理多个异步任务的面试题
端点笔试题感觉这家公司的有几道题质量挺高的,但是有个问题是…有几道题居然重复了,这…编程题按照顺序加载多个JS文件如a,b,c,d,并且按照顺序依次插入到页面中,等到所有的JS文件加载完再执行Y。考察:Promise理解,函数封装,onload事件处理。(当时憋尿憋坏了…用了一个Promise.all,不过这道题出的挺好的)当时的思路将所有任务包装成promise对象放入数组,然后传入Proimse.All().then;每个promise对象将script标签压入数组;promise.原创 2020-09-22 12:08:40 · 498 阅读 · 0 评论 -
vue中key的作用
vue中key的作用我发现好多博客都说得稀里糊涂,于是自己动手实践了一下,也对key中使用index作为索引带来的问题进行了探索。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。使用Key<div id="container"> <ul> <li v-for = "(item, index) in原创 2020-08-24 21:50:13 · 589 阅读 · 0 评论 -
盒子模型-坑爹的Offset
OffsetjQuery@3.5.1 中有一个API,$(el).offset()可以用于获取元素相对于整个网页的左、上边偏移量。图片截取自MDN我们看看jQuery内部是如何实现的。(省去了一些兼容处理,只关注核心API)offset: function (options) { var rect, win, elem = this[0]; if (!elem) { return;原创 2020-08-17 09:56:53 · 367 阅读 · 0 评论 -
ERROR in Entry module not found: Error: Can‘t resolve ‘./src/index.js‘ in‘xxx.js‘
webpack初学webpack打包的时候遇到这样的问题配置'use strict';const path = require('path');module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, mode: 'production'};关键是原创 2020-08-08 10:46:03 · 3935 阅读 · 0 评论 -
JS中为什么0.1+0.2 不等于0.3
科学计数法假设有两个数字220000000000 和 22000000000一眼看过去好像很难比较出大小但是使用科学计数法就非常容易进行比较2.2∗10112.2∗10102.2*10^{11}\\2.2*10^{10}2.2∗10112.2∗1010IEEE 754浮点数表示Javascript是使用双精度浮点数表示的。sign:符号位 1表示数字为负数,0表示为正数 (1位)exponent:阶码 (11位)mantissa: 尾数 (52位)总共64位看不懂原创 2020-07-21 11:53:38 · 695 阅读 · 0 评论 -
JS中的继承进化(多图理解)
JS中的多种继承方式思考学习笔记记录各种继承方式的优缺点目录JS中的多种继承方式继承的思考为什么要继承?继承方式0.伪继承1.寄生式继承很重要的一幅图2.原型链继承3.call继承(构造函数继承)继承的理想形式?4.组合继承寄生组合式继承继承的思考为什么要继承?假设Parent类上有这些属性和方法function Parent(name,...) { this.name = name; this.container = [1]; //...n次添加属性}其他.原创 2020-06-23 14:23:14 · 162 阅读 · 0 评论 -
jQuery源码学习-Type类型检测
function toType( obj ) { if ( obj == null ) { return obj + ""; } // Support: Android <=2.3 only (functionish RegExp) return typeof obj === "object" || typeof obj === "function" ? class2type[ toString.call( obj ) ] || "object" : typeof obj;}原创 2020-06-21 08:47:10 · 274 阅读 · 0 评论 -
JS数组去重
数组去重数组去重是非常经典的问题了,不同的实现方法,性能要求差别非常大。假设有这样的数组去掉重复的项,只保留一个let arr = [0, 1, 2, 2, 3, 3, 3, 4];let filterArr = unique(arr)filterArr => [1,1,1,2,2,2,3,3];实现方案一:使用双for循环遍历,大概思路。外层循环从数组第0项开始遍历,内层循环从第i+1项开始遍历到数组最后的位置,如果有重复的项就删除。const unique = (arr) =&原创 2020-06-18 07:35:13 · 195 阅读 · 0 评论 -
JS数据类型转换汇总
刚开始学JS的时候根本不会特别注意数据类型转换,仅仅只是记得几个常用的。有些时候有些转换会让人感到困惑比如:1 - '1' // => 01 + '1' // => 111 + '2px' // => '12px'1 - '2px' // => NaNif (1) {...} else {} // => 执行if if (0) {...} else {}// => 执行else但是随着项目实操,数据类型的转换真的无处不在。JS中数据类型转换汇总原创 2020-06-17 09:02:25 · 222 阅读 · 0 评论 -
jQuery源码extend方法
看源码之间得先知道几个概念,不然只能像我一样盯着屏幕发呆…深浅拷贝递归浅拷贝上面的博文写的非常详细了这里总结一下Arrary.prototypeObjectconcat sliceassign都是浅拷贝,也就是如果出现数组嵌套,对象嵌套的时候,存放的都是原来数组对象中的引用地址,而不是新开辟的堆内存。也就意味着如果有对象嵌套的情况,修改拷贝的对象也会影响原来被拷贝的对象。深拷贝深拷贝跟浅拷贝不同,修改拷贝的对象对原来没有影响其实就是//=> 浅拷贝原创 2020-07-26 16:47:02 · 183 阅读 · 0 评论 -
js手写系列-call&apply模拟实现
手写js-call&apply模拟实现call的用途:总结改变this中的this指向执行this举个????let obj = { value: 1};let fn1 = function() { console.log(this.value);};fn1.call(obj); // 11.改变this中的this指向call的this指向fn1,因此改变fn1的this指向obj2.执行this执行fn1,此时fn1的this指向obj为了原创 2020-07-21 18:25:54 · 189 阅读 · 0 评论 -
深入理解观察者模式与发布订阅模式
观察者模式与发布订阅模式区别困惑刚开始学前端的时候,用jQuery做一些小动画,比如说监听动画开始,动画结束,不同的时刻做一些处理,让动画更加完善。那时候经常听老师讲什么发布订阅,其实就是使用on、trigger这两个API。比如:在动画结束以后让小球变色。let ballMove = ()=> { // animation $('.ball').trigger('moveEnd');}$('.ball').on('moveEnd', () => { changeColor原创 2020-07-20 15:39:00 · 300 阅读 · 0 评论 -
踩坑记录:left&offsetLeft的区别
这篇文章说的很详细。https://www.cnblogs.com/agansj/p/7225256.html为元素添加top:50%; 百分比数值的时候style.left返回的也是空字符串。.dialog { width: 200px; height: 200px; background-color: lightsalmon; position: absolute; left: 50%; /* 设置50%*/ top: 50原创 2020-07-14 21:44:38 · 808 阅读 · 0 评论