<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Tokki_的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Tokki_</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Tokki_]]></copyright><item><title><![CDATA[rem布局代码]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/94624942</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/94624942</guid><author>Tokki_</author><pubDate>Thu, 04 Jul 2019 15:55:46 +0800</pubDate><description><![CDATA[&lt;script type="text/javascript"&gt;
	(function() {
	    var html = document.documentElement;
	    var hWidth = html.getBoundingClientRect().width;
	    html.style.fontSize = hWidth / 36 + 'px';	// 3...]]></description><category></category></item><item><title><![CDATA[节流和防抖]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/94599715</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/94599715</guid><author>Tokki_</author><pubDate>Thu, 04 Jul 2019 11:10:56 +0800</pubDate><description><![CDATA[防抖(debounce)

实现原理就是利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。

实现1
// 实现 1
// fn 是需要防抖处理的函数
// wait 是时间间隔
function debounce(fn, wait = 50) {
    // 通过闭...]]></description><category></category></item><item><title><![CDATA[less或scss中@mixin的用法]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/94441903</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/94441903</guid><author>Tokki_</author><pubDate>Tue, 02 Jul 2019 14:44:48 +0800</pubDate><description><![CDATA[一些重复样式
// 背景图片
@mixin bgImage($path) {
  background-image: url($path + '@2x.png');
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($path + '@3x.pn...]]></description><category></category></item><item><title><![CDATA[前端路由之hash路由与history路由 Orz]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/94437971</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/94437971</guid><author>Tokki_</author><pubDate>Tue, 02 Jul 2019 14:00:50 +0800</pubDate><description><![CDATA[在vue的路由配置中，有两种模式，分别是hash模式和history模式

对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。

区别

hash — 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：www.a...]]></description><category></category></item><item><title><![CDATA[vue路由跳转传参 Orz]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/94436704</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/94436704</guid><author>Tokki_</author><pubDate>Tue, 02 Jul 2019 11:58:50 +0800</pubDate><description><![CDATA[好困好困好困
常用路由跳转方式

通过router-link进行跳转
通过$router.push进行跳转

router-link
&lt;router-link 
    :to="{
        path: 'yourPath', 
        params: { 
            name: 'name', 
            dataObj: data
      ...]]></description><category></category></item><item><title><![CDATA[vue移除事件绑定 Orz]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/94436639</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/94436639</guid><author>Tokki_</author><pubDate>Tue, 02 Jul 2019 11:52:46 +0800</pubDate><description><![CDATA[添加一个标记位
&lt;p @click="flag &amp;&amp; clickEvent()"&gt;&lt;/p&gt;


]]></description><category></category></item><item><title><![CDATA[数组遍历 Orz]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/94436381</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/94436381</guid><author>Tokki_</author><pubDate>Tue, 02 Jul 2019 11:48:03 +0800</pubDate><description><![CDATA[forEach() 用于遍历数组无返回值，会改变原来数组中的值
let arr = [1, 3, 12, 2, 20, -1, 6, 17];
arr.forEach((item, index, array) =&gt; {
    array[index] = item * 2;
});
console.log(arr);					//	[2, 6, 24, 4, 40, -2, 12, 34]...]]></description><category></category></item><item><title><![CDATA[css样式规范]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/94436004</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/94436004</guid><author>Tokki_</author><pubDate>Tue, 02 Jul 2019 11:32:00 +0800</pubDate><description><![CDATA[书写顺序

位置属性(position, top, right,z-index, display, float等)
大小(width, height, padding,margin)
文字系列(font, line-height,letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等...]]></description><category></category></item><item><title><![CDATA[H5 图片热点区域]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/94434635</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/94434635</guid><author>Tokki_</author><pubDate>Tue, 02 Jul 2019 11:07:22 +0800</pubDate><description><![CDATA[应用场景

不规则按钮的响应
一张图片设置多个响应域

使用方法

利用usemap属性，构建一个map标签


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;热点区域&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--...]]></description><category></category></item><item><title><![CDATA[CSS3属性]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/93401323</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/93401323</guid><author>Tokki_</author><pubDate>Sun, 23 Jun 2019 19:45:05 +0800</pubDate><description><![CDATA[transition

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。





属性
描述




transition
简写属性，用于在一个属性中设置四个过渡属性。


transition-property
规定应用过渡的 CSS 属性的名称。


tran...]]></description><category></category></item><item><title><![CDATA[eslint规范]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/93401115</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/93401115</guid><author>Tokki_</author><pubDate>Sun, 23 Jun 2019 19:39:41 +0800</pubDate><description><![CDATA["no-alert": 0,//禁止使用alert confirm prompt

"no-array-constructor": 2,//禁止使用数组构造器

"no-bitwise": 0,//禁止使用按位运算符

"no-caller": 1,//禁止使用arguments.caller或arguments.callee

"no-catch-shadow": 2,//禁止catch子句参数...]]></description><category></category></item><item><title><![CDATA[图片懒加载]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/93400155</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/93400155</guid><author>Tokki_</author><pubDate>Sun, 23 Jun 2019 19:35:02 +0800</pubDate><description><![CDATA[定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。

举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。
优势

首先它能提升用户...]]></description><category></category></item><item><title><![CDATA[vue-mixins]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/93399071</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/93399071</guid><author>Tokki_</author><pubDate>Sun, 23 Jun 2019 19:20:35 +0800</pubDate><description><![CDATA[使用场景
当两个组件存在相同的方法，例如需要进行初始化，例如分页操作，进入页面时，需要对页面初始化页面。这个时候你可以选择传统的写组件来进行分离，但是使用mixins可以不通过状态传递，直接进行强大的混合，方便了许多。
mixins允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，
对...]]></description><category></category></item><item><title><![CDATA[伪类与伪元素]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/93380319</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/93380319</guid><author>Tokki_</author><pubDate>Sun, 23 Jun 2019 13:43:47 +0800</pubDate><description><![CDATA[伪类：用于向某些选择器添加特殊的效果，当已用元素处于某种状态时，为其添加对应的样式


:link      未访问的连接
:visited    已访问的连接
:hover    鼠标移动到容器，可用于页面的任何元素
:active    被激活时的状态，不仅限于连接
:focus    获得焦点时的状态，不仅限于连接
:target
:first-child…


伪元素：用于将特殊的效果添...]]></description><category></category></item><item><title><![CDATA[vue动态绑定class和style]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/93379538</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/93379538</guid><author>Tokki_</author><pubDate>Sun, 23 Jun 2019 11:52:26 +0800</pubDate><description><![CDATA[vue动态绑定class的几种方式
通过对象绑定
:class="{ 'active': isActive }"

绑定多个
第一种（用逗号隔开）
:class="{ 'active': isActive, 'sort': isSort }"
第二种（放在data里面）
//也可以把后面绑定的对象写在一个变量放在data里面，可以变成下面这样
:class="classObject"
data()...]]></description><category></category></item><item><title><![CDATA[JavaScript-touch事件及vue的v-touch插件]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/93379287</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/93379287</guid><author>Tokki_</author><pubDate>Sun, 23 Jun 2019 11:36:56 +0800</pubDate><description><![CDATA[touch事件
开始的触摸事件touchstart、touchmove和touchend是ios版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。
在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，...]]></description><category></category></item><item><title><![CDATA[前端一些javascript简写方式]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/93238402</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/93238402</guid><author>Tokki_</author><pubDate>Fri, 21 Jun 2019 23:50:36 +0800</pubDate><description><![CDATA[if操作符简写
xxxx
var a = 1
if (a = 2) {
	a = 3
} else {
	a = 4
}
可简写为 ==&gt; if (a = 1) a = 3; a = 4
if (flag === true) 存在条件的简写 ==&gt; if (flag) 或者 ==&gt; if(!flag)

三元操作符简写
const x = 20;
let answer;
if (...]]></description><category></category></item><item><title><![CDATA[扁平数组和树形结构的相互转换]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/91357520</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/91357520</guid><author>Tokki_</author><pubDate>Sun, 09 Jun 2019 21:22:55 +0800</pubDate><description><![CDATA[扁平数组转换为树形结构
var arr = [{id: 1, pid: '-1'},{id: 11, pid: '1'},{id: 12, pid: '1'}]

function listToTree(list) {
    var map = {}, node, tree= [], i;
    for (i = 0; i &lt; list.length; i ++) {
        m...]]></description><category></category></item><item><title><![CDATA[Javascript实现继承的6种方式]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/91357384</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/91357384</guid><author>Tokki_</author><pubDate>Sun, 09 Jun 2019 21:12:04 +0800</pubDate><description><![CDATA[一.类式继承
简介：将父类对象的实例赋值给子类的原型，则子类的原型可以访问父类原型上的属性和方法，以及父类构造函数中复制的属性和方法。
//1.类式继承
//声明父类
function SuperClass() {
  this.superValue = true;
}
//为父类添加公有方法
SuperClass.prototype.getSuperValue = function () {
 ...]]></description><category></category></item><item><title><![CDATA[XSS与CSRF]]></title><link>https://blog.youkuaiyun.com/Tokki_/article/details/91348091</link><guid>https://blog.youkuaiyun.com/Tokki_/article/details/91348091</guid><author>Tokki_</author><pubDate>Sat, 08 Jun 2019 21:44:57 +0800</pubDate><description><![CDATA[XSS：跨站脚本攻击

注入攻击的一种。攻击者利用应用程序的动态展示功能，在HTML页面中嵌入恶意代码。当用户浏览该页时，这些嵌入在html的恶意代码就会被执行，用户浏览器被攻击者控制


盗取用户cookie,伪造用户身份
控制用户浏览器
结合浏览器及其插件漏洞，下载病毒木马到浏览者的计算机运行
衍生URL跳转漏洞
官网挂钓鱼网站
蠕虫攻击


CSRF：跨站请求伪造

XSS 是实现 CSRF...]]></description><category></category></item></channel></rss>