<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[FieeSingle的博客]]></title><description><![CDATA[一个学前端的小白]]></description><link>https://blog.youkuaiyun.com/FieeSingle</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; FieeSingle]]></copyright><item><title><![CDATA[2021-11-16]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/121360672</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/121360672</guid><author>FieeSingle</author><pubDate>Tue, 16 Nov 2021 17:15:45 +0800</pubDate><description><![CDATA[//设置cookie
      setCookie(c_name, c_pwd, exdays) {
          var exdate = new Date(); //获取时间
          exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
          //字符串拼接cookie
          window.document.cookie = "userName" + "=" + c]]></description><category></category></item><item><title><![CDATA[vue vite特点与优缺点]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120207524</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120207524</guid><author>FieeSingle</author><pubDate>Thu, 09 Sep 2021 19:01:46 +0800</pubDate><description><![CDATA[Vite 的特点：
和 Webpack相比，Vite 具有以下特点：
快速的冷启动，不需要等待打包
即时的热模块更新
真正的按需编译，不用等待整个项目编译完成
由于完全跳过了打包这个概念，Vite的出现大大的撼动了Webpack的地位，且真正做到了服务器随起随用。
Vite 优点 Vite 缺点




Vite 优点
Vite 缺点




开发服务器比 Webpack 快 10-100 倍
只能针对现代浏览器（ES2015+）


将 code-splitting 作为优先事项
与 CommonJS 模]]></description><category></category></item><item><title><![CDATA[前端安全问题]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120194737</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120194737</guid><author>FieeSingle</author><pubDate>Thu, 09 Sep 2021 09:51:59 +0800</pubDate><description><![CDATA[前端安全问题
XSS: 跨站脚本攻击
在用户可以输入的地方，并且将作为代码编译时，攻击者可以通过输入一个脚本地址的方式进行对页面注入脚本攻击。解决方式: 任何用户输入的地方都不要相信，对用户输入内容进行转义，如 &lt; 使用转义字符串 &lt; 代替。
CSRF: 跨站伪装请求攻击
在用户已登录的情况下，伪装用户的身份发起请求，进行相关攻击。解决方式，确认用户的身份。比较好理解的解决方式是: 二次确认，通过用户的二次确认确认请求方为真实用户。然后就是 X-Requested-With 请求标志，通过该请求]]></description><category></category></item><item><title><![CDATA[观察者模式,适配器模式,装饰器]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120194386</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120194386</guid><author>FieeSingle</author><pubDate>Thu, 09 Sep 2021 09:39:30 +0800</pubDate><description><![CDATA[观察者模式
观察者模式：定义对象之间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。观察者模式的别名包括发布-订阅模式、模型-视图模式、源-监听器模式或从属者模式。观察者模式是一种对象行为型模式。
适配器模式
适配器模式 ：将一个接口转换成客户希望的另一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式的别名是包装器模式，是一种结构型设计模式。
装饰器
装饰器：指在不改变现有对象结构的情况下，动态地给该对象增加一些职责（即增加其额外功能）]]></description><category></category></item><item><title><![CDATA[请求拦截和响应拦截]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120186804</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120186804</guid><author>FieeSingle</author><pubDate>Wed, 08 Sep 2021 19:12:47 +0800</pubDate><description><![CDATA[拦截器分为请求拦截和响应拦截(前提是你的请求头已经完成了)
请求拦截
	首先我这边这个请求头我用const给他定义一下就叫Service吧
	其次给他绑定interceptors.request.use()这个方法
	接着因为这个方法有个箭头函数作为参数
	再给其一个config做形参将vuex当中定义好的方法拿过来
	使用Store.dispatch调用定义好的方法
	返回config

响应拦截
	以相同的道理给Service绑定一个interceptors.response.use()方法
	这时候他]]></description><category></category></item><item><title><![CDATA[前端工程化有哪些？]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120186765</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120186765</guid><author>FieeSingle</author><pubDate>Wed, 08 Sep 2021 19:09:15 +0800</pubDate><description><![CDATA[前端工程化有哪些
模块化
模块化只是在文件层面上，对代码或资源的拆分；
组件化
而组件化是在设计层面上，对UI（用户界面）的拆分。
规范化

目录结构的制定
编码规范
前后端接口规范
文档规范
组件管理
Git分支管理
Commit描述规范
定期CodeReview
视觉图标规范

自动化
自动化测试
持续集成
自动化构建
自动化部署

...]]></description><category></category></item><item><title><![CDATA[作用域插槽和v-slot指令]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120186664</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120186664</guid><author>FieeSingle</author><pubDate>Wed, 08 Sep 2021 19:04:04 +0800</pubDate><description><![CDATA[vue2.6插槽更新v-slot用法
v-slot在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容.
作用域插槽（slot-scope）


在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。


在组件使用时，通过slot-scope=“scope”,接收组件中slot]]></description><category></category></item><item><title><![CDATA[webpack常用loader]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120151114</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120151114</guid><author>FieeSingle</author><pubDate>Tue, 07 Sep 2021 09:33:16 +0800</pubDate><description><![CDATA[1.sass-loader转化sass为css文件，并且包一层module.exports成为一个js module。style-loader将创建一个style标签将css文件嵌入到html中。css-loader则处理其中的@import和url()。
2.vue-loader、coffee-loader、babel-loader等可以将特定文件格式转成js模块、将其他语言转化为js语言和编译下一代js语言
3.file-loader、url-loader等可以处理资源，file-loader可以复制和]]></description><category></category></item><item><title><![CDATA[单页面（SPA）和 多页面]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120074736</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120074736</guid><author>FieeSingle</author><pubDate>Fri, 03 Sep 2021 09:38:58 +0800</pubDate><description><![CDATA[单页面（SPA）
优点：加载速度快,内容的改变不需要重新加载整个页面,前后端分离,视觉效果好
缺点：页面初次加载比较慢
多页面：
优点:对SEO友好
缺点：页面切换速度慢,每次切换页面需要选择性的重新加载公共资源

...]]></description><category></category></item><item><title><![CDATA[本地存储和离线缓存]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120074688</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120074688</guid><author>FieeSingle</author><pubDate>Fri, 03 Sep 2021 09:37:34 +0800</pubDate><description><![CDATA[本地存储和离线缓存
离线缓存:
在没有网的情况下可以进行访问
离线缓存是针对整个应用，浏览器缓存是单个文件
离线缓存断网了还是可以打开页面，浏览器缓存不行
离线缓存可以主动通知浏览器更新资源
相同：
本地存储与离线缓存都是为了方便网页的加载，提高用户体验等。
不同：
本地存储一般存储的都是数据，而离线缓存一般存储的是网页等。

...]]></description><category></category></item><item><title><![CDATA[输入一串url发生了什么事]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120054261</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120054261</guid><author>FieeSingle</author><pubDate>Thu, 02 Sep 2021 09:43:24 +0800</pubDate><description><![CDATA[DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束


]]></description><category></category></item><item><title><![CDATA[做过哪些前端优化]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120054190</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120054190</guid><author>FieeSingle</author><pubDate>Thu, 02 Sep 2021 09:40:39 +0800</pubDate><description><![CDATA[1、节流、防抖
2、重绘、回流
3、对代码进行压缩，删除不必要的空格
4、图片的懒加载
5、js是阻塞的 合理的使用defer和async
6、减少对http的请求
7、减少 DOM 元素数量
8、css代码放在上面，js放在下面

...]]></description><category></category></item><item><title><![CDATA[git常用指令]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120054080</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120054080</guid><author>FieeSingle</author><pubDate>Thu, 02 Sep 2021 09:35:57 +0800</pubDate><description><![CDATA[git branch 查看本地所有分支
git status 查看当前状态 
git commit 提交 
git branch -a 查看所有的分支
git branch -r 查看本地所有分支
git commit -am "init" 提交并且加注释 
git remote add origin git@192.168.1.119:ndshow
git push origin master 将文件给推到服务器上 
git remote show origin 显示远程库origin里的资源 
git ]]></description><category></category></item><item><title><![CDATA[commit常用类型]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120054050</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120054050</guid><author>FieeSingle</author><pubDate>Thu, 02 Sep 2021 09:34:39 +0800</pubDate><description><![CDATA[commit常用类型**
feat:: 类型为 feat 的提交表示在代码库中新增了一个功能（这和语义化版本中的 MINOR 相对应）。
fix:：类型为 fix 的 提交表示在代码库中修复了一个 bug （这和语义化版本中的 PATCH 相对应）。
docs:: 只是更改文档。
style:: 不影响代码含义的变化（空白、格式化、缺少分号等）。
refactor:: 代码重构，既不修复错误也不添加功能。
perf:: 改进性能的代码更改。
test:: 添加确实测试或更正现有的测试。
build:: 影响]]></description><category></category></item><item><title><![CDATA[IIFE是什么？]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120054004</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120054004</guid><author>FieeSingle</author><pubDate>Thu, 02 Sep 2021 09:32:49 +0800</pubDate><description><![CDATA[中文名：自执行函数
(function(形参){ alert(‘哈哈’) })(实参)
作用？
1、隐藏实现
2、不会污染外部（全局）命名空间
3、用它来编写js模块

]]></description><category></category></item><item><title><![CDATA[vue路由 hash 模式和 history 模式实现原理分别是什么，他们的区别是什么？]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120053865</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120053865</guid><author>FieeSingle</author><pubDate>Thu, 02 Sep 2021 09:27:04 +0800</pubDate><description><![CDATA[vue路由 hash 模式和 history 模式实现原理分别是什么，他们的区别是什么？
hash 模式：
#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面
通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。
history 模式：
history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，]]></description><category></category></item><item><title><![CDATA[H5和C3的新特性]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120053703</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120053703</guid><author>FieeSingle</author><pubDate>Thu, 02 Sep 2021 09:20:33 +0800</pubDate><description><![CDATA[/H5
1.新增了语义化标签,比如 header头部标签,nav导航标签,footer底部标签,section盒子容器等等
2.新增了视频和音频标签 video 和 audio
3.新增了本地存储 localstorage(永久性的存储,页面关闭了都还在) sessionstorage(临时性存储,浏览器关闭就没了)
4.新增了canvas画布
5.新增了表单属性, 比如time, date等
/C3
颜色: rgba()
过渡: transition
动画: @keyframes,animation
2D]]></description><category></category></item><item><title><![CDATA[开发模式-迭代模型]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120053625</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120053625</guid><author>FieeSingle</author><pubDate>Thu, 02 Sep 2021 09:18:08 +0800</pubDate><description><![CDATA[迭代模型（Stagewise-Model）（迭代增量式开发/迭代进化式开发）
在迭代式开发方法中，整个开发工作被组织为一系列的短小的、固定长度（如3周）的小项目，被称为一系列的迭代。每一次迭代都包括了需求分析、设计、实现与测试。采用这种方法，开发工作可以在需求被完整地确定之前启动，并在一次迭代中完成系统的一部分功能或业务逻辑的开发工作。再通过客户的反馈来细化需求，并开始新一轮的迭代。
迭代和版本的区别，可理解如下：迭代一般指某版本的生产过程，包括从需求分析到测试完成；版本一般指某阶段软件开发的结果，一个可交]]></description><category></category></item><item><title><![CDATA[CSS三大特性]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120053497</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120053497</guid><author>FieeSingle</author><pubDate>Thu, 02 Sep 2021 09:11:42 +0800</pubDate><description><![CDATA[CSS的三大特性:继承性，层叠性，优先级
1.继承性: 子元素可以继承祖先元素中的部分样式
2.层叠性:通过不同的选择器可以多次指向同一个元素，如果设置的属性不一样则所有的效果都生效，如果作用相同的属性，则根据选择器的优先级决定
3.！important&gt;行内样式&gt;id选择器&gt;类选择器&gt;标签选择器&gt;默认样式
权重可叠加

...]]></description><category></category></item><item><title><![CDATA[垃圾回收机制的标记清除引用计数是什么？内存如何管理？]]></title><link>https://blog.youkuaiyun.com/FieeSingle/article/details/120053294</link><guid>https://blog.youkuaiyun.com/FieeSingle/article/details/120053294</guid><author>FieeSingle</author><pubDate>Thu, 02 Sep 2021 09:03:01 +0800</pubDate><description><![CDATA[标记清除
标记清除主要是js的常用垃圾回收方式
当变量进入环境（例如函数中申明一个变量）时，将这个变量标记为“进入变量”。从逻辑上讲，永远不能释放进入环境所占的内存，因为我们在这个环境中可能随时会用到它们。当变量离开环境时，则其标记为“离开环境”；
引用计数
该方法的原理就是跟踪记录每个值被引用的次数，如果被引用的次数为0时，就代表被清除。
内存管理
内存生命周期
（1）得到小内存生命空间，得到他的使用权，
（2）存储数据，可以反复进行操作
（3）释放小内存空间
释放内存
（1）局部变量：函数执行完自动释放]]></description><category></category></item></channel></rss>