2018年05月_chiuwingyan

转载 Vue的filters

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：{{ message | capitalize }}&lt...

2018-05-27 16:57:49 460

前言如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。解决方法以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling: touch;，是因为这行代码启用了硬件加速特性，所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动...

2018-05-23 19:11:59 11519 1

原创字符串转换base64的方法

base64_encode(str){ var c1, c2, c3; var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; var i = 0, len = str.length, ...

2018-05-23 17:56:21 6033

原创 Promise基本概念及使用方法

什么叫promise？Promise对象可以理解为一次执行的异步操作，使用promise对象之后可以使用一种链式调用的方式来组织代码；让代码更加的直观。就是当执行完一次异步操作后，会有一次回调，不管成功还是失败，成功就对应成功的回调，失败就对应失败的回调。那我们为什么要使用promise？比如我们在工作中经常会碰到这么一个需求，比如我使用ajax发一个A请求后，成功后拿到数据，我们需要把数据传给B...

2018-05-22 16:31:45 1443

原创移动端实现四条边框1px粗线

.border{background-image:linear-gradient(180deg, #F73125, #F73125 47%, transparent 50%), linear-gradient(270deg, #F73125, #F73125 49%, transparent 50%), linear-gradient(0deg, #F73125, #F7312...

2018-05-18 15:17:52 259

原创 js作用域和执行上下文的区别

前言之前，我以为作用域和执行上下文是同一个概念，其实并不是，这里很多人都会把它们混淆了。上下文 vs 作用域每个函数调用都有与之相关的作用域和上下文。从根本上说，范围是基于函数(function-based)而上下文是基于对象(object-based)。换句话说，作用域是和每次函数调用时变量的访问有关，并且每次调用都是独立的。上下文总是关键字 this 的值，是调用当前可执行代码的对象的引用。作...

2018-05-17 14:21:15 8486

原创闭包之利用闭包保存状态

前言首先，这里要对闭包有一个理解，这里就不作详细介绍了。看以下代码： <button>0</button> <button>1</button> <button>2</button> <button>3</button> var button = docu

2018-05-17 00:15:07 788

原创为什么setTimeout()比setInterval()稳定

前言要理解setTimeout()比setInterval()稳定，首先要对异步操作有了解。简单来讲，js引擎是单线程的，主要分为主线程和事件队列，同步操作是在主线程上执行，一些异步时间或者是未能马上被主程序执行的函数，一般会先放在事件队列当中，等到js主线程空闲了，才会去事件队列取出事情放到主线程，继续进行操作。...

2018-05-15 14:21:29 2884

转载使用CSS3实现圆形进度条

https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html

2018-05-14 16:01:16 6367

原创 js函数节流和去抖

前言函数节流和去抖的出现场景，一般都伴随着客户端 DOM 的事件监听。举个例子，实现一个原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路监听 mousemove 事件，在回调中获取元素当前位置，然后重置 dom 的位置（样式改变）。如果我们不加以控制，每移动一定像素而触发的回调数量是会非常惊人的，回调中又伴随着 DOM 操作，继而引发浏览器的重排与重绘，性能差的浏览...

2018-05-13 23:55:29 509

原创移动端给body设置overflow:hidden失效的问题

在移动端，给body增加overflow:hidden;width:100%;height:100% 无效的问题。在网上找了几种解决办法1、body加position:fixed; —-可行2、给要滚动的元素添加一个父级，设定高度，overflow：auto；3、html,body{height:100%;overflow:hidden}我这里是限制x轴上不能滑动，因此用的是第三种方法...

2018-05-08 15:39:41 3853

原创 React的setState

前言对于有react使用经验的都知道，react的setState是异步执行的，就是react对state的改变是批量进行更新的，不是同步的，这样在一起的程度上也可以提高性能，把多次render合并成一次render。不是所有的setState都是异步上面所讲到setstate是异步的，其实是针对react中调用的方法而言，例如react的生命周期函数中，给元素绑定的事件中，例如：class Ap...

2018-05-06 23:59:08 608

原创 React性能优化（以及React的render过程）

前言在了解React的性能优化之前，首先要对React的render过程有了解。Render对React有了解的都知道，render的渲染分为初始化渲染和更新渲染。初始化渲染就是在页面初始化的时候调用根组件下所有组件的render方法，如下图，一个DOM树表示根组件与各组件之间的联系，绿色是代表已经渲染的。现在讲的这种情况，如果我们只需要对某一个子组件进行更新，如图绿色代表的是需要更新的子组件：而...

2018-05-05 16:26:27 1270

原创 IOS input 光标大小调整

做的是移动端的页面，在做项目的过程当中，发现input输入框ios的表现和安卓不一样，ios会比较大，撑满整个input输入框。原因：IE：不管该行有没有文字，光标高度与font-size一致。 FF：该行有文字时，光标高度与font-size一致。该行无文字时，光标高度与input的height一致。 Chrome：该行无文字时，光标高度与line-height一致；该行有文字时，光标高度从in...

2018-05-04 11:45:59 3877

原创 webpack模块热替换教程

我们用vue或者react脚手架时，我们会发现，我们修改代码时，浏览器不会刷新，更改对应的部分会自动刷新，这就是模块热替换。下面主要介绍webpack和react-hot-loader。webpack模块热替换package.json 增加 --hot"start": "webpack-dev-server --config webpack.dev.config.js --color --prog...

2018-05-03 13:42:03 1156

原创关于javascript单线程的一些理解

参考自：https://github.com/JChehe/blog/blob/master/posts/%E5%85%B3%E4%BA%8EJavaScript%E5%8D%95%E7%BA%BF%E7%A8%8B%E7%9A%84%E4%B8%80%E4%BA%9B%E4%BA%8B.md

2018-05-02 18:33:03 176

chiuwingyan的博客