<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[D321xiaoding的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/D321xiaoding</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; D321xiaoding]]></copyright><item><title><![CDATA[vue基础知识总结及测试遇到的前端bug分析]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/123936047</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/123936047</guid><author>D321xiaoding</author><pubDate>Sun, 03 Apr 2022 13:19:35 +0800</pubDate><description><![CDATA[vue基础知识总结、测试遇到的前端bug分析原因]]></description><category></category></item><item><title><![CDATA[前端项目首屏加载优化--页面初始进来加载速度慢的解决方案]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/123806224</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/123806224</guid><author>D321xiaoding</author><pubDate>Mon, 28 Mar 2022 21:24:57 +0800</pubDate><description><![CDATA[前端页面初始进来加载速度慢的解决方案]]></description><category></category></item><item><title><![CDATA[vue自定义指令-对输入框数字的限制，输入框的数字前面不能输入多余的0，例如00123， 00.12类型的数字]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/123739265</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/123739265</guid><author>D321xiaoding</author><pubDate>Fri, 25 Mar 2022 16:35:59 +0800</pubDate><description><![CDATA[限制数字前面不能输入多余的0，例如00123    00.12
import Vue from 'vue'
Vue.directive('number', {
  bind(el) {
    el.onkeyup = () =&gt; {
      if (el.value) {
        if (parseInt(el.value) == parseFloat(el.value) &amp;&amp; !el.value.includes('.')) {
          if (paeseI]]></description><category></category></item><item><title><![CDATA[nginx 部署前端项目，不缓存html文件，项目发版后，不用手动刷新页面]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/123735986</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/123735986</guid><author>D321xiaoding</author><pubDate>Fri, 25 Mar 2022 15:18:07 +0800</pubDate><description><![CDATA[nginx 部署前端项目，不缓存html文件，项目发版后，不用手动刷新页面
location / {

 expires 1h;
 root /home/test/vue/dist/;
 index index.html index.htm;

 if ($request_filename ~* .*\.(htm|html)$)  ## 配置页面不缓存
 {
     add_header Cache-Control "private, no-store, no-cache, must-revalidate]]></description><category></category></item><item><title><![CDATA[Vue开发规范细节]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/113783190</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/113783190</guid><author>D321xiaoding</author><pubDate>Wed, 10 Feb 2021 16:02:16 +0800</pubDate><description><![CDATA[Vue开发规范细节
一、必要的
1、组件名为多个单词
组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。
例如：
Vue.component(‘todo-item’, {
// …
})
export default { name: ‘TodoItem’, // … }
2、组件数据
组件的 data 必须是一个函数。
当在组件中使用 data property 的时候 ]]></description><category></category></item><item><title><![CDATA[Vue 更改keep-alive源码，满足条件性缓存（多个页签之间切换缓存，关闭页签重新打开不缓存）]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/113743558</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/113743558</guid><author>D321xiaoding</author><pubDate>Sun, 07 Feb 2021 16:47:31 +0800</pubDate><description><![CDATA[应用场景
当系统打开多个页签时，多个页签之间切换去做缓存，关闭页签重新打开该页签不缓存。
解决方案
更改 vue keep-alive源码
1、制造一个唯一的key值，在路由参数里面加一个时间戳
1.1 因keep-alive 使用组件名称name值作为唯一的key值去做条件缓存，但是该项目因书写不规范导致组件的name值不是唯一的。在路由的参数
    里面增加一个时间戳

        // 当点击系统左侧菜单的时候加时间戳

         select(url) {

             ]]></description><category></category></item><item><title><![CDATA[Vue：keep-alive的用法总结]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/109628090</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/109628090</guid><author>D321xiaoding</author><pubDate>Wed, 11 Nov 2020 18:07:43 +0800</pubDate><description><![CDATA[什么时候用到keep-alive
如果没有缓存，每点击一次导航，内容区就会创建一个组件，该组件会经历整个生命周期，每点击一次，就会创建一个组件，比较浪费性能，
这时，我们就要考虑到是否能将点击过的已创建的组件进行缓存，当再次点击已访问过的组件时，这时，就会从缓存中获取该组件，而不会重新创建，这就用到keep-alive
Props：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多]]></description><category></category></item><item><title><![CDATA[Vue混入mixins的简单用法]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/108887665</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/108887665</guid><author>D321xiaoding</author><pubDate>Wed, 30 Sep 2020 16:58:13 +0800</pubDate><description><![CDATA[比如说，你有一个方法好多文件都会用到，但你不想在各个文件中都写这个方法，这个时候你就可以用混入
建一个独立的专门写混入的文件夹mixins
在mixins文件及里面写一个index.js文件
index.js文件中写入你的混入。
一个index.js中可以写多个混入，
const formatterNum = {
	methods:{
		formatterNum(num) {
			//正常写你的方法
		}
	}
}

//如果你想在这个文件中再写另一个混入，那就再定义一个
const formatte]]></description><category></category></item><item><title><![CDATA[vue自定义指令：金额保留两位小数并且每三位逗号分割]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/108884687</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/108884687</guid><author>D321xiaoding</author><pubDate>Wed, 30 Sep 2020 16:11:40 +0800</pubDate><description><![CDATA[vue自定义指令：金额保留两位小数并且每三位逗号分割
可以专门建一个filter.js文件，统一做vue的一些自定义指令，方便以后维护。
建的filter.js在main.js中引用。当然你直接在main.js里写也没有问题，只是后期不好维护。这里使用filter.js文件
首先在filter.js中引入Vue
import Vue from 'vue'
//保留两位小数并用逗号分隔
Vue.filter('sumFilter', function(num) {
	if(num) {
		if(!isNaN]]></description><category></category></item><item><title><![CDATA[vue 子组件会接收不同的数据类型，数据设置默认值的写法]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/104516993</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/104516993</guid><author>D321xiaoding</author><pubDate>Wed, 26 Feb 2020 14:52:05 +0800</pubDate><description><![CDATA[vue prop 会接收不同的数据类型，这里列出了 常用的数据类型的设置默认值的写法。
其中包含： Number, String, Boolean, Array,  Function, Object
refAge: {
  type: Number,
  default: 0
},

refName: {
  type: String,
  default: ''
},

hotDataLoadi...]]></description><category></category></item><item><title><![CDATA[js异步执行顺序]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/104516481</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/104516481</guid><author>D321xiaoding</author><pubDate>Wed, 26 Feb 2020 14:29:19 +0800</pubDate><description><![CDATA[将同步代码放入setTimeout中，变成异步，则和ajax中的回调同为异步，则按照异步的方式来排列执行顺序。
由此引入异步之间的执行顺序问题！
首先常见的异步一般有：ajax可以异步也可同步、回调、setTimeout系列、事件绑定。  而es6中的新增的promise、async/await。
按照js的执行顺序，先执行同步，再执行异步。那么上面这些异步的执行之内该如何执行呢？
首先了解一下宏...]]></description><category></category></item><item><title><![CDATA[前端性能优化处理方法---懒加载]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/84869000</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/84869000</guid><author>D321xiaoding</author><pubDate>Fri, 07 Dec 2018 08:26:33 +0800</pubDate><description><![CDATA[懒加载
1.什么是懒加载
懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。
2.为什么要用懒加载
能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图...]]></description><category></category></item><item><title><![CDATA[JS 的线程、事件循环、任务队列简介]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/84798137</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/84798137</guid><author>D321xiaoding</author><pubDate>Tue, 04 Dec 2018 20:23:44 +0800</pubDate><description><![CDATA[JS 是单线程的，但是却能执行异步任务，这主要是因为 JS 中存在事件循环（Event Loop）和任务队列（Task Queue）
事件循环：JS 会创建一个类似于 while (true) 的循环，每执行一次循环体的过程称之为 Tick。每次 Tick 的过程就是查看是否有待处理事件，如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中，也就是每次 Tic...]]></description><category></category></item><item><title><![CDATA[vue Router 路由守卫之beforeEach]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/84614216</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/84614216</guid><author>D321xiaoding</author><pubDate>Thu, 29 Nov 2018 09:38:28 +0800</pubDate><description><![CDATA[首先使用 router.beforeEach 注册一个全局前置守卫：
const router = new VueRouter({ ... })
 
router.beforeEach((to, from, next) =&amp;gt; {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫...]]></description><category></category></item><item><title><![CDATA[jquery ajax，axios，fetch优缺点及它们的区别]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/84568254</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/84568254</guid><author>D321xiaoding</author><pubDate>Tue, 27 Nov 2018 16:31:25 +0800</pubDate><description><![CDATA[jquery ajax
jquery ajax实例
$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

$.ajax的参数描述
url	必需。规定把请求发送到哪个 URL。
data...]]></description><category></category></item><item><title><![CDATA[localStorage、sessionStorage、Cookie的区别和共同点]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/84565525</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/84565525</guid><author>D321xiaoding</author><pubDate>Tue, 27 Nov 2018 14:36:12 +0800</pubDate><description><![CDATA[webstorage
webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。
localStorage
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
sessionSt...]]></description><category></category></item><item><title><![CDATA[localStorage使用实例-进入显示广告，点击关闭之后，刷新网页不再出现]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/84565391</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/84565391</guid><author>D321xiaoding</author><pubDate>Tue, 27 Nov 2018 14:30:03 +0800</pubDate><description><![CDATA[仿一下京东官网顶部的广告关闭，效果为第一次进入官网会出现广告，然后点击关闭，刷新网页不会再显示广告，但是当清除localStorage存入的数据，刷新网页会再显示广告。
html代码

&amp;lt;div class=&quot;header&quot;&amp;gt;
    &amp;lt;div class=&quot;header-a&quot;&amp;gt;
        &amp;lt;a href=&quot;&quot;&amp;gt;&amp;lt;/a&amp;gt;
     ]]></description><category></category></item><item><title><![CDATA[基于nodejs爬虫]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/83720232</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/83720232</guid><author>D321xiaoding</author><pubDate>Sun, 04 Nov 2018 20:59:34 +0800</pubDate><description><![CDATA[爬接口数据
var https = require('https');
https.get('https://api.readhub.cn/topic?lastCursor=76823&amp;amp;pageSize=20',function(res,req){
var html='';
    res.on('data',function(data){
        html+=data;
    ...]]></description><category></category></item><item><title><![CDATA[nodejs  express 框架  上传图片，上传头像问题]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/83659132</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/83659132</guid><author>D321xiaoding</author><pubDate>Fri, 02 Nov 2018 17:52:33 +0800</pubDate><description><![CDATA[上传图片总结：
必须  安装’multer’模块
Npm I multer –S（手动输入小写）
第一步
App.js 里面 挂载index路由之前写入
app.use(express.static(path.join(__dirname, 'public')));
var multer = require('multer'); //删除图片临时放在'/tmp/'
app.use(multer({...]]></description><category></category></item><item><title><![CDATA[js继承 - 构造函数继承，call apply改变this指向  原型链继承，混合继承]]></title><link>https://blog.youkuaiyun.com/D321xiaoding/article/details/83245573</link><guid>https://blog.youkuaiyun.com/D321xiaoding/article/details/83245573</guid><author>D321xiaoding</author><pubDate>Sun, 21 Oct 2018 21:20:40 +0800</pubDate><description><![CDATA[1、构造函数继承
function Person(name,age){
		this.name = name;
			this.age = age;
			this.run = function(){
				console.log('跑....');
			}
		}
		function YPerson(name,age,color){
			this.method = Person;//th...]]></description><category></category></item></channel></rss>