Dylan's awesome blog

如何用正确姿势刷新页面

Tue, 16 Jun 2015 00:00:00 +0000

有时候我们在页面用js干了一些业务功能之后，需要马上更新页面数据。可是懒得一块块的局部更新，干脆直接刷新页面重头开始重新做人。

然后刷新页面有两种方法可以实现：

location.href = location.href;
location.reload();

好像都能达到刷新的效果耶，到底用哪个好呢？天秤座程序猿要崩溃了！

在搞清楚这两个方法有什么区别之前，必须先知道两个http状态码：

200 —- 成功发送请求并接收到正确返回结果

200(from cache) —- 使用本地缓存，不会发送任何请求到服务器

304 —- 协商缓存，发个请求问服务器这个文件有木有修改过，服务器说木有，然后使用本地缓存。

一般一个需要缓存的文件第一次被访问时，返回200并同时会带上设置好缓存时间的http头信息，Cache-Control 和 Expires。那么这个文件就会在指定的时间内读取本地缓存而不会发送服务器请求，这时候的http状态就会是200(from cache)。如果过了缓存时间，就会进入协商缓存阶段，向服务器发送请求，如果文件并没有新版本，就会返回304告诉客户端安心继续使用本地缓存。还有一种情况会触发协商缓存，就是用户主动刷新页面，例如点击浏览器刷新按钮或者按F5(mac用户为command+r)。

简单来说，就像你小学的时候向同班女同学小红表白，小红返回200，表白成功，获得一名女朋友；当然，小红会带上头信息Cache-Control: max-age=一个学期，Expires: 新学期的第一天。于是，在这个学期内任何时候约会小红都会得到200(from cache)状态。除非遇到二班的帅气学霸抢夺或者被老师家长发现早恋等等这些人为主动干预的状况，这时候就需要问小红有木有被修改，没有则返回304(not modified)；否则，就有可能返回301(被请求的资源已永久移动到新位置)或者直接返回404(Not Found)。当暑假过去，迎来新学期的第一天，发现资源已经过期，这时候就需要再次请求小红，最好的情况就是返回304，然后又可以安心使用一个学期了。不过根据不完全非正常统计结果得出，在新学期请求过期资源会有93.333333%几率得到各种301，400，401，402，403，404………

好了，说回刷新页面，现在要搞清两种方法的区别就很简单了。location.href = location.href就相当于你在地址栏输入网址然后按enter，这样浏览器会认为这是正常的访问，保质期内的资源都会是200(from cache)；而location.reload()就相当于用户主动刷新页面，浏览器就会怀疑自己本地的资源，跑去问服务器保质期是否正确。

所以，当想刷新页面是为了更新数据的话用location.reload()比较保险，可是页面也会载入得比较慢；如果数据是用ajax拿的并带上了时间戳，那就不用担心有本地缓存了，放心使用location.href = location.href。

论愉快开发web手机端的可能性

Mon, 25 May 2015 00:00:00 +0000

作为移动互联网最便捷的入口，手机端web页面需求不断上升，特别是以微信为载体的，各种高端大气上档次低调奢华有内涵奔放洋气有深度简约时尚国际范冷艳高贵接地气时尚亮丽小清新狂拽帅气吊炸天。那么问题来了，开发手机端的页面跟开发PC端页面有啥子区别呢？

众所周知，IE是web前端开发人员的终极噩梦，就像妇联里的奥创，当你接触手机端开发后，才发现后面还有一个灭霸。各种国产安卓手机让你瞬间变果粉。幸好随着时代的发展，现在已经不需要兼容安卓4.2以下的手机了。

估计刚开始做手机端开发的都会遇到同一个问题，就是屏幕大小的适应。手机的屏幕尺寸非常多样。查询各种手机尺寸可以进入此网站 http://mydevice.io/devices/ 。经过深入调查，本人总结出三种解决方案。

1.使用viewport的缩放功能对页面进行缩放

//ios直接自动缩放 
<meta name="viewport" content=“width=640,user-scalable=no"> 
//安卓需要计算缩放⽐比 
initial-scale=缩放⽐,minimum-scale=缩放⽐,maximum-scale=缩放⽐

2.使⽤rem代替px作为单位,计算缩放⽐比设置html的font-size

<script>
        window.onresize = function(){
            document.documentElement.style.fontSize = ((document.documentElement.clientWidth / 640) * 16) + 'px';
        };
        document.documentElement.style.fontSize = ((document.documentElement.clientWidth / 640) * 16) + 'px';
    </script>
<style>
body{width:30rem;margin:0 auto;}
</style>

3.高度写死,宽度使⽤百分⽐

//可参考淘宝m站

解决了自适应问题后一切都变得简单了，css3，es5随意使用，思维从来没有这么流畅过，一小时一千行代码，打开浏览器看效果，零bug！完美！发个朋友圈炫耀一下，再买瓶可乐奖励一下自己。

幻想结束，回到现实，手机端还存在着各种问题。本来以为可以开始愉快地写代码了，才发现手机端最常用的一个触摸事件，竟然没有提供原生方法，只给了touchstart touchend touchmove 怎么办？要么直接用click，要么找个库。click太慢了，不行，经过反复研究，最后决定使用zepto，基本上跟jQuery写法一致省去了学习成本，提供了各种常用的触摸事件还挺轻量的。不过用了一段时间之后，发现有一个比较严重的bug，就是tap事件会穿透，如果你绑了个tap事件是移开或者移除一个元素，那么就会触发原本处在这个元素底层的另一个元素的click事件，真奇葩。看了看github，原来这bug三年前就被发现了，现在还没被解决，尼玛！目前解决方法有fastclick，延迟触发，具体可以百度一下。

越往下做就越发现其实手机端有许多的兼容问题，例如video标签，每个浏览器表现都不一样，例如UC浏览器下video标签永远处在最顶层；官方提供的api各个浏览器支持也不太好；如果弄HLS就更烦了。除了这些，还有很多css兼容问题，基本上高级一点的css3最好还是不要用。

折腾一番后，终于写完代码，想看看效果，发现有bug，可是又不能像chrome那样直接查看元素，怎么办呢？目前手机端有以下几种调试方法：

1.alert

2.chrome模拟手机

3.UC开发者版(安卓)

4.MIHTOOL(IOS)

抓包的话可以用fiddler，配合这些工具，基本上就能解决手机上调试网页的问题了，当然效率方面还是比不上PC端。

虽然手机端开发可以使用css3和es5标准，大大减少了代码量，可是存在的兼容性问题也不比PC的少，调试代码也比PC端麻烦。所以本人总结：在做一些比较简单的需求的时候，例如一些活动页面，你完全可以保持愉快的心情；可是如果遇到比较复杂的页面结构和交互时，你就很可能会拿起刀去捅产品经理了。

animation-play-state

Mon, 23 Mar 2015 00:00:00 +0000

最近做移动端开发，经常都需要用到animation做一些动效，特别是那些高速回旋加速无限循环拉风装逼大气奢华360度喷气加速回旋动画，根本无法单靠transition来实现。

马上打开百度，输入「animation css3」。好了，看一下W3C就回想起这css属性怎样写了。

.ass{-webkit-animation:move-your-ass .5s infinite;}
@-webkit-keyframes move-your-ass {
    0%{-webkit-transform:translateY(0);opacity: 0;}
    60%{-webkit-transform:translateY(-10px);opacity:1}
    100%{-webkit-transform:translateY(-20px);opacity:0}
}

嗯，多简单，一个无限循环抽搐屁股，可是就这么就完了麽？还是加点人机杂交效果吧，用手指抚摸屁股的时候才动，挪开就停止。于是代码大概是这样写的：

.ass.activated{-webkit-animation:move-your-ass .5s infinite;}
@-webkit-keyframes move-your-ass {
    0%{-webkit-transform:translateY(0);opacity: 0;}
    60%{-webkit-transform:translateY(-10px);opacity:1}
    100%{-webkit-transform:translateY(-20px);opacity:0}
}

document.querySelector('.ass').addEventListener('touchstart',function(){
    this.setAttribute('class','activated');
});
document.querySelector('.ass').addEventListener('touchend',function(){
    this.removeAttribute('class');
});

搞定，可是总有种不太可靠的感觉，试了一下发现了个问题。手指摸它的时候的确是动了，可是挪开手之后，整个屁股恢复到最开始的状态了，这不是我想要的，我要的是暂停而不是停止啊。咋整呢？马上再打开百度输入「animation css3」，再看了下W3C，发现animation有一个属性长这个样子 animation-play-state 有 paused running 两个值，貌似能用这货改变动画的状态。让我们来尝一下。

.ass{-webkit-animation:move-your-ass .5s infinite paused;}
@-webkit-keyframes move-your-ass {
    0%{-webkit-transform:translateY(0);opacity: 0;}
    60%{-webkit-transform:translateY(-10px);opacity:1}
    100%{-webkit-transform:translateY(-20px);opacity:0}
}
.ass.activated{-webkit-animation-play-state:running}

document.querySelector('.ass').addEventListener('touchstart',function(){
    this.setAttribute('class','activated');
});
document.querySelector('.ass').addEventListener('touchend',function(){
    this.removeAttribute('class');
});

完美！！

How to write javascript!

Mon, 09 Mar 2015 23:23:51 +0000

Firstly, you need a pen and a paper.

Then write “j”, “a”, “v”, “a”, “s”, “c”, “r”, “i”, “p”, “t” on the paper.

See? So fucking easy.

var Dylan = 'awesome';

alert(Dylan);

If you have any problem, check out the baidu one down, you will know for more info.

Welcome to Jekyll!

Mon, 09 Mar 2015 22:45:51 +0000

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll’s dedicated Help repository.