<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Andrasen的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Andrasen</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Andrasen]]></copyright><item><title><![CDATA[几种判断JS对象是否为空的方式]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/123209336</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/123209336</guid><author>Andrasen</author><pubDate>Tue, 01 Mar 2022 16:42:13 +0800</pubDate><description><![CDATA[1.通过for…in循环
let obj = {
  a: 1,
  b: 2
}
let fn = () =&gt; {
  for(let key in obj) {
    return false
  }
  return true
}
console.log(fn()) //true

2.将对象转换成JSON字符串，判断是否为‘{}’
let obj = {}
let fn = () =&gt; {
  return JSON.stringify(obj) === '{}'
}
console.]]></description><category></category></item><item><title><![CDATA[JS中的宏任务与微任务]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/121783912</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/121783912</guid><author>Andrasen</author><pubDate>Wed, 08 Dec 2021 10:07:50 +0800</pubDate><description><![CDATA[由于JS是单线程的，所以任务的执行需要按照先入后出的规则进行，同时在处理任务的时候也是需要有主次之分的
任务分为同步任务和异步任务，JS会先执行同步任务，异步任务则会进行排队，按照先入先出的规则进行
其中异步任务又可分为宏任务和微任务
宏任务包含：
a.新程序或子程序被直接执行
b.事件的回调函数
c.setTimeout()和setInterval()
微任务包含：
a.Promise .then() .catch() .finally()
b.MutationObserver
c.Object.obse]]></description><category></category></item><item><title><![CDATA[Vue开发中常见问题汇总]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/121765361</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/121765361</guid><author>Andrasen</author><pubDate>Tue, 07 Dec 2021 11:52:50 +0800</pubDate><description><![CDATA[1.项目打包后，资源文件报404错误
在config文件夹下的index.js文件中，对于assetsPublicPath其实本身有很好的注释说明，但是可能很多人不会留意这个提示

这段注释的意思就是assetsPublicPath跟项目发布时的目录结构是有关系的，如果项目放在 https://foo.github.io/bar/ 下，那么assetsPublicPath配置应该就是 /bar/，不过我们可以直接写 ./ 来解决这个问题
2.css中引入资源文件：如图片或者字体文件，打包后报404错误
实际]]></description><category></category></item><item><title><![CDATA[web前端常见面试题(持续更新中...)]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/114966745</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/114966745</guid><author>Andrasen</author><pubDate>Thu, 18 Mar 2021 11:49:14 +0800</pubDate><description><![CDATA[本篇文章总结了在面试vue中经常会遇到的一些题，并给出了相应的简答。
1.vue实现数据双向绑定的原理？
数据的双向绑定，指的是view和data两者之间的数据双向通信的问题。
view-&gt;data：是通过监听事件知道数据的改变，从而改变data内容
data-&gt;view：vue定义对象使用了Object.defineProperty()来定义一个对象，这个方法包含了get()，set()方法，当获取或者赋值的时候都会触发相应的get或set方法，从而就能知道data的改变，也就是我们常说的数据]]></description><category></category></item><item><title><![CDATA[一道阿里web前端面试题看出你的JS基本功]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/109492279</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/109492279</guid><author>Andrasen</author><pubDate>Wed, 04 Nov 2020 16:37:52 +0800</pubDate><description><![CDATA[// 求出如下题目结果
({} + {}).length
([] + []).length
(function() {}).length

这道题目乍一看可能会让你有点懵，你可能会想：一个对象和一个对象相加能得到什么？还能求出其长度？
其实这道题目相当考验了作为一位web前端开发工程师的基本功
在看到这个题目之后，我们首先分析一下情况：
1、({} + {}).length
两个空对象相加，肯定不是数值运算，那么只有可能是字符串连接了，那你可能会得到 “{}{}” 这样的结果，其实不然，因为你忽视了字符串在]]></description><category></category></item><item><title><![CDATA[在微信小程序开发中使用npm模块(超详细)]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/108623501</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/108623501</guid><author>Andrasen</author><pubDate>Wed, 16 Sep 2020 16:20:32 +0800</pubDate><description><![CDATA[1.在编辑器的资源管理器的空白处右击选择 在终端中打开

2.在弹出来的命令窗口中输入npm init 进行初始化：
其中pakage name和version为必填项，其他项看自己情况填写。然后一直回车，最后会询问 Is this OK(yes)  直接回车即可完成初始化

3.初始化完成之后就可以使用npm的命令安装第三方模块了，比如我要安装js-md5模块，使用npm install js-md5即可（安装完成以后，你可能会关掉这个命令窗口，可以参考第1点重新打开窗口）。如果你对npm命令不熟悉，可以]]></description><category></category></item><item><title><![CDATA[你真的了解CSS属性z-index吗]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/108602086</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/108602086</guid><author>Andrasen</author><pubDate>Tue, 15 Sep 2020 16:44:30 +0800</pubDate><description><![CDATA[我们都知道，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。总而言之这]]></description><category></category></item><item><title><![CDATA[微信小程序自定义tabbar(不使用原生tabbar)]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/108519166</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/108519166</guid><author>Andrasen</author><pubDate>Thu, 10 Sep 2020 18:19:56 +0800</pubDate><description><![CDATA[假如想完全自定义微信小程序的tabbar，实现如下效果：

实现步骤：
a.创建一个tabbar组件
// .wxml文件
&lt;view class="tabbar"&gt;
  &lt;navigator wx:for="{{tabbarList}}" wx:key="txt" url="{{item.url}}" class="tabbar-item" open-type="switchTab" hover-class="nav-hover"&gt;
    &lt;image wx:if="{{i]]></description><category></category></item><item><title><![CDATA[友情连接，感谢这些码农朋友的的支持]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/108284776</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/108284776</guid><author>Andrasen</author><pubDate>Fri, 28 Aug 2020 18:15:11 +0800</pubDate><description><![CDATA[1.黄河爱浪的博客

]]></description><category></category></item><item><title><![CDATA[微信小程序父子组件通信]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/108261702</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/108261702</guid><author>Andrasen</author><pubDate>Thu, 27 Aug 2020 15:41:52 +0800</pubDate><description><![CDATA[1.父组件向子组件传值
首先，如果父组件想使用子组件，需要先在父组件中的.json文件中引入该子组件，假如我创建了一个叫做getAuth的子组件，那么在父组件中应该这样引入：
{
  "usingComponents": {
    "getAuth": "/components/getAuth/index"
  }
}

父组件向子组件传值，需要子组件先定义对应的属性来接受从父组件传过来的值，我在子组件中定义了下面几个属性：
Component({
  properties: {
    show: {
]]></description><category></category></item><item><title><![CDATA[Vue中通过this.$refs来获取DOM或者组件报错]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/105737038</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/105737038</guid><author>Andrasen</author><pubDate>Fri, 24 Apr 2020 18:30:59 +0800</pubDate><description><![CDATA[1.关于this.$refs的使用场景
如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素
&lt;p ref="p"&gt;hello&lt;/p&gt;
&lt;!-- this.$refs.p 指向该DOM元素 --&gt;

如果ref属性加在组件上，那么this.$refs.name指向该组件实例
&lt;child-component ref="chil...]]></description><category></category></item><item><title><![CDATA[第一个子元素在未超过父元素高度的情况下设置margin-top导致出现竖向滚动条的问题]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/105676175</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/105676175</guid><author>Andrasen</author><pubDate>Wed, 22 Apr 2020 11:54:50 +0800</pubDate><description><![CDATA[首先要说明的是在什么情况下会出现这种问题：
在移动端，我们经常会设置html,body的height为100%，让处于最外面的父级元素刚好充满整个屏幕高度，但是，如果此时body下面第一个子元素，刚好设置了maring-top的值，你会发现页面出现了竖向滚动条，问题是这个子元素并没有超过父容器高度也导致出现竖向滚动条，似乎这个margin-top是添加到了父容器上。
一个比较实际的例子：假如一个页...]]></description><category></category></item><item><title><![CDATA[web移动端适配（腾讯方案）]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/105313044</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/105313044</guid><author>Andrasen</author><pubDate>Sat, 04 Apr 2020 19:04:17 +0800</pubDate><description><![CDATA[最近比较关注疫情，平时也比较多看腾讯新闻。我发现腾讯疫情方面的新闻是单独的一个网页做的，而且还能很好的适配移动端和PC端，做到了两者很好的兼容，于是我花了些时间来弄明白到底怎样做能达到同样的效果，经过我的一番研究，总结腾讯在移动端适配的方案就是：
vw单位和transform:scale()缩放结合的产物
那看我慢慢道来，不过在这之前，先要弄清楚几个问题：
1.vw单位是什么？
相对于视口的宽度，...]]></description><category></category></item><item><title><![CDATA[npm常用命令]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/105294299</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/105294299</guid><author>Andrasen</author><pubDate>Fri, 03 Apr 2020 17:50:11 +0800</pubDate><description><![CDATA[npm作为node.js的包管理器，所以安装了node.js会自动安装上npm node.js下载地址
安装完成node.js之后，只要在cmd中输入npm -v，如果出现了版本号，就表示安装成功
npm -v
6.12.1

1.npm设置
由于外网被墙的原因，在介绍其他npm命令之前，我们首先要解决npm安装包速度很慢的问题，有两种方式解决这个问题：
1.1 将npm注册地址设置成淘宝包镜像地...]]></description><category></category></item><item><title><![CDATA[网页中怎样引导用户关注微信公众号]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/105272961</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/105272961</guid><author>Andrasen</author><pubDate>Thu, 02 Apr 2020 17:29:25 +0800</pubDate><description><![CDATA[为什么有这种需求？
的确，如果是让用户直接关注微信公众号，扫公众号的二维码，或者在微信里面长按识别二维码即可。但是有时候的业务需求可能是：在自己写的一个页面中，需要引导用户去关注公众号。
我们知道，二维码在网页里或者小程序里面，是无法通过长按呼出识别二维码功能的，那么我们只能通过其他方式来实现了。
之前版本的微信，当我们在公众号里面，点击右上角进入公众号介绍页面，最下面会有一个查看历史消息的栏目，...]]></description><category></category></item><item><title><![CDATA[sass用法介绍，看这一篇就够了]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/105268682</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/105268682</guid><author>Andrasen</author><pubDate>Thu, 02 Apr 2020 14:33:23 +0800</pubDate><description><![CDATA[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...]]></description><category></category></item><item><title><![CDATA[亲测有效！新版谷歌浏览器JS跨域]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/105228337</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/105228337</guid><author>Andrasen</author><pubDate>Tue, 31 Mar 2020 18:22:33 +0800</pubDate><description><![CDATA[此方式只需要简单地增加谷歌浏览器指令，不需要你去在代码层面做出任何调整就能实现JS的跨域

测试环境：

操作系统： win10 1909

谷歌浏览器版本：80.0.361.69

这个版本上下的一些版本应该都是可以的，但是太老或者太新的版本不一定有效，需要自己测试

另外，其他带有谷歌内核的浏览器应用此方式是否有效，还需自己去测试

操作：

右键单击谷歌浏览器快捷方式，然后在目标最后面空一格...]]></description><category></category></item><item><title><![CDATA[面试常考题，JS数组的去重问题]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/105206939</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/105206939</guid><author>Andrasen</author><pubDate>Mon, 30 Mar 2020 22:46:50 +0800</pubDate><description><![CDATA[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...]]></description><category></category></item><item><title><![CDATA[理一理JS中undefined和null与false、0、{}、[]之间的关系]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/105102224</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/105102224</guid><author>Andrasen</author><pubDate>Wed, 25 Mar 2020 20:01:38 +0800</pubDate><description><![CDATA[首先我们知道JS的数据类型分为基本类型（包含Null、Undefined、String、Boolean、Number）和引用类型Object
需要注意的是：
a.类型都是大写开头，相当于其他语言的类
b.typeof操作符返回的是代表类型的字符串，这里经常会有人搞混，比如typeof 10，返回的是“number”这个字符串，返回的不是数据类型，而是代表数据类型的字符串；
另外，typeof一个数...]]></description><category></category></item><item><title><![CDATA[JS遍历数组有哪些方法]]></title><link>https://blog.youkuaiyun.com/Andrasen/article/details/105101267</link><guid>https://blog.youkuaiyun.com/Andrasen/article/details/105101267</guid><author>Andrasen</author><pubDate>Wed, 25 Mar 2020 18:20:01 +0800</pubDate><description><![CDATA[1.for
这种方式是最传统的遍历方式，性能原则上是最好的

对于for循环的改良：当数组元素个数非常多时，上例中arr.length计算消耗的时间可能会变的比较长，每循环一次都需要重新计算一次数组长度，所以可以先将数组长度保存起来，然后进行循环。因此，有如下的改良方式

2.forEach()
这种遍历方式看上去比较优雅方便，要元素有元素，要下标有下标，但是它作为数组的一个方法，对于某些情况（如...]]></description><category></category></item></channel></rss>