黑1号一-CSDN博客

原创 10月份总结以及笔记迁移到github

从入职到现在大概三个月，这段时间以来一直在做业务组件的开发。虽然业务开发已经得心应手，但是在组件化的过程中，去耦合做的还是不够。但是进步也是显而易见的。对vue底层API的原理掌握还是不够深入，但这是一个结合应用场景持续深入的过程，在此阶段更能理解什么是设计出来的代码？什么是随着需求堆积出来的代码？以及使用原生 js 的 API 解决框架不能满足需求的场景。不管何种框架，考验驾驭框架能力的重要因素还是js底层API的掌握程度以及设计模式和高阶函数的编程思想。在前端工程化方面，是要花大量时间去学习的。掌

2021-11-10 17:01:15 475 1

原创 vue组件中不绑定 vs绑定key的细节分析

关于 Vue中key能优化性能的一点理解。先上代码，方便理解。<template> <div id="app"> <h4>不绑定key</h4> <div v-for="item in arr1">{{item}}</div> <h4>用数组索引绑定key</h4> <div v-for="(item,index) in arr2" :key="index">{

2021-11-10 13:51:51 1044

原创 js 中对 var、let、const 和函数声明以及函数为何是一等公民的理解

熟悉js的朋友们都知道、var声明的变量和函数声明都存在变量提升。那这两段代码分别会输出什么？代码1：var foofunction foo(){}console.log(foo)代码2：function foo(){}var fooconsole.log(foo)如果你认为代码1输出 f foo(){} ，代码2输出 undefined。就亲自到浏览器的console控制台下试一试。真实答案是两段代码都会输出 f foo(){}下面我还原一下真实的执行过程：// 同

2021-11-05 00:07:29 171

原创限制promise并行数的实现

/* *@description: 限制promise的并行数量 *@author: codeWen666 *@date: 2021-10-22 00:32:56 *@version: V1.0.5*/class Dispatch { constructor (maxNum) { this.maxTime = maxNum || 2 this.runTime = 0 this.asyncQueue = [] } add (promiseGenerator)

2021-10-22 00:48:47 106

原创 js数组方法的返回值总结

了解数组方法的返回值有利于写出来节省内存的代码，没必要声明变量去开辟存储空间。1、push unshift 返回数组添加元素后的长度2、pop shift 返回被删除的元素3、splice 如果删除元素则返回被删除元素的数组，如果添加元素则返回空数组。4、split 返回数组5、slice 返回截取后的数组6、concat 返回连接后的新数组7、sort 返回排序后的数组8、reverse 返回反转后的新数组9、forEach 返回undefined10、map 返回映射后的新数组1

2021-10-21 00:12:38 2808 2

原创 js中快速排序算法的实现

前端业务组件开发过程中用到的算法知识不多。但是作为程序员，基本的算法还是必会的。如果作为底层开发者，考虑的东西就很多了。就拿vue的性能优化来说，diff算法也是大厂面试必考题。做了一年的前端开发，用到递归还是比较多的。组织树的渲染，需要把后端返回的平面结构数据转为多维结构数据。前端传参给后端需要把多维数据结构转一维。（类似原生的flat方法）下面实现以下js的快速排序：function quickSort(arr){ if(arr.length==0)return [];

2021-10-19 23:21:55 130

原创 js 中实现异步队列串行执行

背景、在es6的Async await函数没有出来之前。解决多个请求之间有顺序和依赖的问题不是很友好。pomise的出现解决了回调地狱的写法。使得异步代码写起来像同步一样简单。我们可以基于promise写一个串行执行的异步队列。下面实现一个promise队列。function createPromise(step,delay){ return function(){ return new Promise((resolve)=>{ // slef c

2021-10-18 14:06:21 571 1

原创 js中字符串replace函数的参数解析

repalce函数的作用是替换匹配到的字符串。参数1：可以是被替换的文本字符串或者正则对象。参数2：替换的文本或者替换文本的函数。注意：参数为1正则对象且全局匹配，参数2为函数时，则函数会多次调用，返回值为替换的值。注意：参数1为正则，参数2为文本且带有$符号时，所代表的意义如下。①、$1、$2、…$99 表示 regExp 中的第 1 到第 99 个子表达式相匹配的文本。②、 $&表示与 regexp 相匹配的子串。③、 $` 表示位于匹配子串左侧的文本。④、 $’ 表示位于匹

2021-10-17 22:17:01 1063

原创获取文件的base64编码

项目中图片经常会用到base64编码显示。如何得到文件的base64编码？js原生的API readAsDataURLreadAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。实例<input type="file" onchange="previewFile()">&l

2021-10-13 23:31:17 966

原创 axios中的拦截器的使用

1、请求拦截器// use(两个参数)axios.interceptors.request.use(req => { // 在发送请求前要做的事儿 ... return req}, err => { // 在请求错误时要做的事儿 ... // 该返回的数据则是axios.catch(err)中接收的数据 return Promise.reject(err)})2、响应拦截器// use(两个参数)axios.intercep

2021-09-27 23:52:08 805 1

原创使用mock模拟接口数据，提高开发效率

1、背景在项目开发过程中，前后端分离开发。前端的节奏经常快于后端。而前端对数据有依赖，没有数据的话很难展示一些问题。只能自己伪造数据。在没有接触mock以前，都是自己手写假数据，非常麻烦而且并不调用接口，不能暴露一些问题。直到遇见mock，才发现真香。2、优点mock的官网是这样介绍它的优点的：前后端分离让前端攻城师独立于后端进行开发。增加单元测试的真实性通过随机数据，模拟各种场景。开发无侵入不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。用法简单符合直觉的接口。

2021-09-27 23:11:56 357

原创移动端滑动屏幕方向判断

移动端和小程序H5开发中，经常会遇见检测用户滑动方向的需求。记录一下实现的思路，以便以后的相似场景应用的快速开发。监听以下touchstart、touchmove、touchend 事件。触摸开始时，记录开始的横纵坐标。event.touches[0].pageX，event.touches[0].pageY。触摸过程中，阻止默认行为。触摸结束后，对于touchend事件，changedTouches 是已经从触摸面的离开的触点的集合（也就是说，手指已经离开了屏幕/触摸面）。计算在x方向和y方向的

2021-09-25 21:54:53 308

原创一个简易的观察者模式实现vue的响应式依赖

原理如下：第一步使用Object.defineProperty劫持数据。第二步利用观察者模式，实现一个渲染watcher和依赖管理器。当读取数据时，依赖管理器Dep收集watcher。当数据更新时，调用各个watcher去更新dom。代码如下：<!DOCTYPE html><html> <head></head> <body> <div id="test"> he

2021-09-24 01:12:56 55

原创 UI库中表单内单个field组件的底部0.5px的线条的实现原理

在项目中，作为前端经常跟UI设计打交道，经常因为几像素的问题而十分头疼。UI小姐姐设计出来的线条用工具查看是1px，而自己做完后感觉好像粗了，以前没当回事，后来研究了下，原来是scaleY搞得鬼。下面实现下0.5px的若隐若现的底线。效果如下：代码如下：<!DOCTYPE html><html> <head> <style> body{ display: flex;

2021-09-22 23:43:13 319

原创 vue中如何更改第三方UI库的样式？

在vue项目中，一般会使用第三方UI库。例如elementUI、vant、mint等。往往需要改写样式来满足公司内部UI设计。很多时候，会产生各种各样的问题。污染全局样式等。vue文件中样式都是模块化的。只做用于当前作用域。vue中 scoped的原理分析。在浏览器开发者工具下我们可以看到，页面中元素都带有一个data-v-2df2d1234这一长串自定义属性。样式中会有对应的匹配。这是vue-loader处理后的东西。用来保证样式不会造成全局污染。当我们的组件中引入第三方UI库的组件并修改样式不生效

2021-09-22 00:13:40 390

原创观察者模式与发布订阅模式的区别

曾经一度混淆观察者模式与发布订阅模式。下面剖析这两个模式之间的区别。发布订阅模式是由事件中心调度。订阅者和发布者互不干扰。观察者模式是观察者和目标直接进行交互。发布订阅模式相较于观察者模式，代码进行了解耦，可以在事件中心做一些操作，例如发布者发布消息并不想让所有订阅者都接受。vue 中双向数据绑定的实现用到了发布订阅模式。感兴趣的可以去看源码。观察者模式的代码实现：class Observer { constructor(){ } update(){ }}

2021-09-20 23:35:12 578

原创浏览器缓存机制的理解

什么是CDN？下面是百度百科的定义。CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。通俗的理解就是火车票的代售点。功能就是降低火车站售票压力。什么是浏览器缓存？浏览器缓存就是浏览器把通过http请求的资源缓存到本地的一种行为。下面是浏

2021-07-31 01:48:09 126

原创 es6中对let的理解

let关键字有三种特性。块级作用域、不存在变量提升、暂时性死区。1、块级作用域如图：es5只有全局作用域和函数局部作用域。块级作用域的存在使得变量更加安全，避免覆盖全局变量。2、不存在变量提升var 关键字声明的变量会被提升到头部且挂载到windows对象下作为键名。也就是说在var关键字声明变量前调用变量不会报引用错误，而是undefined。var声明的变量挂载到windows上，是js语言设计上的缺陷。...

2021-04-24 16:50:38 180 1

原创 es6中Symbol的实现原理以及应用场景

1、Symbol的使用方式：Symbol不是构造器函数，所以不能使用new命令let s=Symbol();可以不传参数也可以传入参数作为描述值。参数类型可以是任意值。下图可以看出参数为undefined、null、function、array、regExp、boolean、string时的输出情况。2、Symbol的实现原理代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset

2021-04-21 15:25:30 940

原创纯css实现悬浮球效果

效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ width: 100px; height: 100px; padding:0px;

2021-04-21 00:15:55 1128

原创纯css实现打字效果

效果如下：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ display: flex; justify-content: center; a

2021-04-20 23:38:04 64

原创 css上下margin合并问题

margin合并有三个场景。1、兄弟元素之间，上面元素的margin-bottom和下面元素的margin-top之间的合并。合并后的距离取两者之间最大值。解决方案：只设置一个元素的外边距即可。2、父子元素之间，父元素和第一个或最后一个子元素发生合并。代码如下图：现象：子元素和父元素的margin-top合并。同理父元素和子元素的margin-bottom也会产生合并。解决方案：①父元素设置overflow不为visible②父元素设置padding-top③父元素设置border-top

2021-04-13 23:35:12 1054

原创 css中幽灵空白节点的理解

内联元素渲染时，line-box前面会产生一个空白节点，宽度为0，继承font-size,line-height属性。上图中div和子元素span都没有设置高度，却存在高度，就是幽灵空白节点搞得鬼。为什么高度是20.667呢？因为line-height是20.667。line-height=fontSize+行距。font-size默认是16px。...

2021-04-11 23:43:12 530

原创 js深拷贝的实现

js中创建的对象存在堆内存中，基本类型的变量存在栈内存中。声明一个变量指向对象，是把对象在堆内存中的地址赋值给变量。如果一个对象里边嵌套对象。通过一层遍历去克隆，值为对象的键值对仍然克隆的是对象的引用。修改原对象也会导致克隆对象的更改。下面看代码：let obj={ a:100, b:new Date(), c:null, d:undefined, e:/^\d{3}$/, f:function(){}, h:{ name:"xiaoming", age:12, }}第一种：

2021-04-09 23:15:32 34

原创前端经典的布局方式、圣杯、双飞翼、弹性布局

实现效果：左右固定，中间伸缩。1、圣杯布局：代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal

2021-04-08 23:34:43 144

原创 js中继承的理解

js的继承有原型链继承、借用构造函数实现继承、组合继承、寄生组合式继承。下面介绍这几种继承方式的实现：一、原型链继承function Animal(name){ this.name=name;}Animal.prototype.run=function(){ console.log(this.name+"run");}funciton Dog(){};Dog.prototype=new Animal("dog");let dog1=new Dog();let dog2=new Dog

2021-04-03 14:51:07 109

原创 js中call、apply、bind的实现原理

手写模仿实现call、apply、bind的实现。//call的实现Function.prototype.mycall=function(context,...args){ context=context||window; context.fn=this; delete context.fn(...args); return;}//apply的实现Function.prototype.myapply=function(context,args){ context=context||win

2021-04-01 17:13:44 68

原创 vue中nextTick的实现原理

vue中nextTick模块的代码大概110行。比较容易理解。模块所在的目录结构为：vue-dev\src\core\util\next-tick.js。nextTick方法有两个参数：参数一为加入异步任务队列的回调函数；参数二为传入的绑定的环境上下文，也叫执行上下文。源码如下：/* @flow *//* globals MutationObserver */import { noop } from 'shared/util'import { handleError } from './err

2021-04-01 16:27:50 410

原创 promise原理，手动模仿

promise的产生用于解决异步地狱回调问题，使代码结构扁平化。面试官会经常考察对promise的理解。我们手动实现一个promise.js底层加入异步微任务方法 queueMicroTask();js异步微任务方法有：MutationObserve()，queueMicroTask(),process.nextTick();//定义状态常量const PENDING="pending";const FULFILLED="fulfilled";const REJECTED="rejected

2021-03-30 23:35:45 70 1

原创 js实现图片压缩上传

原理：利用canvas的drawImage()方法绘制图像。调用canvas的toBlob()方法获取图片的二进制数据传给后端。drawImage(image,dx,dy,dWidth,dHeight);参数详情：image:图片；（dx,dy）图像左上角距离canvas原点的距离。(dWidth,dHeight) 显示到canvas上的宽高（缩放图片）。例子：//创建离屏canvaslet canvas=document.createElement("canvas");canvas.w

2021-03-29 21:21:55 197

原创 js中好用的散列函数

js中好用的散列函数参数key类型为字符串hashTable 应用场景：快速查找集合中的元素function hashFun(key){ let hash=5381; for(let i=0;i<key.length;i++){ hash=hash*33+key.charCodeAt(i); } return hash%1013;}

2021-03-06 21:43:39 199

垂钓老翁的博客