<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ruantianqing的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ruantianqing</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ruantianqing]]></copyright><item><title><![CDATA[移动端适配(转载)]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/121463160</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/121463160</guid><author>ruantianqing</author><pubDate>Mon, 22 Nov 2021 00:14:38 +0800</pubDate><description><![CDATA[移动端适配的重新思考
1 移动端适配就是用rem或vw?
并不是所有场景都适合用*rem或vw*进行适配。


vw和rem适配的本质是等比例缩放，让页面在不同屏幕尺寸下有类似于矢量图片缩放的效果，保证了页面元素之间的尺寸缩放比例和位置。


这两种适配方案适合视觉组件种类比较多，视觉设计对元素位置的相对关系依赖较强的移动端页面，基本上大部分页面都可以用着两种方案进行适配。


但对于文本内容较多，我们希望引导用户沉浸在更多的内容而不是更大的内容的，这种等比例缩放的方案并不能满足要求，我推荐直接使用px结合]]></description><category></category></item><item><title><![CDATA[typescript]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/115363626</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/115363626</guid><author>ruantianqing</author><pubDate>Wed, 31 Mar 2021 23:03:31 +0800</pubDate><description><![CDATA[编译TS
安装tsc指令：npm install typescript -g
	安装完成，查看版本号：tsc -v
在开发目录中，执行"tsc 文件名"指令，即可编译ts文件
监听并发布
	1 通过tsc -init创建tsconfig,json配置文件
		outDir定义js文件发布位置
	2 执行tsc -w监听并发布文件
注：后面会使用工程化工具来自动化的编译ES6与TS(webpack)

数据类型
数据类型
	在ts中所有的数据都要指明类型
	在js中食物数据类型，ts中都支持，并且还扩展了:a]]></description><category></category></item><item><title><![CDATA[前端面试题]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114027097</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114027097</guid><author>ruantianqing</author><pubDate>Wed, 24 Feb 2021 16:37:01 +0800</pubDate><description><![CDATA[开放题目

必考：你遇到最难的问题是怎样的？
你在团队的突出贡献是什么？
最近在关注什么新技术
有没有看什么源码，看了后有什么记忆深刻的地方，有什么收获

刁钻题目

代码
代码
(a ==1 &amp;&amp; a== 2 &amp;&amp; a==3) 可能为 true 吗？

超纲题

JS 垃圾回收机制
链接
链接
Eventloop 说一下
链接

个性化题目

PWA
echarts.js / d3.js
three.js
flutter
SSR


...]]></description><category></category></item><item><title><![CDATA[安全]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114027022</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114027022</guid><author>ruantianqing</author><pubDate>Wed, 24 Feb 2021 16:32:23 +0800</pubDate><description><![CDATA[必考：什么是 XSS？如何预防？

链接
2. 必考：什么是 CSRF？如何预防？
链接

]]></description><category></category></item><item><title><![CDATA[webpack面试题]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114026807</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114026807</guid><author>ruantianqing</author><pubDate>Wed, 24 Feb 2021 16:28:27 +0800</pubDate><description><![CDATA[必考：有哪些常见 loader 和 plugin，你用过哪些？


英语题：loader 和 plugin 的区别是什么？


必考：如何按需加载代码？


必考：如何提高构建速度？


转义出的文件过大怎么办？
上面五题请看这个不错的参考：https://zhuanlan.zhihu.com/p/44438844
链接



...]]></description><category></category></item><item><title><![CDATA[TypeScript]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114026658</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114026658</guid><author>ruantianqing</author><pubDate>Wed, 24 Feb 2021 16:26:29 +0800</pubDate><description><![CDATA[never 类型是什么？
链接
链接
链接


TypeScript 比起 JavaScript 有什么优点？


链接

]]></description><category></category></item><item><title><![CDATA[vue面试题]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114024448</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114024448</guid><author>ruantianqing</author><pubDate>Wed, 24 Feb 2021 16:07:13 +0800</pubDate><description><![CDATA[必考：watch 和 computed 和 methods 区别是什么？
链接


必考：Vue 有哪些生命周期钩子函数？分别有什么用？
链接


必考：Vue 如何实现组件间通信？
链接


必考：Vue 数据响应式怎么做到的？
链接


必考：Vue.set 是做什么用的？
链接
链接


Vuex 你怎么用的？
链接
链接
链接


VueRouter 你怎么用的？
链接


路由守卫是什么？
链接



...]]></description><category></category></item><item><title><![CDATA[vueRouter]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114025811</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114025811</guid><author>ruantianqing</author><pubDate>Wed, 24 Feb 2021 16:05:34 +0800</pubDate><description><![CDATA[前端路由的实现
由于hash的改变不会向服务器发送新的请求，因此我们可以监听hash的变化（通过hashchange事件），根据不同的hash渲染不同的页面（通过location.hash获取当前的hash值）
	这种不向服务器端发送请求，而实现切换页面的功能，就是单页面应用程序(SPA:single page application)
	单页面应用程序就是基于前端的hash路由实现的，特点是快

Vue路由
vue提供了路由模块：vue-router
使用路由分成六步
	第一步 安装路由：Vue.use方]]></description><category></category></item><item><title><![CDATA[vuex的]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114025553</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114025553</guid><author>ruantianqing</author><pubDate>Wed, 24 Feb 2021 16:01:28 +0800</pubDate><description><![CDATA[Vuex
vuex是一个解决组件之间通信，实现组件之间共享数据的框架
参考了flux思想实现的框架，也实现了单一数据源，数据单向流动等特征
	单一数据源：一个应用程序中，只能有一个store对象（用来存储数据）
	数据单向流动：数据始终朝着一个方向传递（形成环路）
优势：应用中可能有很多环，但是彼此之间没有联系，所以在一个环中添加一个成员或者删除一个成员，只影响当前的环，因此我们可以将系统中的所有环抽象成一个环
vuex由三部分组成：
	action	消息对象
	state	用来存储数据的
	views	组]]></description><category></category></item><item><title><![CDATA[http面试题]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114023721</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114023721</guid><author>ruantianqing</author><pubDate>Wed, 24 Feb 2021 15:33:32 +0800</pubDate><description><![CDATA[必考：HTTP 状态码知道哪些？分别什么意思？
http


大公司必考：HTTP 缓存有哪几种？
HTTP缓存


缓存：暂时存储的意思
浏览器的缓存机制
	当用户访问一个页面的时候，浏览器会将一部分信息保存在本地，之后再次发送同样请求的时候，则直接使用本地中的资源，这样做的好处是避免了带宽的浪费，提高了页面加载的速度
缓存分为两种：
	强制缓存：如果命中强制缓存，则不会发送新的请求到服务器，直接使用本地中的资源
	协商缓存：一旦命中协商缓存，会照样发送请求到服务器，询问“服务器有没有数据更新”，如果..]]></description><category></category></item><item><title><![CDATA[DOM面试题]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114016147</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114016147</guid><author>ruantianqing</author><pubDate>Wed, 24 Feb 2021 12:07:52 +0800</pubDate><description><![CDATA[必考：事件委托
DOM
曾考：用 mouse 事件写一个可拖曳的 div
链接


]]></description><category></category></item><item><title><![CDATA[js面试题]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114004569</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114004569</guid><author>ruantianqing</author><pubDate>Tue, 23 Feb 2021 23:12:37 +0800</pubDate><description><![CDATA[必考：ES 6 语法知道哪些，分别怎么用？
举例（let const class 展开运算等等）
ES5
ES6


必考 Promise、Promise.all、Promise.race 分别怎么用？
Promise


必考：手写函数防抖和函数节流
防抖和节流


必考：手写AJAX
ajax


必考：这段代码里的 this 是什么？
1 fn()
`	this =&gt; window/global
2 obj.fn()
	this =&gt; obj
3 fn.call(xx)
	this =..]]></description><category></category></item><item><title><![CDATA[ajax]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/114004916</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/114004916</guid><author>ruantianqing</author><pubDate>Tue, 23 Feb 2021 23:06:48 +0800</pubDate><description><![CDATA[ajax

使用表单提交数据的时候，会刷新页面（跳转页面），为了避免跳转页面，Ajax就出现了
特点：使用Ajax不仅可以与服务器中进行数据交互，还可以在不跳转页面的情况下实现局部页面更新
全称：Asynchronous JavaScript And XML 异步的JS与XML
XML：可扩展标记语言，以前也是进行前后端数据交互的
特点：只要具备文档声明，所有的标签都是自定义的。但是使用XML传递数据的时候，前端解析起来比较麻烦，后端生成文件也是比较麻烦，所以逐渐被json数据代替

使用Ajax
在IE8]]></description><category></category></item><item><title><![CDATA[css面试题]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/113803445</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/113803445</guid><author>ruantianqing</author><pubDate>Sat, 13 Feb 2021 21:21:59 +0800</pubDate><description><![CDATA[1 必考：两种盒模型分别说一下。
1 标准盒模型：box-sizing: content-box
	width = content-width
	height = content-height
2 怪异盒模型：box-sizing: border-box
	width = content-width + padding-width + border-width
	height = content-height + padding-height + border-height
	优势：无论如何改动border]]></description><category></category></item><item><title><![CDATA[html面试题目]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/113803275</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/113803275</guid><author>ruantianqing</author><pubDate>Sat, 13 Feb 2021 20:40:43 +0800</pubDate><description><![CDATA[1 必考：你是如何理解 HTML 语义化的？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
2 meta viewport 是做什么用的，怎么写？

1 这句话的意思是让页面的布局视口的宽度等于视觉视口的宽度，此时页面元素会以设备逻辑像素宽度做为]]></description><category></category></item><item><title><![CDATA[vue组件name属性]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/113174020</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/113174020</guid><author>ruantianqing</author><pubDate>Tue, 26 Jan 2021 10:09:08 +0800</pubDate><description><![CDATA[转载自https://www.jb51.net/article/140702.htm
我们在写vue项目的时候会遇到给组件命名
这里的name非必选项，看起来好像没啥用处，但是实际上这里用处还挺多的
export default {
	name: 'xxx'
}

用处一：当项目使用keep-alive时，可搭配组件name进行缓存过滤
举个例子：
我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载
export default {
  name:'Detail']]></description><category></category></item><item><title><![CDATA[echarts的简单使用]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/113096243</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/113096243</guid><author>ruantianqing</author><pubDate>Sun, 24 Jan 2021 20:43:38 +0800</pubDate><description><![CDATA[1 引入
官网：https://echarts.apache.org/zh/index.html
可以直接下载，也可以使用npm下载
下载js文件之后引入

2 使用
&lt;body&gt;
    &lt;!-- 准备一个容器div放置图表，会按照容器的大小绘图 --&gt;
    &lt;div id="demo1" style="width: 600px;height:400px;"&gt;&lt;/div&gt;

    &lt;!-- 使用javascript绘制图表 --&gt;
    ]]></description><category></category></item><item><title><![CDATA[iconfont 图标 使用]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/113095463</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/113095463</guid><author>ruantianqing</author><pubDate>Sun, 24 Jan 2021 19:31:23 +0800</pubDate><description><![CDATA[1 可以使用在线连接，也可以下载到本地

2 在线连接

在assets下的font文件夹下新建iconfont.css文件夹，引入在线链继

在main.js文件中引入iconfont.css文件


3 下载文件
下载到本地后，把压缩包里的css文件拖到assets下的font文件夹下，然后在main.js中引入
4使用
&lt;i class="iconfont icon-shouqi"&gt;&lt;/i&gt;


写上图标对应的类名就可以使用了
注意：每次更新图标的时候都要更换在线连接或者重新下]]></description><category></category></item><item><title><![CDATA[前端权限控制]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/112999482</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/112999482</guid><author>ruantianqing</author><pubDate>Fri, 22 Jan 2021 22:52:26 +0800</pubDate><description><![CDATA[1 前端权限控制思路
1.1菜单的控制
​	在登录请求中，会得到权限数据。前端根据权限数据，展示对应的菜单，点击菜单，才能查看相关的界面
1.2界面的控制
​	如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面
​	如果用户已经登录，可是手动敲入非权限内的地址，则需要跳转到404界面
1.3按钮的控制
​	在某个菜单的界面中，还得根据权限数据，展示出可进行操作的按钮，比如删除，修改，增加
1.4请求和响应控制
​	如果用户通过非常规操作，比如通过浏览器调试工具将某些禁用的按钮变成开启状态]]></description><category></category></item><item><title><![CDATA[vuex存储和本地存储(localstorage、sessionstorage)的区别]]></title><link>https://blog.youkuaiyun.com/ruantianqing/article/details/113001623</link><guid>https://blog.youkuaiyun.com/ruantianqing/article/details/113001623</guid><author>ruantianqing</author><pubDate>Fri, 22 Jan 2021 20:49:16 +0800</pubDate><description><![CDATA[转载自：https://www.cnblogs.com/jiajialove/p/12606695.html
转载自：https://www.cnblogs.com/leijee/p/7506301.html
区别及适用场景：


1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供]]></description><category></category></item></channel></rss>