BenjaminShih-CSDN博客

原创待写博客列表

灵光一闪的想法和偶尔碰到疑点难点，之后会写成博客加深记忆：懒加载和预加载栅格布局、圣杯布局等各种布局实现页面加载进度条事件委托实现extend函数为什么会有跨域的问题以及解决方式jsonp原理、postMessage原理动画：setTimeout何时执行（event loop)requestAnimationFrame的优点手写parseInt的实现：要求简单一些，把字符串型的

2017-06-12 18:18:41 423

原创 css3实现高度从固定到自动的过渡动画

用 height 是不行的。不过，用 max-height 和 min-height 可以实现同等效果。.box{ max-height: 120px; min-height: 120px; overflow: hidden; transition: max-height ease-out 0.2s; } .box:hover{ max-heig

2017-11-02 10:55:15 12203

转载代码覆盖率工具 Istanbul 入门教程

作者：阮一峰测试的时候，我们常常关心，是否所有代码都测试到了。这个指标就叫做”代码覆盖率”（code coverage）。它有四个测量维度。行覆盖率（line coverage）：是否每一行都执行了？函数覆盖率（function coverage）：是否每个函数都调用了？分支覆盖率（branch coverage）：是否每个if代码块都执行了？语句覆盖率（statement cover

2017-10-19 14:54:01 1657 1

原创移动端列表表头fix布局的改进

以前在做PC端开发的时候，经常会使用position: fix来做一些固定于窗口位置的一些页面功能，比如全局居中的提示框和模态框，或者是页头页脚等等~但是在移动端做的时候长了就会发现，我们要在一些场合避免使用fix布局，就目前来看，主要有以下两个原因： 1. 公司项目曾经使用h5套壳app，在ios上发现，如果列表页中使用fix固表头，那么有有一定几率会造成页面元素无法点击甚至卡死的现象

2017-10-18 09:46:45 1295

转载 js模块化编程总结

经常会听到关于js模块化的各种规范和类库，觉得还是有必要搞懂前端的一些知识生态，温故知新，特此整理。 CommonJSnodejs采用的规范，其主要面向服务端。require命令第一次加载会执行整个脚本，在内存中生成一个对象。// 主要属性{ id: '...', // 模块名 exports: {...}, // 该模块导出的接口 loaded: true, // 模块

2017-10-18 09:44:38 1580 1

原创 vue 星空背景图组件

摘下星星送给你博客的背景有点单调不想要枯燥的白色背景然后么自己写了个星空图封装成vue组件后期折腾下去换了博客的背景可以设置星星个数（默认25）、星星颜色、线条颜色废话不多说，直接上源码如果问题，欢迎私信交流<template> <div class="starry-sky"> <canvas ref="canvas"></canvas> </div><

2017-09-15 13:06:41 7882 6

原创 js查询URL参数 query对应的键值

/** * 查询 url 字符串对应的键值 * @param {[String]} name [键值名] * @param {[String]} url [url字符串] * @return {[String]} [对应的值] */export function getUrlQuery(name, url) { const pattern = new RegExp(`

2017-09-08 10:58:24 2865

原创 ios 内层滚动到顶部或者底部无法滑动问题

/** * 处理一像素 */ scrollFix() { // 滚动容器dom const elem = this._container if (!elem) { return } // 兼容第一次滑动 elem.scrollTop += 1 // 绑定事件 elem.addEventListener('sc

2017-09-06 14:07:42 2695

原创微信jssdk封装

/** * @file 微信JS-SDK封装 */import apis from '../common/apis'import query from '../common/query'import axios from '../plugins/axios'import loadScript from '../utils/load-script'import { isWeChat, is

2017-09-05 17:00:05 3139 3

原创 ios 微信返回页面标题无更改更新

这个问题困扰了好长时间，原本以为是document.title设置失效，试着用iframe去hack，然并卵. 后来排查问题，发现返回的时候页面并没有走页面的生命周期，当然也就没有发送请求和渲染页面，后知后觉是缓存捣乱，所以，在页面的入口js文件中添加以下代码，保证页面不读取缓存：/** * 解决在ios微信中因为返回读取缓存导致页面没有执行js更改标题，读取缓存则刷新页面 */if (isI

2017-08-21 15:43:13 772

原创 h5 监听横竖屏旋转

h5监听横竖屏旋转：function orientate() { if (global.orientation === 90 || global.orientation === -90) { alert('cross') } else { alert('vertical') }}global.addEventListener('onorientationchange'

2017-08-14 17:38:50 4174

原创 IOS微信无法更改标题解决方法

截止到ios10.3.3版本，微信单页应用仍有这个问题，项目中我将其封装成一个util工具模块，方便调用~// 这个在我的博客中有写到过[如何判定浏览器环境](http://blog.csdn.net/sjn0503/article/details/74745608)import { isIOSWeChat } from 'utils'// 任意线上iconconst faviconSrc =

2017-08-14 16:01:30 589

三次握手第一次握手：客户端A将标志位SYN置为1,随机产生一个值为seq=J（J的取值范围为1~7）的数据包到服务器，客户端A进入SYN_SENT状态，等待服务端B确认；第二次握手：服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接，服务端B将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给客户端A以确认连接请求，服务端B进入SYN_RCVD状态

2017-08-10 17:29:04 284

原创 js replace进阶之正则和回调函数

常用用法：字符串替换为字符串 str.replace(String, String); 正则替换为字符串 str.replace(Reg, String);基本上这两种用法是最常见的，没什么疑问，只需要注意只能替换一次就好了。'sss'.replace('s', 'r') // 'rss'进阶用法：如果使用了正则表达式，那么用法就可以稍加复杂（bian li）先看一张表：字符替换文

2017-08-09 19:35:27 3768

原创 js语言精粹读书笔记

全书贯穿一个method方法定义新方法：Function.prototype.method = function(name, func) { if (!this.prototype[name]) { this.prototype[name] = func; } return this;};js只有一种数字类型，表示为64位浮点数，没有分离出整数类型，1和

2017-08-07 18:33:32 597

原创文本截断省略号

纯CSS实现省略号只要支持-webkit-line-clamp和float即可原理是根据浮动文档流和line-clamp属性的特点进行溢出隐藏和视图内显示（参考原文）<!DOCTYPE html><html><body><style>/* * 行高 h * 最大行数 n * ...更多容器的宽 w * 字号 f */@-webkit-keyframes width-change {0%

2017-08-07 16:05:32 450

原创 mac 效率工具之CatchMouse

因为项目开发前端开发既要更改代码实时观察页面情况，又要查看UI图和原型图等等等等，常常需要在不同的应用之间切换，虽然mac上有着非常好用的四指滑动切换全屏以及快捷键，但是相互切换不仅麻烦还浪费时间，所以最近购入一块DELL2k屏幕来辅助开发（据说程序猿比较喜欢用DELL是因为某种情结）。但是问题来了，虽然多屏开发可以同时观看多个应用窗口，但是在两个屏幕之前来回切换需要滑动非常长的距离，甚至，有时候还

2017-08-07 13:37:16 5813 2

原创 css 小技巧

使用CSS复位CSS复位可以在不同的浏览器上保持一致的样式风格。您可以使用CSS reset 库Normalize等，也可以使用一个更简化的复位方法：* { box-sizing: border-box; margin: 0; padding: 0;}现在元素的 margin 和 padding 已为0，box-sizing可以管理您的CSS盒模型布局。注意：如果你遵循接下来继承 bo

2017-08-04 12:46:12 388

原创 lazyman js流程控制

主要的难点在于理解 1. 如何判断Lazyman对象的方法被调用结束（也就是简单的setTimeout()函数所实现的功能） 2. 如何实现next()函数function _lazyMan (name) { this.tasks = []; var self = this; var fn = (function(name){ return function () {

2017-08-03 18:15:53 460

原创 css3 花瓣按钮

<template> <div class="pin-star"> <input type="checkbox" class="pin-leaf-checkbox"> <div class="pin-star-leaf"> </div> <div class="pin-star-leaf"> </div> <div class="pin-star-

2017-08-03 13:44:02 650

原创图片懒加载与预加载

图片懒加载暂时不设置图片的src属性，而是将图片的url隐藏起来，比如先写在data-src里面，等某些事件触发的时候(比如滚动到底部，点击加载图片)再将图片真实的url放进src属性里面，从而实现图片的延迟加载图片预加载在一些需要展示大量图片的网站，实现图片的提前加载。从而提升用户体验。常用的方式有两种，一种是隐藏在css的background的url属性里面，一种是通过javascript的Im

2017-08-02 16:26:43 370

原创滚动导航栏吸顶固定

<template> <div> <section id="screen1" class="section1"> <p>下滑试试？</p> <nav ref="nav"> <ul> <li><a href="#">我</a></li> <li><a href="#">是</a></li> <l

2017-08-02 13:56:19 1975 2

原创 css3 checkbox动画

<template> <div class="container"> <div class="checkbox"> <input id="checkbox-1" name="checkbox" type="checkbox" checked> <label for="checkbox-1" class="checkbox-label">Checked</label

2017-08-02 10:35:07 463 2

原创 css3 翻书动画

<template> <div class="book"> 清风不识字，何必乱翻书 <ul> <li class="ani1"></li><li></li><li class="ani2"></li> </ul> </div></template><script type="text/babel">

2017-08-01 17:16:30 1432 4

原创判断元素是否在可视区域内

getBoundingClientRect() function isElementInViewport (el, offset = 0) { const box = el.getBoundingClientRect(), top = (box.top >= 0), left = (box.left >= 0),

2017-08-01 13:36:08 9190

转载 js为什么会用原型模式

作者：阮一峰原文：Javascript 面向对象编程（一）：封装Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。那么，如果我们要把”属性”（property）和”方法”（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？一、生

2017-08-01 10:59:01 1955 2

原创手写 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 1064

原创 css requestAnimationFrame

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

2017-07-27 14:16:42 650

原创 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 820

原创 event loop js事件循环 microtask macrotask

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

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

原创 vue 页面加载进度条组件

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

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

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

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

2017-07-21 15:18:52 1468

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

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

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

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

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

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

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

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

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

原创 es6 promise的使用

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

2017-07-18 11:00:51 1601

原创 vue filter 过滤器

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

2017-07-17 10:12:50 3155

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

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

2017-07-16 17:21:50 12476 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 552

原创 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 43793 3

空空如也

空空如也