- 博客(52)
- 收藏
- 关注
RSS订阅
原创 解决：flex布局之 flex-wrap:wrap 自动换行属性，导致上下两行div中间有空行
直接上问题，如图所示:我们在对父容器设置 flex-wrap:wrap 之后，容器内的容器成员在换行时中间出现了一个空行，这是因为我们忘记对容器设置align-content属性，在我们对外层容器加入align-content：flex-start之后，这个问题就解决了，效果及代码如下所示：.parent { display: flex; align-content: flex-start; flex-wrap: wrap; width: 200px; heig
2021-07-08 20:40:14
17535
原创 关于解决电脑蓝屏C:\Windows\System32\Logfiles\Str\StrTrail.txt
开机后如图所示，点击高级选项显示进入疑难解答接着点击进入启动设置选择【4】安全模式重启即可解决
2021-06-15 19:40:46
10127
5
原创 JS之手写bind原理
众所周知，我们在调用某个内置的api时，例如xxx.bind，由于 function xxx 的原型链 指向的是 Function.prototype , 因此我们在调用 xxx.bind 的时候，调用的是 Function.prototype 上的方法，所以我们直接在函数原型链上构建一个我们的_bind方法，Function.prototype._bind = function() {}① 接收比较固定的参数，其他的参数由返回的函数接收使用，提高参数的复用能力，提高函数的适用性。
2022-08-22 18:26:22
539
1
原创 我的创作纪念日
想起最开始用CSDN主要的目的是为了检索资源和解决问题，但随着自己掌握的知识和遇到的问题越来越多，不得不让我对自己的知识进行一个“定时备份”
2022-06-15 09:43:44
279
4
原创 ES5中原型、实例对象和构造函数的那些事
有些朋友学了很久的js，发现到头来对于实例对象和构造函数，以及它们的成员变量和原型链还是比较模糊，所以今天我们花点时间来一起总结一下它们之间的那些"爱恨情仇"吧ES5：在ES5中，往往我们声明一个构造函数都是通过首字母大写的方式来区分它是一个构造函数，下面我们直接通过一个笔试题来一起分析一下其中的知识点function Person(age){ this.age = age;}Person.sing = function(){console.log('我会唱歌');}Person.proto
2022-05-13 16:04:16
375
原创 一分钟搞懂JS函数提升与变量提升的优先级
在JS中究竟是函数提升优先级高呢还是变量提升优先级高？一句话：函数⾸先被提升，然后才是变量最近有朋友问我牛客网上的一道JS题，题目如下：这就是很典型的一道考察函数提升和变量提升知识点的面试题，其实上面这部分代码在js编译器中是这样的：// 函数声明提升function foo(x,y){ return x+y}var foovar num// 函数表达式不提升foo = function(x,y){ return x-y}// 函数提升优先级⽐变量提升要⾼，且
2022-05-07 11:34:02
1237
原创 开发中常见的一些Bug
本文用来记录一些开发工作中常见的一些Bug，欢迎各位大神可以在评论区继续补充，让大家少走弯路：1、在一些if条件语句出现2>12这种情况，假如在确保数据准确无误的情况下，基本就是数据类型的错误，可能这个2和12是string类型而不是number类型；2、Vue中对引用数据类型（如对象）进行监听时（watch）记得要加上deep:true；3、在涉及引用数据类型（数组和对象）的操作时，记得注意是深拷贝还是浅拷贝；.........
2022-04-20 09:31:39
950
1
原创 JS给函数添加属性
在JS中我们经常听到一句话就是：万物皆对象，一个变量是一个对象，一个函数是一个对象等等…而在这里面，函数与对象的关系又很微妙，请先思考一句话：对象都是由函数创建的，这句话是对的还是错的？首先我们先看一个小例子： function Fn() { this.name = '王福朋'; this.year = 1988; } var fn1 = new Fn();上面这个例子很简单，它说明对象可以通过函数来创建，但是不是所有对象都是由函数创
2022-03-14 16:10:25
3351
4
原创 一文搞懂JS中变量作用域的那些事
最近面试发现有挺多人对JS中的变量作用域还不是太了解，所以花了点时间来总结一下一些常见的问题：1、for和if的作用域首先JS中主要分为两种作用域，一种全局作用域和局部作用域，局部作用域通俗点说就是带有花括号的{ }，比如说函数、for和if等等，所以我们先说一下for和if的情况：for(let i=0;i<1;i++){ var a = 1 b = 2 let c = 3 } console.log(a); //输出1 console.l
2022-01-10 10:14:17
454
原创 JSON.parse和JSON.stringify的用法
平时我们在接收后端返回的json对象通常是一个字符串类型的object，所以一般我们要对这个object进行类型转化后，我们才能使用object里面的数据，而这其中涉及到两个必不可少的方法就是JSON.parse和JSON.stringifyJSON.parse()JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)解析前要保证数据是标准的JSON格式，否则会解析出错const user = '{"name": "Jack","gender": "男","age": 1
2021-12-20 17:13:27
27473
原创 JS中for,for...in,for...of和forEach的用法和区别
#### 文章的开头先提个问题：JS中你能想到的遍历数组和对象的方法有哪些？<blockquote>for,for...in,for...of,forEach，在有些情况下我们还可以使用map()方法遍历数组</blockquote>平时我们可能只是知道怎么用，但是对于它们之间的区别可能一知半解，接下来我们花点时间来总结一下：<blockquote>1、for循环</blockquote>基本语法格式：
2021-12-16 15:17:42
569
原创 JS中数组splice方法使用需要注意的点
Splice（）splice() 方法可以插入、删除或替换数组的元素，注意：同时改变了原数组。1.删除-删除元素，传两个参数，要删除第一项的位置和第二个要删除的项数2.插入-向数组指定位置插入任意项元素。三个参数，第一个参数（位置），第二个参数（0），第三个参数（插入的项）3.替换-向数组指定位置插入任意项元素，同时删除任意数量的项，三个参数。第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）在这里我使用的是它的删除功能，直接po代码：let arr = [1,2,
2021-11-30 15:44:49
745
原创 解决：微信小程序饼状图组件层级过高覆盖在日历选择器上
我相信有很多小伙伴们和我一样，在开发微信小程序的过程中，当用到多个组件的情况下会出现上述情况，直接上图：我这里饼状图用的是一个叫Wux Weapp的组件，而日历选择器则是用的Vant组件，而为什么会出现这种情况的原因是：饼状图的本质是通过canvas标签绘制的，而在小程序里，原生canvas组件的级别是非常高的，所以它会覆盖在别的组件上面。在知道了原理后，我开始从提高日历选择器的级别和降低饼状图的级别下手，分别重新设置它们的z-index，但是这种方法并不管用，于是我又开始查阅Vant组件库的Gith
2021-11-17 17:46:18
852
原创 e.target与e.currentTarget的区别
起初是在微信小程序的项目中发现了这样一段代码:<label data-url="../logs/logs" bindtap="debug">调试按钮</label>debug: function(e) { console.log(e); let url = e.target.dataset.url; wx.navigateTo({ url: url, }); },然后打开调试器看到e对象的结构发现此时target和curren
2021-10-09 09:15:01
555
原创 10分钟Canvas从入门到实践
我相信有很多小伙伴和我一样，在面试的时候面试官总喜欢问一个问题就是：让你讲讲HTML5新增的标签，而<canvas>就是其中一个非常重要的标签，但是部分小伙伴可能一开始和我一样回答得不太完整或者回答不出来，接下来让我花10分钟带你从入门到实践讲讲一些常用的知识点。首先一句话先总结，什么是canvas？canvas顾名思义是画布、画板的意思，所以它是一个画画的载体，也可以理解成是一个画画的容器，那要如何实现在画板上进行画画的操作呢？答案就是通过我们的JS来实现，所以一句话总结：<canva
2021-09-28 11:02:10
199
原创 关于对JS立即执行函数(function(){...})()的深度理解
( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法，最初我以为是一个括号包裹匿名函数，再在后面加个括号调用函数，最后达到函数定义后立即执行的目的，后来发现加括号的原因并非如此。要理解立即执行函数，需要先理解一些函数的基本概念。函数声明、函数表达式、匿名函数函数声明：function fnName () {…};使用function关键字声明一个函数，再指定一个函数名，叫函数声明。函数表达式 var fnName = fu
2021-09-18 14:56:44
212
原创 JS关于定义函数的区别（为啥推荐第二种方式）
在平时开发的过程中，我们注意到函数的定义方式远不止一种，那么不同函数定义之间它们又有什么区别呢？看到一篇博客写的很不错所以Mark下来同大家分享一下！博主看到了阮一峰大神的一篇博客，12种不宜使用的javascript语法看到第9条的时候获得了启发，如下图：接下来讲一下作者的见解，代码如下： <script> y(); function y() { alert(2); };
2021-09-18 11:15:30
134
原创 JS获取JSON字符串的几种方式
之前有人问了一个问题就是关于js获取json数据value值的几种方式，所以今天把一些比较常见的给总结了一下，希望能帮助到大家<script> var obj = {id:1,name:'abd'} //js获取json字符串value的第一种方式 console.log(obj.id); //js获取json字符串value的第二种方式 console.log(obj['id']); Obje
2021-09-10 10:50:32
5277
原创 ＜template＞标签的用法
一、html5中的template标签template标签，顾名思义，模板的意思HTML5提供的新标签，更加规范和语义化可以把列表项放入template标签中，然后进行批量渲染html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。二、template标签操作的属性和方法content属性:在js中template标签对应的dom对象存在content属性，对应
2021-09-02 14:30:45
39341
3
原创 一篇文章教你弄懂到底什么是BFC
什么是BFC？首先遇到BFC这个概念是在一次面试中，不知道有没有小伙伴和我一样，你知道这个东西的作用或者说你曾经用过这个东西，但是你就很难系统地讲出来这到底是个啥玩意儿，归根到底就是基础还不扎实，遇到了不懂的还是老老实实查一波MDN文档把~MDN：块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。下列方式会创建块格式化上下文：根元素（）浮动元素（元素的 float 不是
2021-08-30 10:39:50
130
原创 十分钟教你弄懂深浅拷贝
浅拷贝: <script> //浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用 //深拷贝拷贝多层，每一级别的数据都会被拷贝 var obj = { id:1, name:'andy', msg:{ age:18 } }; var o = {}; for(var k in obj){
2021-08-25 10:17:07
147
原创 ES6：箭头函数
ES6中新增的定义函数的方式 (箭头函数是用来简化函数定义语法的)() => { } const fn = () => { }1、在箭头函数中，函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号const sum = (num1,num2) => num1+num2;const result = sum(10,20);console.log(result);2、如果形参只有一个，可以省略小括号function fn(v){ retu
2021-08-23 17:25:06
204
转载 HTTP与TCP的区别和联系
相信不少初学手机联网开发的朋友都想知道Http与Socket连接究竟有什么区别，希望通过自己的浅显理解能对初学者有所帮助。一、基本概念1、TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议，可以使手机终端通过无线网络建立TCP连接。TCP协议可以对上层网络提供接口，使上层网络数据的传输建立在“无差别”的网络之上。 建立起一个TCP连接需要经过“三次握手”： 第一次握手：客户端发送syn包(syn=j)到服务器，并进入SYN_SEND状态，等待服务器确认； 第二次握
2021-08-23 11:40:32
2496
原创 轮子：实现水平垂直居中
<!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-scale=1.0"> <title>Doc
2021-08-20 09:51:39
68
原创 Web前端防抖与节流的那些事
防抖与节流：这是前端面试中比较常见的一个问题，可能会让你现场手写，其实说白了，节流和防抖就是用来控制某些函数的调用频率。因为有时候我们一个函数可能在短时间内会被触发多次，但是每次触发都发送一次请求的话就没有必要，所以我们要通过防抖与节流来控制。防抖：防抖就像是PK赛里的待定区，下一个待定的人会把上一个待定的人踢出局，换句话说，一个函数在短时间内被调用多次，只会执行最后一次（划重点）下面是我写的一个demo来帮助大家理解一下：<!DOCTYPE html><html lang=.
2021-08-13 16:32:54
164
原创 小程序编码规范
wxss：class类名必须以字母开头命名，且全部字母为小写，单词之间用下划线"_"连接，且祖先模块不能出现下划线。若子孙模块超过4级或以上，应考虑在祖先模块内用具有辨识性的独立缩写作为新的子孙模块；js：生命周期函数放前面，自定义函数放在生命周期函数后面，函数之间相隔一行，方法名采用驼峰命名 onHide: function (e) { }, /** * xxxx */ onUnload:function(){ }, /** * 函数之间相隔一行 * 自定义函数
2021-08-13 14:34:14
776
原创 :not(:first-child)和:not(:last-child)的用法
:not(:first-child)顾名思义，not first就是不要第一个，所以它的作用是设置第一个以外的元素样式:not(:last-child)同理，作用是设置除最后一个以外其他的元素样式Talk is cheap，show me the code！下面我们来举一个例子理解一下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-
2021-08-10 10:04:20
7733
1
原创 Vue实现点击事件使输入框自动填入数据
最近因为疫情期间，然后朋友上学说每天需要上报体温，能不能实现一个自动填体温的功能，刚好最近在复习vue，所以用vue来简单实现一下：<div id="app"> <label for="temp" @click="auto">温度(单位°C) <input type="text" id="temp" :value="temperature" > </label></div>
2021-08-09 11:26:17
2606
原创 谷歌浏览器之断点调试
看了网上大部分人写的关于谷歌浏览器功能的调试，多多少少都有点不准确，因此打算自己来写一篇，帮助大家来避开一些误导首先我们打开谷歌浏览器的调试界面可以看到其中，大部分的博客对于中间的这三个按钮的解释都有点差异，所以我们主要讲讲这三个按钮的实际用处第一个按钮step over next function ，顾名思义over有跳过的意思，即如果遇到一个函数，它会直接执行完这个函数（注意是直接执行结束返回结果），然后进入下一步，中间不显示细节。第二个按钮step into next function
2021-08-05 10:38:00
2233
2
原创 如何处理：git push error: failed to push some refs to
有时候我们在Vscode把更改后的代码想push到远程仓库打开Vscode终端然后输入一段代码 ：git remote add origin+（HTTPS或者SSH）对远程仓库进行连接然后进行推送的时候终端提示：git push error: failed to push some refs to…这是因为我们仓库的README.md文档不在本地代码目录中，也就是说我们需要先将远程代码库中的任何文件先pull到本地代码库中，才能push新的代码到github代码库中。解决措施：使用如下命令：gi
2021-07-27 15:43:47
460
1
原创 微信小程序module.exports 模块化
data.js:var dataPost = { "student": { "name": "sfh", "description": "计算机专业", }, } module.exports={ myData: dataPost // 对外暴露的变量名叫myData,对应着内部的dataPost对象 } 把data.js里面的数据封装成模块后在index.js中调用index.js:let data = requ
2021-07-23 16:25:12
985
原创 console.log()与console.dir()的区别
console.log()可以取代alert()或document.write()，在网页脚本中使用console.log()时，会在浏览器控制台打印出信息。console.dir()可以显示一个对象所有的属性和方法。回顾：放在对象里面的函数属性就叫方法，方法本质也是函数，只是放的位置不同罢了例子：控制台输出的内容：...
2021-07-22 11:05:02
280
转载 关于Vue中this的指向问题
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script src="https://unpkg.com/vue@2.5.9/dist/vue.j
2021-07-20 14:06:08
2842
1
原创 关于js中闭包的理解，这一篇就够了
一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 var n=999; function f1(){ alert(n); } f1(); // 999另一方面，在函数外部自然无法读取函数内的局部变量。 function f1(){ var n=999; } alert(n); // error这里有一个地方需
2021-07-19 22:13:52
204
原创 js关于变量提升的那些事
话不多说，直接上代码：function fn() { var x = y = 1;}fn();console.log(y); // 1;console.log(x); // Error: undefined;运行结果：原因是这个函数在执行的时候, 是先执行的: y = 1; 因为这里的y在声明赋值时没有使用var, 因此会默认成为全局变量, 然后将一个全局变量的值赋值给一个局部变量x;其实际的执行过程如下:var y = 1;function fn() { var
2021-07-14 14:00:23
109
原创 面试题：first paint和dom ready的关系
白屏时间first paint和可交互时间dom ready的关系是（A ）A、先触发first paint ，后触发dom readyB、先触发dom ready，后触发first paintC、一起触发D、没关系解析：白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通
2021-07-13 17:27:01
1057
转载 Object.prototype解析
Object.prototype是一个对象，用于表示Object的原型对象。几乎所有的JavaScript对象都是Object的实例，其原型链上最后一个就是指向Object.prototype。一个典型的对象继承了Object.prototype的属性和方法。也可以创建没有原型对象的对象，比如通过Object.create(null)创建，或通过Object.setPrototypeOf(obj, null)方法来改变指定对象的原型对象。改变Object.prototype的属性和方法，或给Object
2021-07-13 15:48:11
4203
原创 JS改变this指向的三种方法
1.call()第一个参数：this指向如果要传参，后面依次是参数，例：function fn(x,y){ console.log(this); console.log(this.name);}var obj = { name:"zs"}fn(1,2);fn.call(obj,1,2);这样一来把this由原来的window对象转变成obj对象了2.apply()与第一种方法不同的是，用数组的形式表示参数function fn(x,y){ consol
2021-07-13 13:55:27
1958
原创 position的几个属性
position 的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、“right"以及"bottom” 属性使用。 1：static：默认位置，（static 元素会忽略任何top、bottom、left 或right 声明）一般不常用。2：relative：位置被设置为relative 的元素，偏移的top，right，bottom，left 的值都以它原来的位置为基准偏移。注意relative 移动后的元素在原来的位置仍占据
2021-07-12 14:41:48
5250
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人