impress.js 源码分析

之前做展示用幻灯片，我一直热衷于使用PPT，刚开始学习PPT时总是强行使用各种页面特效，越做越复杂。现在看来，学技术大概都要经历一个从简到繁再到简的过程吧。后来，无意间接触到prezi，被它强大的展示逻辑所折服，但用了段时间，发现使用prezi破解版有诸多不便，最关键的是，除了很炫的转场特效，单页的设计感不及PPT，总感觉不尽如人意。
总结下，PPT的单页设计感强，普及率高；prezi的展示思路清晰，变现力强，跨平台，但制作流程稍显不便。
最近，学习H5+CSS3时我突发奇想，为何不用H5来做幻灯片展示呢？刚开始两天，纯靠自己手写页面和转场，不是一般累。我试图去抽取常用的公共方法，尝试做成框架组件的形式，发现工作量巨大，而且以自己目前水平，写出来的代码通用性很差。在Google上搜索时，我发现了impress.js的存在，与我的设想不谋而合，于是乎……不再自己造轮子，又花了两天时间熟悉使用impress.js来设计幻灯片，效果完全超越了我的预期。
impress.js简单来说仅仅是实现了幻灯片的转场特效的框架，虽说将单页限制在框架之内，但所有单页还是需要自己用代码设计。虽然花费的时间远远超过了PPT和prezi，但是能够完全使用代码来定制幻灯片，能够使用几乎每台电脑必备的浏览器放幻灯片，何尝不是一种幸福！
花了一天探索了下impress.js源码，其实并不复杂，个人感觉收获颇丰，以下阐述我的收获。

1. impress.js华丽效果实现方法概述

通过审查元素发现，页面间转场的实现全部是依赖于CSS3，准确说是translate3d属性完成的。impress的水平移动是改变了translateX坐标，垂直移动是改变translateY坐标，而变小变大的绚丽效果是改变translateZ的坐标实现，而这些转化样式的事件监听是通过js来实现的。

2. impress.js具体的技术实现

2.1 动效参数的获取

（line307）：参数获取
官方提供了一个demo：index.html，首先从data-* 属性入手。这是html5的新增api，允许用户自定义数据，通过dataset方法取出数据

var data = el.dataset, //el是通过getElememtById（）获得的元素
step = {   //定义了一个step对象，里面有4个css样式属性translate: {x: toNumber(data.x),y: toNumber(data.y),z: toNumber(data.z)},  //toNumber函数将参数转换成数字，如果无法转换返回默认值rotate: {x: toNumber(data.rotateX),y: toNumber(data.rotateY),z: toNumber(data.rotateZ || data.rotate)},scale: toNumber(data.scale, 1),el: el
};

在浏览器的console调试代码，元素的dataset 得到的是一个数组，可以依次取出x，y，z值，这就是动效实现的核心。

2.2 通用函数定义

（line1-line174）：通用函数定义

pfx() ----- 通过检测浏览器给css3属性加上当前浏览器可用的前缀
arrayify() ----- 将Array-Like对象转换成Array对象
css() ----- 将指定属性应用到指定元素上
toNumber() ----- 将参数转换成数字，如果无法转换返回默认值
byId() ----- 通过id获取元素
$() ----- 返回满足选择器的第一个元素
$$() ----- 返回满足选择器的所有元素
triggerEvent() ----- 在指定元素上触发指定事件
translate() ----- 将translate对象转换成css使用的字符串
rotate() ----- 将rotate对象转换成css使用的字符串
scale() ----- 将scale对象转换成css使用的字符串
perspective() ----- 将perspective对象转换成css使用的字符串
getElementFromHash() ----- 根据hash来获取元素（hash是URL中形如#step1的东西）
computeWindowScale() ----- 根据当前窗口尺寸计算scale，用于放大和缩小

2.3 主函数与5大api

（223line~）：主函数与5大api
API: goto(), init(), next(), prev(), initStep()
主函数: var impress = window.impress = function ( rootId ) {……}
在index.html中调用了init()函数

<script src="js/impress.js"></script>
<script>
impress().init();
</script>

源码中的init()函数，分析写在注释中

var init = function() {if (initialized) {return; } //初始值initialized=false;//使用viewport支持移动设备var meta = $("meta[name='viewport']") || document.createElement("meta");// 定义的$风格函数，类似于jQuery//  var $ = function ( selector, context ) {//      context = context || document;//      return context.querySelector(selector);//  };meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no";if (meta.parentNode !== document.head) { //判断meta的parentNode节点是不是<head>meta.name = 'viewport'; //如果不是head标签，就js添加一个meta标签document.head.appendChild(meta);}//初始化配置root （243line & 269line）var rootData = root.dataset; //获取到初始化的root数据，即id=“impress”的div标签里的内容config = {width: toNumber(rootData.width, defaults.width),height: toNumber(rootData.height, defaults.height),maxScale: toNumber(rootData.maxScale, defaults.maxScale),minScale: toNumber(rootData.minScale, defaults.minScale),perspective: toNumber(rootData.perspective, defaults.perspective),transitionDuration: toNumber(rootData.transitionDuration, defaults.transitionDuration)};windowScale = computeWindowScale(config);// wrap steps with "canvas" elementarrayify(root.childNodes).forEach(function(el) {canvas.appendChild(el);});root.appendChild(canvas);// arraify函数把类数组对象转化为真正数组（69line）document.documentElement.style.height = "100%";css(body, {height: "100%",overflow: "hidden"});var rootStyles = {position: "absolute",transformOrigin: "top left",transition: "all 0s ease-in-out",transformStyle: "preserve-3d"};css(root, rootStyles);css(root, {top: "50%",left: "50%",transform: perspective(config.perspective / windowScale) + scale(windowScale)});css(canvas, rootStyles);body.classList.remove("impress-disabled");body.classList.add("impress-enabled");// get and init stepssteps = $$(".step", root);steps.forEach(initStep);// 找到每一个class为”step“的元素，返回root(id=“impress”)的数组// forEach遍历每一个数组，对每个div用initstep()函数初始化//即我们一开始分析的那个函数。主要是把data-*自定义的数据获得，附上transtion样式。// set a default initial state of the canvascurrentState = {translate: { x: 0, y: 0, z: 0 },rotate: { x: 0, y: 0, z: 0 },scale: 1};//当前的状态。位移为0，旋转为0，缩放为1.   initialized = true;//初始化为true，即完成初始化//triggerEvent()自定义事件监听函数//其中，第一个参数为要处理的事件名//第二个参数为表明事件是否冒泡//第三个参数为表明是否可以取消事件的默认行为//第四个参数为细节参数triggerEvent(root, "impress:init", { api: roots["impress-root-" + rootId] });
};

总结:初始化过程分为两个阶段，第一个阶段是运行init()函数，第二个阶段是运行绑定到impress:init上的函数。在init()函数的结尾触发impress:init事件，这样绑定上去的函数就会全部触发。

2.4 事件对象绑定与监听

root.addEventListener("impress:init", function() {// STEP CLASSESsteps.forEach(function(step) {step.classList.add("future");});root.addEventListener("impress:stepenter", function(event) {event.target.classList.remove("past");//利用html5 classList属性对class类增删改查event.target.classList.remove("future");event.target.classList.add("present");}, false);root.addEventListener("impress:stepleave", function(event) {event.target.classList.remove("present");event.target.classList.add("past");}, false);}, false);

init是初始化事件，stepenter是进入下一步事件，stepleave是离开上一步事件

var onStepEnter = function(step) {if (lastEntered !== step) {triggerEvent(step, "impress:stepenter");lastEntered = step;}
};
var onStepLeave = function(step) {if (lastEntered === step) {triggerEvent(step, "impress:stepleave");lastEntered = null;}
};

一个step就是一个页面，按一次键盘上的left键或者right键就会切换一次step，同时绑定键盘事件

document.addEventListener("keyup", function ( event ) {...}
document.addEventListener("keydown", function ( event ) {...}
document.addEventListener("click", function ( event ) {...}
window.addEventListener("resize", throttle(function () {...}
document.addEventListener("touchstart", function ( event ) {...}

函数简单总结

impress 主函数，构造impress对象，为全局对象
onStepEnter 用于触发impress:stepenter事件
onStepLeave 用于触发impress:stepleave事件
initStep 初始化给定 step
init 主初始化函数
getStep 获取指定 step
goto 切换到指定step
prev 切换到上一个 step
next 切换到下一个step

3 总结

总体看来，impress.js源码简洁明了，并不复杂，作者的本意也是构建一个基础的框架，让使用者自由发挥，正合吾意！很多技术单独实现都很简单，综合运用起来，如何保证命名空间不污染，代码的重用复用，js和css代码的兼容性等细节都是值得学习的地方。