效果展示

HI

经过 2 年准备，7 个月写作，8 个月修改，《JavaScript 设计模式与开发实践》即将出版（5 月 20 号左右）。

预售地址将于 51 假期过后放出，感兴趣的同学可以关注。：）

前提：

介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于 zepto.js 

功能清单:

1 快速实现页面全屏滚动效果。并提供多种翻页效果，兼容大部分 ios 和 android 系统。

2 支持在页面中添加多种动画元素效果 来实现淡入，滑入等效果。

3 支持配置音乐功能。

4 支持摇一摇接口功能。

前言

随着 Web 前端开发由 PC 转向 Mobile，作为前端工程师，除了需要去学习掌握移动端的新特性外，还需要面对大量移动端特有的难题，其中之一就是——怎么调试移动端页面？ 针对调试的问题，现在已经有一些很好的解决方案，比如：weinre、chrome remote、手 Q 浏览器 Inspector，不过这些方案的门槛都较高，需要满足一些额外的条件。目前，在日常的开发调试工作中，打日志依然是一种常见的调试手段，通过日志内容来判断当前页面运行的状态，而日志的输出形式又有很多种，有 img 请求、dialog 弹窗、alert 等等，但这些输出方式都不能很好的满足我们的需要，甚至存在一些问题，所以 Rosin 诞生了。

关于 Rosin

Rosin 是一个 Fiddler 插件，它能接收页面中的 console 的输出，将内容持久存储在本地，并展现在 Fiddler 面板。 如果你的项目是通过 Fiddler 代理来开发调试手机页面，那么 Rosin 将会是你的好帮手。
项目地址：  http://alloyteam.github.io/Rosin/

写在前面

大家阅读此文之前，可以先看一篇 MiloYip 的文章：用 JavaScript 玩转游戏物理 (一) 运动学模拟与粒子系统，看完之后再看此文，更加容易理解。

MiloYip 使用的粒子是 canvas 中绘制的圆，还有一些粒子效果是基于 像素级别的，如：火焰字 ，但是使用像素的计算成本太大，因为需要的粒子数量太多，甚至要配合一些 nosie 算法，如（perlin nosie），计算量太大。

所以一般会先设计好粒子的纹理（每个纹理假设是 32*32，一个粒子就包含了九百多个像素了），这样需要的粒子个数不多，计算量也不大，管理粒子的成本也不高（对粒子增删改查）。

canvas globalCompositeOperation

粒子系统在什么时候最漂亮？晚上！所以在绘制纹理的时候，需要设置 globalCompositeOperation 的值为 lighter。其作用是：在图形重叠的地方，颜色由两种颜色值的加值来决定。

globalCompositeOperation 还有非常多的属性可以设置，详情见：w3school。

AlloyDesigner 介绍

　　AlloyDesigner 的创意来自于 “临摹” 的灵感，使用 AlloyDesigner 后，你可以把设计稿拖进你的 Web 页面铺在页面的最底层，然后就可以对着设计稿来构建 DOM 元素和 CSS 样式啦，这样子是不是直观了很多？通过 AlloyDesigner 直观地调整页面，迅速达到与视觉稿一致的目的。

AlloyDesigner 的官网：http://alloyteam.github.io/AlloyDesigner/

What's AlloyStick

AlloyStick 是一款专为 HTML5 开发的 2D 骨骼动画引擎。可以用于 HTML5 动画开发、HTML5 游戏开发。AlloyStick 主要由骨骼动画引擎和骨骼动画编辑器两部分组成。骨骼动画编辑器提供强大的骨骼动画编辑功能，拖拽骨骼组合角色，通过设置动画关键帧，输出动画数据。js 动画库根据输出数据，依靠强大的自动补间和骨骼关系，就可以制作出逼真、生动的 Canvas 骨骼动画，可以畅快的运行在 PC、手机、平板等设备里。

移动 Web 开发是一块新的领域，给 Web 带来更多机会的同时，也带来了更多的挑战。为了让开发者在移动 Web 的道路上走得更加顺畅，开发更加高效，Spirit（勇气号）由此而生。

Spirit 官网：http://alloyteam.github.io/Spirit/

====索引=====

【Web 缓存机制系列】1 – Web 缓存的作用与类型

【Web 缓存机制系列】2 – Web 浏览器的缓存机制 

【Web 缓存机制系列】3 – 如何构建可缓存站点

【Web 缓存机制系列】4 – HTML5 时代的 Web 缓存机制

【Web 缓存机制系列】5 – Web App 时代的缓存机制新思路

【Web 缓存机制系列】6 - 进击的 Hybrid App，量身定做缓存机制

============

前言

前面的文章分别简述了 Web 缓存、相关机制、以及 html5 和 Web App 时代我们可以选择的缓存思路。转眼过了很长时间，这期间移动互联网成为大家讨论和学习的焦点，部门也有很多同学陆续接触 Mobile Native App 和 Mobile Web App 的开发。同时，还有部分同学专注 QQ 内嵌 Webkit + Client 这种 Hybrid App 模式的开发，继续推动 QQ 客户端 Web 化的进程。

引用张图，简单粗俗的解释下 Native App、Web App 和 Hybrid App