5 BenjaminShih

尚未进行身份认证

我要认证

talk is cheap, show me the code

等级
TA的排名 2w+

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

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

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

2017-10-19 14:54:01

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

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

2017-10-18 09:46:45

js模块化编程总结

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

2017-10-18 09:44:38

vue 星空背景图 组件

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

2017-09-15 13:06:41

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

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

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

2017-09-06 14:07:42

微信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

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

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

2017-08-21 15:43:13

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

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

tcp 三次握手 四次挥手

三次握手第一次握手:客户端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

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

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

2017-08-09 19:35:27

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

文本截断省略号

纯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

mac 效率工具之CatchMouse

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

2017-08-07 13:37:16

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

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

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

图片懒加载与预加载

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

2017-08-02 16:26:43

查看更多

勋章 我的勋章
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!