Open viviannow opened 8 years ago
viviannow
commented
8 years ago 获取滚动条的值：window.scrollY window.scrollX
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢?因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢?就是上面两个属性，但是事实证明android也支持这属性，所以索性都用woindow.scroll.
viviannow
commented
8 years ago css3多文本换行： p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
viviannow
commented
8 years ago Retina屏幕高清图片： selector { background-image: url(no-image-set.png); background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center; }
image-set的语法，类似于不同的文本，图像也会显示成不同的：
不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像;
支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像;
Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。
viviannow
commented
8 years ago html5重力感应事件：
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = 30;//speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
//简单的摇一摇触发代码
alert(1);
}
lastX = x;
lastY = y;
lastZ = z;
}
viviannow
commented
8 years ago 移动端touch事件： touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel//当某种touch事件非正常结束时触发
这4个事件的触发顺序为： touchstart -> touchmove -> touchend ->touchcancel
对于某些android系统touch的bug: 比如手指在屏幕由上向下拖动页面时，理论上是会触发 一个 touchstart ，很多次 touchmove ，和最终的 touchend ， 可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart 差不多，而touchend直接没有被触发。这是一个非常严重的bug， 在google Issue已有不少人提出 ,这个很蛋疼的bug是在模拟下拉刷新是遇到的尤其当touchmove的dom节点数量变多时比出现，当时解决办法就是用settimeout来稀释touchmove。
viviannow
commented
8 years ago HTML5离线存储——manifest简介
离线存储的作用 1、用户可离线访问应用，这对于无法随时保持联网状态的移动终端用户来说尤其重要
2、用户访问本地的缓存文件，通常意味着更快的访问速度
3、仅仅加载被修改过的资源，避免同一资源对服务器多次的请求，大大降低了对服务器的访问压力
Manifest是什么 manifest文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容），支持manifest的浏览器，会将按照manifest文件的规则，将文件保存在本地，从而在没有网络链接的情况下，也能访问页面。
浏览器支持情况
从图中可以看出主流浏览器均支持应用程序缓存， 除了IE
如何用 如需启用应用程序缓存，在文档的 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest文件 manifest的典型结构:
CACHE MANIFEST 注释：需要缓存的文件，无论在线与否，均从缓存里读取 CACHE: chched.js cached.css
\ 注释：不缓存的文件，无论缓存中存在与否，均从新获取**
NETWORK:
uncached.js
uncached.css注释：获取不到资源时的备选路径，如index.html访问失败，则返回404页面
FALLBACK:
index.html 404.html1、 CACHE MANIFEST 写在manifest文件开头
2、#号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更改manifest的作用，可以是版本号，时间戳或者md5码等等。
3、CACHE是必须的，作用是标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径
4、NETWORK可选，这一部分是要直接读取的文件，可以使用通配符 * 。
5、FALLBACK可选，指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。
更新缓存
在线的情况下，浏览器发现html头部有manifest属性,会请求manifest文件，如果是第一次访问应用，浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过应用并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源。
注意事项 1、如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。
2、对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存。
3、浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
在客户端存储数据
cookie-不适合大量数据的存储
localStorage-没有时间限制的数据存储，如果浏览器开户了隐私模式js会报错，要做预处理。
sessionStorage-针对一个session的数据存储,当用户关闭浏览器窗口后，数据会被删除。
写法如下： if(localStorage.pagecount){ localStorage.pagecount+1; }else{ localStorage.pagecount = 1; }