Tokki_的博客

移动端点击（click）事件300毫秒延迟的问题移动端页面对于点击事件会有300毫秒的延迟，也就是js捕获click事件的回调函数处理，需要300ms后才生效，导致多数用户感觉移动设备上基于HTML的web应用界面响应速度慢，甚至有时候会影响一些业务逻辑的处理。移动浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕上快速点击两...

transition过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。属性描述transition简写属性，用于在一个属性中设置四个过渡属性。transition-property规定应用过渡的 CSS 属性的名称。tran...

书写顺序位置属性(position, top, right,z-index, display, float等)大小(width, height, padding,margin)文字系列(font, line-height,letter-spacing, color- text-align等)背景(background, border等)其他(animation, transition等...

forEach() 用于遍历数组无返回值，会改变原来数组中的值let arr = [1, 3, 12, 2, 20, -1, 6, 17];arr.forEach((item, index, array) => { array[index] = item * 2;});console.log(arr); // [2, 6, 24, 4, 40, -2, 12, 34]...

添加一个标记位<p @click="flag && clickEvent()"></p>

好困好困好困常用路由跳转方式通过router-link进行跳转通过$router.push进行跳转router-link<router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data ...

在vue的路由配置中，有两种模式，分别是hash模式和history模式对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。区别hash — 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：www.a...

一些重复样式// 背景图片@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...

防抖(debounce)实现原理就是利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。实现1// 实现 1// fn 是需要防抖处理的函数// wait 是时间间隔function debounce(fn, wait = 50) { // 通过闭...

"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子句参数...

定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。优势首先它能提升用户...

webpack的作用构建就是把源代码转换成发布到线上的可执行JavaScrip、CSS、HTML代码，包括如下内容：代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。代码分割：提...

一.类式继承简介：将父类对象的实例赋值给子类的原型，则子类的原型可以访问父类原型上的属性和方法，以及父类构造函数中复制的属性和方法。//1.类式继承//声明父类function SuperClass() { this.superValue = true;}//为父类添加公有方法SuperClass.prototype.getSuperValue = function () { ...

if操作符简写xxxxvar a = 1if (a = 2) { a = 3} else { a = 4}可简写为 ==> if (a = 1) a = 3; a = 4if (flag === true) 存在条件的简写 ==> if (flag) 或者 ==> if(!flag)三元操作符简写const x = 20;let answer;if (...

touch事件开始的触摸事件touchstart、touchmove和touchend是ios版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，...

vue动态绑定class的几种方式通过对象绑定:class="{ 'active': isActive }"绑定多个第一种（用逗号隔开）:class="{ 'active': isActive, 'sort': isSort }"第二种（放在data里面）//也可以把后面绑定的对象写在一个变量放在data里面，可以变成下面这样:class="classObject"data()...

伪类：用于向某些选择器添加特殊的效果，当已用元素处于某种状态时，为其添加对应的样式:link 未访问的连接:visited 已访问的连接:hover 鼠标移动到容器，可用于页面的任何元素:active 被激活时的状态，不仅限于连接:focus 获得焦点时的状态，不仅限于连接:target:first-child…伪元素：用于将特殊的效果添...

使用场景当两个组件存在相同的方法，例如需要进行初始化，例如分页操作，进入页面时，需要对页面初始化页面。这个时候你可以选择传统的写组件来进行分离，但是使用mixins可以不通过状态传递，直接进行强大的混合，方便了许多。mixins允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，对...

<script type="text/javascript"> (function() { var html = document.documentElement; var hWidth = html.getBoundingClientRect().width; html.style.fontSize = hWidth / 36 + 'px'; // 3...