2017年07月_BenjaminShih

原创手写 parseInt

function parseInt(s, radix = 10) { // 不是string类型立刻NaN if (typeof s !== 'string') { return NaN; } // 进制必须为2到36的数字 if (typeof radix !== 'number' || radix < 2 || radix > 36) {

2017-07-31 18:00:24 1084

原创 css requestAnimationFrame

绘制动画，一般有两个选择：js脚本 setTimeout和setIntervalcss3 transition和animation属性这两个方法有各自的局限性：js脚本实现动画的局限性：即使向 setTimeout和setInterval 传递ms级的参数，由于js单线程的关系，可能会引发堵塞，不能达到高精度的准确性没有对动画的循环机制进行优化，只是以一个大致的时间间隔循环，

2017-07-27 14:16:42 665

原创 js 事件委托(事件代理)

事件委托，又名事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。举例来讲，如果我们准备为一个dom绑定一个click事件，那么我们在dom上直接添加事件监听就可以了：<ul class="ul"> <li>1</li> <li>2</li></ul>window.onload = function() { var ul = document

2017-07-26 17:43:32 830

原创 event loop js事件循环 microtask macrotask

首先知晓： js是单线程语言也就是说一次就只能做一件事情。多数的网站不需要大量计算，程序花费的时间主要集中在磁盘 I/O 和网络 I/O 上面虽然SSD读取很快，但和CPU处理指令的速度比起来也不在一个数量级上，而且网络上一个数据包来回的时间更慢（注意过游戏的延迟吗）so: 一些cpu直接执行的任务就成了优先执行主线任务，然后需要io返回数据的任务就成了等待被执行的任务

2017-07-26 10:46:11 6655 1

页面加载进度条最初我是在youtube上看到的，后面几乎在各大网站上都能见到它的身影，可以让用户在加载页面的时候不会对着完全空白的页面发呆，提升用户体验但是从开发角度讲，这种进度条在真实性上确实很难把握，因为在逻辑代码加载完成之前，我们都不能统计到进度，而逻辑代码自身的进度也无法统计。另外，我们不可能监控到所有资源的加载情况。事实上，用户并不是在乎你的页面究竟加载了百分之几，而真正关心的是离加载完还

2017-07-25 15:24:45 20840 1

原创 vue 自定义指令点击区域放大器

在vue的项目开发中一般会使用组件来进行代码复用，但是很多情况下纯粹使用组件会有一定的局限性，我们往往会追求最简洁的方式：如果只是对纯文本进行处理，无疑代码封装成filter过滤器是最好的选择–可参考《vue filter 过滤器》如果是一些全局性的简单动画提示组件或者方法（比如loading组件和axios方法），我们就可以考虑使用plugin插件为实例原型上添加方法以方便随时调用–可参考《v

2017-07-21 15:18:52 1509

原创 ios 调用微信JSSDK 签名失败解决方法

用SPA做微信h5，调用微信jssdk的页面，安卓微信上木有问题，ios微信报当前url未注册经过调试，是ios微信版本问题导致页面跳转url未变化，导致验签失败所以我们大致的思想就是：在ios微信环境中(判断浏览器环境请参考我的另一篇文章–js判断浏览器环境)，如果跳转页面与当前页面的url不一致，那么就重载刷新整个跳转页面因为项目使用vue，所以我们使用vue-router的钩子函数before

2017-07-21 11:20:12 17110 13

原创 vue瀑布流组件滑动加载更多

建议先看上一篇再来食用本文，如果直接想看源码文末就是~上一篇讲到在项目中使用上拉加载更多组件，但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题，我们有时候也会换成滑动到底部自动加载的功能。既然都是加载更多，很多代码思想势必相似，主要区别在于上拉和滑动到底部这个操作上，所以，我们需要注意：上拉加载是point指针

2017-07-18 17:56:19 10690 2

原创 vue瀑布流组件上拉加载更多

最近在做移动端h5页面，所以分页什么的就不能按照传统pc端的分页器的思维去做了，这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多，符合正常使用习惯。首先简单写一下模板部分的html代码,，很简单清晰的逻辑：<template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot>

2017-07-18 13:57:55 7681 2

原创 es6 promise的使用

由于项目很早就启用了es6，所以开发中经常会用到promise，优雅好用以前我们经常这么写异步回调：step1(function(val1) { step2(function(val2) { step3(function(val3){ // ...嵌套再嵌套 }) })})这种三角形代码缺钱显而易见：代码不优雅，阅读费劲难

2017-07-18 11:00:51 1635

原创 vue filter 过滤器

在项目开发中，我们常常需要把一些常见的文本格式化，比如说后端返回手机号需要加星号处理，或者说把一些数字加上货币单位如果说我们把这些操作在methods选项中注册为一个方法的话，虽然也是一种可行的方法，但是其缺点也很明显：methods选项常常被用来组织页面数据和交互逻辑，简单的文本处理杂糅其中语义化不明显且methods过重首先要注意几点： 1. vue1中的uppercase等vue自带过滤器

2017-07-17 10:12:50 3210

原创 vue plugin 插件编写以loading为例

我们在使用vue开发的过程中，经常会遇到这两个问题：我要使用loading(加载动画) toast（浮层提示） dialog（弹框提示）之类的全局性组件，但是用全局组件注册的话非常麻烦，还要在template标签中书写组件html代码然后参数通过在data选项中注册变量来控制组件的显示/隐藏/提示语，显得异常麻烦~我要使用某些全局函数例如（axios）来进行某些操作，如果每次使用都需要impor

2017-07-16 17:21:50 12544 7

原创 css单位 % em rem vw vh vmin vmax pt ch ex

px像素 (计算机屏幕上的一个点)，项目开发中特别是移动端开发我经常会使用webpack将px转化为rem来适应屏幕宽度%百分比，理解为和父元素字符的相对大小，但是有几个注意点： 1. 对于普通元素，相对于父元素大小 2. 对于position: absolute元素，相对于已经定位的父元素（position: relative） 3. 对于position: fixed，相对于浏览器的vie

2017-07-14 16:29:57 572

原创 js拼接URL字符串

实际开发中，经常会遇到http请求(特别是get请求)或者跳转页面需要拼接URL请求字符串，而经常性的思维就是利用“+”进行字符串拼接：var baseUrl = 'www.google.com'var a = 1, b = 'request', c = truevar finalUrl = baseUrl + '?a=' + a + '&b=' + b + '&c=' + c这种方法看起来丑陋

2017-07-10 21:00:33 44070 3

原创 js判断浏览器环境

项目中很多时候会遇到判断浏览器环境的问题，比如说微信浏览器/APP环境，ios/安卓环境；一般我们只需要根据全局变量window(global)中的navigator.userAgent属性来判断就可以了。先提取userAgent：const userAgent = global.navigator.userAgent然后用简单的正则去判断是否含有某些特殊字段：const inAndroid = /

2017-07-07 17:33:47 3979

原创 axios拦截设置和错误处理

现在vue的官方包已经不更新vue-resource了，转而推荐axios，下面是项目实战是总结的axios插件设置：/** * @file Axios的Vue插件（添加全局请求/响应拦截器） */// https://github.com/mzabriskie/axiosimport axios from 'axios'// 拦截request,设置全局请求为ajax请求axios.int

2017-07-07 15:52:45 69782 5

原创 typeof的缺点以及解决方式

首先要给出的当然是这张值表：表达式返回值 typeof true ‘boolean’ typeof 123 ‘number’ typeof “abc” ‘string’ typeof function(){} ‘function’ typeof [] ‘object’ typeof {} ‘object’ typeof null ‘o

2017-07-05 21:41:54 4040

原创跨域之Server Proxy

什么是Server Proxy继《跨域之jsonp》和《跨域之CORS》之后，还有一种比较常用的方法：Server Proxy，顾名思义，服务器代理的意思；如果说前两种方法是前端直接和跨域目标服务器发送直接请求（无论是src还是ajax），那么服务器代理则是由本域服务器请求跨域服务器（服务端不存在同源策略，也就不存在跨不跨域这一说），然后将得到的信息发送给前端，这一过程中页面只是请求了本域服务器，并

2017-07-05 18:22:22 3898

原创跨域之CORS

前言本文会涉及到上一篇文章《跨域之jsonp》中的相关示例流程，先阅读再来食用本文更加美味~什么是CORSCORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。在jsonp中，我们使用了script标签的src属性不受同源策略影响的特性来跨域

2017-07-03 20:28:26 422

本杰明的博客