2017年08月_BenjaminShih

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

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

2017-08-21 15:43:13 798

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

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

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

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

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

2017-08-09 19:35:27 3792

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

原创文本截断省略号

纯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 466

原创 mac 效率工具之CatchMouse

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

2017-08-07 13:37:16 5948 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 399

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

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

原创图片懒加载与预加载

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

2017-08-02 16:26:43 385

原创滚动导航栏吸顶固定

<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 2002 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 478 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 1464 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 9219

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

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

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

本杰明的博客