<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[web前端开发博客]]></title><description><![CDATA[web前端开发博客专注web前端开发领域！]]></description><link>https://blog.youkuaiyun.com/qq_25838839</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_25838839]]></copyright><item><title><![CDATA[js数组倒序的方法，分享7种倒序方法]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/140928907</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/140928907</guid><author>qq_25838839</author><pubDate>Mon, 05 Aug 2024 15:45:51 +0800</pubDate><description><![CDATA[选择哪种方法取决于你的具体需求，例如是否需要修改原数组，以及是否需要保持代码的简洁性。如果你需要保持原数组不变，使用 slice().reverse() 是一个好的选择。如果你不想修改原数组，可以先使用 slice() 方法创建一个数组的副本，然后调用 reverse()。reverse() 是数组的一个内置方法，它会原地修改数组，将数组中的元素顺序颠倒。reduceRight() 方法从数组的末尾开始，可以用于构建一个倒序的数组。使用 ES6 的解构赋值，可以创建一个倒序的数组。,转载请保留本文地址！]]></description><category></category></item><item><title><![CDATA[uniapp分包教程，分包加载的好处有哪些？]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/140928644</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/140928644</guid><author>qq_25838839</author><pubDate>Mon, 05 Aug 2024 15:39:45 +0800</pubDate><description><![CDATA[我们在开发系统的时候，如果没有注意这点，当项目越来越复杂的时候，就会发现编译的时候报错，或者编译的时候一直通不过微信开发者工具，速度非常慢，甚至有时候会直接导致开发者工具崩溃。实现分包加载，只需要配置pages.json文件即可，分包加载后，第一次打开小程序，微信首先加载主包代码，当点击分包页面时，才会加载分包代码，大大提高了小程序打开速度。uniapp分包加载的好处，在使用分包功能时,可以将主包中的一些不常用的页面或组件放到分包中,这样可以减少主包的体积,加快应用的启动速度和加载速度。]]></description><category></category></item><item><title><![CDATA[iframe传递参数，两个iframe之间传值方法]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/140552779</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/140552779</guid><author>qq_25838839</author><pubDate>Fri, 19 Jul 2024 16:10:40 +0800</pubDate><description><![CDATA[iframe传递参数，Vue项目中使用iframe及传值，最近做了一个这样的业务处理，在uniapp 项目中使用第三方页面，需要在当前的页面中把一些数据传给第三方，第三方处理后返回一些数据给当前页面，后续其他的操作会用到当前的数据。这样就基本完成了iframe 父子页面之间的数据交互，上面只是个简单的示例，遇到了就写的记录下，具体业务开发的时候还是需要处理下，比如传递参数的时候可以把参数加密下，如果传递的参数比较敏感直接编码发送不好，常用的aes或者base64等，或者可以多层加密。,转载请保留本文地址！]]></description><category></category></item><item><title><![CDATA[uniapp封装请求拦截器，封装请求拦截和响应拦截的方法]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/140552685</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/140552685</guid><author>qq_25838839</author><pubDate>Fri, 19 Jul 2024 16:08:16 +0800</pubDate><description><![CDATA[可以看到我们每次请求数据的时候都需要按照这个格式来请求,这样会使代码冗余并且难以维护,所以就需要将uni.request进行二次封装。首先我们先看一下uni官方给开发者提供的uni.request用来网络请求的api。可以看到成功打印出来,然后就可以将公共的的方法封装在响应拦截器中。我们先在request中调用 beforeRequest。1. 新建一个request.js文件。uni.request 请求方式。2. 在响应拦截器中封装公共方法。,转载请保留本文地址！]]></description><category></category></item><item><title><![CDATA[iframe的优缺点及改进方法(有实例代码)]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/125066564</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/125066564</guid><author>qq_25838839</author><pubDate>Tue, 31 May 2022 15:29:41 +0800</pubDate><description><![CDATA[iframe是用来内嵌网页的，使用起来很方便，但也有优缺点，比如iframe能原封不动地把嵌入的网页展现出来，如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改，方便快捷，iframe缺点会阻塞主页面的Onload事件，但有针对iframe的优缺点及改进方法。



一、iframe内嵌网页使用实例代码：


&lt;iframe width="100%" height="100%" frameborder="0" scrolling="auto" allow.]]></description><category></category></item><item><title><![CDATA[js宏任务和微任务有哪些？执行是怎样的？]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/125066383</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/125066383</guid><author>qq_25838839</author><pubDate>Tue, 31 May 2022 15:23:59 +0800</pubDate><description><![CDATA[js宏任务是什么？当前调用栈中执行的代码成为宏任务。js微任务是什么？当前宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。



一、js宏任务和微任务分别有哪些？



1、js宏任务有：&lt;script&gt;整体代码、setTimeout、setInterval、setImmediate、Ajax、DOM事件

2、js微任务有：process.next.]]></description><category></category></item><item><title><![CDATA[移动端文字向左无缝滚动特效(原生纯js哦)]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/125066115</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/125066115</guid><author>qq_25838839</author><pubDate>Tue, 31 May 2022 15:15:37 +0800</pubDate><description><![CDATA[手机页面移动端，需求是文字向左无缝滚动marquee特效，用了几个都不行，达不到需求效果，有小bug，最后用了下面的这个原生纯js文字向左无缝滚动marquee特效，我测试了没有问题，可以正常使用它，原生纯js代码少，实用性强，具体看下代码。

1.先看效果演示：



2.原生纯js代码如下：


var speed=10; //数字越大文字滚动速度越慢

var tab=document.getElementById("demo");

var tab1=document.getElementById(]]></description><category></category></item><item><title><![CDATA[css3伪元素有哪些(两个必会的伪元素)]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/124419342</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/124419342</guid><author>qq_25838839</author><pubDate>Tue, 26 Apr 2022 08:48:17 +0800</pubDate><description><![CDATA[一.css3伪元素是什么？

css3伪元素用于向某些选择器设置特殊效果。已存在元素是指DOM中存在的，伪元素则是虚拟的一种，样式也是给这个虚拟的元素使用的。

比如伪元素 :before和:after，这两个非常常用前端必会，用于在css渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。这些添加的内容不会出现在DOM中，仅仅是在css渲染层中加入。


&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta]]></description><category></category></item><item><title><![CDATA[css3有哪些新特性?有哪些改进]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/124101376</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/124101376</guid><author>qq_25838839</author><pubDate>Mon, 11 Apr 2022 15:59:58 +0800</pubDate><description><![CDATA[1.新增选择器

p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

2.新增伪元素

::before和::after

3.弹性盒模型

display:flex;

4.多列布局

column-count: 5;

5.媒体查询

@media (max-width: 480px) {.box: {column-count: 1;}}

6.个性化字体

@font-face{font-family: BorderWeb;src:url(BOR...]]></description><category></category></item><item><title><![CDATA[css下拉菜单代码（用纯css实现下拉菜单）]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/124093843</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/124093843</guid><author>qq_25838839</author><pubDate>Mon, 11 Apr 2022 11:04:13 +0800</pubDate><description><![CDATA[用纯css代码写一个css下拉菜单，二级菜单opacity默认是0，鼠标在一级菜单hover时opacity就是1，opacity从0到1有一个transition过渡时间1秒钟，就实现了css下拉菜单动画缓慢出现效果，具体看下面例子代码。





css下拉菜单代码：








&lt;style&gt;

ul {

list-style: none;

margin: 0;

padding: 0;

}



ul li a {

display: block;

text-decorat.]]></description><category></category></item><item><title><![CDATA[js截取字符串的方法（介绍3种常用的）]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/121898651</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/121898651</guid><author>qq_25838839</author><pubDate>Mon, 13 Dec 2021 09:53:17 +0800</pubDate><description><![CDATA[js截取字符串常用的字符截取函数有slice、substring和substr这3个，我们前端人必会这3种方法，我们将从这3个函数出发，看看在js中，这些函数是如何通过js截取字符串的。



1.slice

说明：该slice(start, end)方法返回start和end索引之间的字符串部分。slice像substring。

第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个]]></description><category></category></item><item><title><![CDATA[js时间格式化]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/103840183</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/103840183</guid><author>qq_25838839</author><pubDate>Sun, 05 Jan 2020 09:22:05 +0800</pubDate><description><![CDATA[有时候项目中需要用到时间，但返回的是毫秒数值，这样看着就很不方便，所以我们需要用js时间格式化，达到我们项目需求，让用户看时间一看就懂。时间格式化可以前端处理，也可以后端，下面这种js时间格式化方法，很简单很实用。



代码如下：


			1

			2

			3

			4

			5

			6

			7

			8

			9

			10

			11

			12...]]></description><category></category></item><item><title><![CDATA[前端开发写代码哪个软件更好用？]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/103045068</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/103045068</guid><author>qq_25838839</author><pubDate>Wed, 13 Nov 2019 11:00:09 +0800</pubDate><description><![CDATA[群里的朋友，经常问到web前端开发写代码用那个软件好？今天在这里统一回答下，主流的web前端开发写代码的软件有这些Webstorm、Vscode、Sublime Text、HBuilder、Dreamweaver、notepad++、editplus等，做前端这么多年了，下面谈下我的使用感受吧。



1.WebStorm【推荐】

   WebStorm 是jetbrai...]]></description><category></category></item><item><title><![CDATA[js数组怎么删除指定元素？]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/103044940</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/103044940</guid><author>qq_25838839</author><pubDate>Wed, 13 Nov 2019 10:56:01 +0800</pubDate><description><![CDATA[js数组是js部分非常重要的知识，有时我们有这么个需求js数组删除指定元素，先定义一个函数来获取删除指定元素索引值，然后用js数组删除的方法，来删除指定元素即可，就两步不难，很简单。



1、JS的数组对象定义一个函数，用于查找指定的元素在数组中的位置，也就是索引值，代码如下：


			1

			2

			3

			4

			5

			6
			
			
			Array....]]></description><category></category></item><item><title><![CDATA[css垂直居中布局的方法]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/101617589</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/101617589</guid><author>qq_25838839</author><pubDate>Sat, 28 Sep 2019 15:14:11 +0800</pubDate><description><![CDATA[上篇文章说到常见css布局水平居中的方法，前端开发css布局还有垂直居中，也是很常见的布局方法，本文分享3种垂直居中布局的方法，table-cell + vertical-align、absolute + transform、flex + align-items，很常见，很实用。



垂直居中布局方法一：table-cell + vertical-align


			1

			2

	...]]></description><category></category></item><item><title><![CDATA[前端开发者的福音：WebKit类浏览器将不再使用CSS属性前缀]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/96476392</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/96476392</guid><author>qq_25838839</author><pubDate>Fri, 19 Jul 2019 10:54:30 +0800</pubDate><description><![CDATA[今天的移动平台被基于WebKit的浏览器统治着，WebKit使用了大量非标准的-webkit前缀的CSS属性或特性，这些CSS属性被Web开发者广泛使用，导致的结果是市场占有率较小的浏览器不得不支持这些非标准特性。 WebKit前缀属性在浏览器开发商中间引发了争议，现在官方博客也承认WebKit前缀属性造成的伤害超过好处，宣布在实现实验性功能时不再使用前缀，而是使用运行时标记。


...]]></description><category></category></item><item><title><![CDATA[背景透明兼容各大浏览器的方法]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/96476238</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/96476238</guid><author>qq_25838839</author><pubDate>Fri, 19 Jul 2019 10:49:45 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta...]]></description><category></category></item><item><title><![CDATA[6种方法实现css布局水平居中]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/94434517</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/94434517</guid><author>qq_25838839</author><pubDate>Tue, 02 Jul 2019 10:58:05 +0800</pubDate><description><![CDATA[说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。



方法一：margin + width


			1

			2

			3

			4

			5

			6

			7

			8

			9

			10

			11

	...]]></description><category></category></item><item><title><![CDATA[Vue 3.0马上要来了你准备好了吗？]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/90764285</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/90764285</guid><author>qq_25838839</author><pubDate>Tue, 04 Jun 2019 10:25:38 +0800</pubDate><description><![CDATA[尤大大大神在Vue.js 伦敦大会上简要介绍了 Vue 下一个主要版本要发布的内容，不久前，尤大大在 medium 个人博客上发布了 Vue 3.0 的开发路线，已经有一段时间了，不出意外2019年年底会正式发布3.0版本。掐指算一算日子，Vue3.0离我们不远了，想想就害怕，扑通跪下了，跪求尤大大别更新了，学不动了。



我们先看下 Vue 3.0 会有哪些重大变化：

...]]></description><category></category></item><item><title><![CDATA[详解CSS3中的border-radius样式]]></title><link>https://blog.youkuaiyun.com/qq_25838839/article/details/90437916</link><guid>https://blog.youkuaiyun.com/qq_25838839/article/details/90437916</guid><author>qq_25838839</author><pubDate>Wed, 22 May 2019 09:52:33 +0800</pubDate><description><![CDATA[border-radius是CSS3中诞生的新样式，它可以使边框的边角变成弧形和圆角。以往制作按钮、弧形边框时需要使用背景切图的方式实现；不但臃肿，而且还容易产生布局BUG，不适于自适应框架的书写。

1.首先介绍一下语法：

border-radius：[&lt;length&gt;|&lt;percentage&gt;]{1,4} [ / [&lt;length&gt;|&lt;...]]></description><category></category></item></channel></rss>