- 博客(26)
- 收藏
- 关注
RSS订阅
原创 几种判断JS对象是否为空的方式
1.通过for…in循环let obj = { a: 1, b: 2}let fn = () => { for(let key in obj) { return false } return true}console.log(fn()) //true2.将对象转换成JSON字符串，判断是否为‘{}’let obj = {}let fn = () => { return JSON.stringify(obj) === '{}'}console.
2022-03-01 16:42:13
819
原创 JS中的宏任务与微任务
由于JS是单线程的，所以任务的执行需要按照先入后出的规则进行，同时在处理任务的时候也是需要有主次之分的任务分为同步任务和异步任务，JS会先执行同步任务，异步任务则会进行排队，按照先入先出的规则进行其中异步任务又可分为宏任务和微任务宏任务包含：a.新程序或子程序被直接执行b.事件的回调函数c.setTimeout()和setInterval()微任务包含：a.Promise .then() .catch() .finally()b.MutationObserverc.Object.obse
2021-12-08 10:07:50
1131
原创 Vue开发中常见问题汇总
1.项目打包后，资源文件报404错误在config文件夹下的index.js文件中，对于assetsPublicPath其实本身有很好的注释说明，但是可能很多人不会留意这个提示这段注释的意思就是assetsPublicPath跟项目发布时的目录结构是有关系的，如果项目放在 https://foo.github.io/bar/ 下，那么assetsPublicPath配置应该就是 /bar/，不过我们可以直接写 ./ 来解决这个问题2.css中引入资源文件：如图片或者字体文件，打包后报404错误实际
2021-12-07 11:52:50
1275
原创 web前端常见面试题(持续更新中...)
本篇文章总结了在面试vue中经常会遇到的一些题，并给出了相应的简答。1.vue实现数据双向绑定的原理？数据的双向绑定，指的是view和data两者之间的数据双向通信的问题。view->data：是通过监听事件知道数据的改变，从而改变data内容data->view：vue定义对象使用了Object.defineProperty()来定义一个对象，这个方法包含了get()，set()方法，当获取或者赋值的时候都会触发相应的get或set方法，从而就能知道data的改变，也就是我们常说的数据
2021-03-18 11:49:14
193
原创 一道阿里web前端面试题看出你的JS基本功
// 求出如下题目结果({} + {}).length([] + []).length(function() {}).length这道题目乍一看可能会让你有点懵，你可能会想：一个对象和一个对象相加能得到什么？还能求出其长度？其实这道题目相当考验了作为一位web前端开发工程师的基本功在看到这个题目之后，我们首先分析一下情况：1、({} + {}).length两个空对象相加，肯定不是数值运算，那么只有可能是字符串连接了，那你可能会得到 “{}{}” 这样的结果，其实不然，因为你忽视了字符串在
2020-11-04 16:37:52
7466
42
原创 在微信小程序开发中使用npm模块(超详细)
1.在编辑器的资源管理器的空白处右击选择 在终端中打开2.在弹出来的命令窗口中输入npm init 进行初始化：其中pakage name和version为必填项，其他项看自己情况填写。然后一直回车，最后会询问 Is this OK(yes) 直接回车即可完成初始化3.初始化完成之后就可以使用npm的命令安装第三方模块了，比如我要安装js-md5模块，使用npm install js-md5即可（安装完成以后，你可能会关掉这个命令窗口，可以参考第1点重新打开窗口）。如果你对npm命令不熟悉，可以
2020-09-16 16:20:32
6310
5
原创 你真的了解CSS属性z-index吗
我们都知道，z-index属性规定了定位元素的层叠顺序，其值越大越层级越高，其值也允许被设为负值，z-index属性让元素有了z轴的特征，让元素有了远近之分。除了这个特征之外，还有一个比较重要的特征：z-index会受到html结构的影响：举个例子，a,b为父子元素关系，如果a是定位元素且设置了z-index为10，b也是一个定位元素并设置z-index为1000，你可能会认为b的层级会高于a，但是此时的实际结果是b的z轴定位不会超过a的的z轴定位，b的值设置的再大也不会超过父级元素的值10。总而言之这
2020-09-15 16:44:30
740
原创 微信小程序自定义tabbar(不使用原生tabbar)
假如想完全自定义微信小程序的tabbar，实现如下效果：实现步骤：a.创建一个tabbar组件// .wxml文件<view class="tabbar"> <navigator wx:for="{{tabbarList}}" wx:key="txt" url="{{item.url}}" class="tabbar-item" open-type="switchTab" hover-class="nav-hover"> <image wx:if="{{i
2020-09-10 18:19:56
2396
原创 微信小程序父子组件通信
1.父组件向子组件传值首先，如果父组件想使用子组件，需要先在父组件中的.json文件中引入该子组件，假如我创建了一个叫做getAuth的子组件，那么在父组件中应该这样引入：{ "usingComponents": { "getAuth": "/components/getAuth/index" }}父组件向子组件传值，需要子组件先定义对应的属性来接受从父组件传过来的值，我在子组件中定义了下面几个属性：Component({ properties: { show: {
2020-08-27 15:41:52
3753
原创 Vue中通过this.$refs来获取DOM或者组件报错
1.关于this.$refs的使用场景如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素<p ref="p">hello</p><!-- this.$refs.p 指向该DOM元素 -->如果ref属性加在组件上，那么this.$refs.name指向该组件实例<child-component ref="chil...
2020-04-24 18:30:59
3674
原创 第一个子元素在未超过父元素高度的情况下设置margin-top导致出现竖向滚动条的问题
首先要说明的是在什么情况下会出现这种问题：在移动端，我们经常会设置html,body的height为100%，让处于最外面的父级元素刚好充满整个屏幕高度，但是，如果此时body下面第一个子元素，刚好设置了maring-top的值，你会发现页面出现了竖向滚动条，问题是这个子元素并没有超过父容器高度也导致出现竖向滚动条，似乎这个margin-top是添加到了父容器上。一个比较实际的例子：假如一个页...
2020-04-22 11:54:50
3272
原创 web移动端适配（腾讯方案）
最近比较关注疫情，平时也比较多看腾讯新闻。我发现腾讯疫情方面的新闻是单独的一个网页做的，而且还能很好的适配移动端和PC端，做到了两者很好的兼容，于是我花了些时间来弄明白到底怎样做能达到同样的效果，经过我的一番研究，总结腾讯在移动端适配的方案就是：vw单位和transform:scale()缩放结合的产物那看我慢慢道来，不过在这之前，先要弄清楚几个问题：1.vw单位是什么？相对于视口的宽度，...
2020-04-04 19:04:17
1401
原创 npm常用命令
npm作为node.js的包管理器，所以安装了node.js会自动安装上npm node.js下载地址安装完成node.js之后，只要在cmd中输入npm -v，如果出现了版本号，就表示安装成功npm -v6.12.11.npm设置由于外网被墙的原因，在介绍其他npm命令之前，我们首先要解决npm安装包速度很慢的问题，有两种方式解决这个问题：1.1 将npm注册地址设置成淘宝包镜像地...
2020-04-03 17:50:11
3344
原创 网页中怎样引导用户关注微信公众号
为什么有这种需求？的确，如果是让用户直接关注微信公众号，扫公众号的二维码，或者在微信里面长按识别二维码即可。但是有时候的业务需求可能是：在自己写的一个页面中，需要引导用户去关注公众号。我们知道，二维码在网页里或者小程序里面，是无法通过长按呼出识别二维码功能的，那么我们只能通过其他方式来实现了。之前版本的微信，当我们在公众号里面，点击右上角进入公众号介绍页面，最下面会有一个查看历史消息的栏目，...
2020-04-02 17:29:25
5027
2
原创 sass用法介绍，看这一篇就够了
1.安装Sass通过命令行工具安装，需要先安装Ruby：gem install sass将.scss文件保存成.css文件sass test.scss test.css监视单个.scss文件，每次修改此文件时自动编译成.css文件sass --watch test.scss:test.css监视整个文件夹，文件夹里的.scss文件变动时自动编译成.css文件sass --watch...
2020-04-02 14:33:23
748
原创 亲测有效！新版谷歌浏览器JS跨域
此方式只需要简单地增加谷歌浏览器指令，不需要你去在代码层面做出任何调整就能实现JS的跨域测试环境：操作系统： win10 1909谷歌浏览器版本：80.0.361.69这个版本上下的一些版本应该都是可以的，但是太老或者太新的版本不一定有效，需要自己测试另外，其他带有谷歌内核的浏览器应用此方式是否有效，还需自己去测试操作：右键单击谷歌浏览器快捷方式，然后在目标最后面空一格...
2020-03-31 18:22:33
1206
原创 面试常考题，JS数组的去重问题
1.new Set()这种去重方式利用了Set数据格式元素不能重复的特性，我个人认为是目前最为简洁的let arr = [0, 0, 1, 10, 12, 12, 15]let uniArr = [...new Set(arr)]console.log(uniArr) //[0, 1, 10 ,12, 15]2.检测数组中是否存在某个元素的方式，例如indexOf()、lastI...
2020-03-30 22:46:50
676
原创 理一理JS中undefined和null与false、0、{}、[]之间的关系
首先我们知道JS的数据类型分为基本类型（包含Null、Undefined、String、Boolean、Number）和引用类型Object需要注意的是：a.类型都是大写开头，相当于其他语言的类b.typeof操作符返回的是代表类型的字符串，这里经常会有人搞混，比如typeof 10，返回的是“number”这个字符串，返回的不是数据类型，而是代表数据类型的字符串；另外，typeof一个数...
2020-03-25 20:01:38
1514
原创 JS遍历数组有哪些方法
1.for这种方式是最传统的遍历方式，性能原则上是最好的对于for循环的改良：当数组元素个数非常多时，上例中arr.length计算消耗的时间可能会变的比较长，每循环一次都需要重新计算一次数组长度，所以可以先将数组长度保存起来，然后进行循环。因此，有如下的改良方式2.forEach()这种遍历方式看上去比较优雅方便，要元素有元素，要下标有下标，但是它作为数组的一个方法，对于某些情况（如...
2020-03-25 18:20:01
2242
原创 怎样实现CSS水平垂直居中
1.使用绝对定位，top、right、bottom、left值相等，margin为auto需要注意的是：top、left、right、bottom的值不一定要为0，只要保持这四者的值相等即可，另外，margin:auto;属性也是必须的条件，否则无法实现效果2.使用绝对定位，top、left的值为50%，对应的margin为元素宽高的一半对于此思路的扩展，使用transform属性的变形...
2020-03-25 18:02:36
1355
原创 只看一例，就能明白Vue父子组件如何通信
我们假如当前的父子组件如下（name属性为’Parent’的是父组件，为’Child’的是子组件父向子传递数据父向子传递数据主要是通过子组件的props属性来实现，在子组件props声明的属性，在父组件中直接绑定该属性则能实现父向子传递数据需要注意的是：a.props可以是一个数组，也可以是一个对象b.当props是一个对象的时候，可以对里面的属性进行相关验证，比如类型检测type...
2019-12-11 17:38:36
1563
原创 淘票票经典Python爬虫案例
本demo使用python来爬取淘票票热门电影的相关信息代码如下：1.首先需要安装python环境，直接下载python安装即可2.这里需要用到requests模块和PyQuery模块，使用 pip install 模块名 安装即可，如果下载过慢或出现错误可以从清华大学镜像拉取安装：使用pip install -i https://pypi.tuna.tsinghua.edu.cn/s...
2019-12-11 17:34:10
2120
2
原创 记住这几条规律，你就能弄懂JS中的this指向问题
关于Javacript中的this指向问题，我把它们总结为如下几个规律：1.规律一：函数用圆括号直接调用，函数中的this指向window对象 function fun() { var a = 100; console.log(this.a); } var a = 200; fun(); //200 ...
2019-09-19 17:51:58
3344
原创 简化函数用法的JS箭头函数=>
ES6允许像这样定义函数如果箭头函数不需要参数或者需要多个参数，则需要使用小括号，下面是不含参数的情况，多参数参照上图如果箭头函数代码块部分多于一条语句，则需要使用大括号括起来，并可以使用return语句返回因为大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在外面加上小括号，当然也可以使用return来返回一个对象箭头函数与变量解构结合起来使用箭头函数的一个比较常...
2019-09-19 17:42:09
921
原创 如何避免回调地狱？快使用ES6的Promise对象
Promise的中文释义为“承诺”，ES6中的Promise是一个对象，用来按照一定的逻辑进行异步操作，并且传递相应的消息1.Promise的规范a.Promise对象有三种状态：Pending（进行中）、Resolved（已完成）、Rejected（已失败），这三种状态只能从Pending到Resolved或者从Pending到Rejected，不能逆向转换，且转换完成之后，不能再改变b....
2018-11-22 13:25:20
1699
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人