impress.js学习

摘要：构造一个事件，该事件以命名，用处理数据，并在上执行。导航事件键盘处理导航按键被按下时防止不允许被按下的键被意外按下方法阻止元素发生默认的行为。的切换主要通过来实现，跳转至以参数索引或元素名标记的。

引子

   断断续续用了好几天，终于把 impress.js 源码看完，作为刚入门的前端菜鸟，这是我第一次看 js 源码，最初还是比较痛苦的。不过还好，impress.js源码的注释相当清楚，每个函数和事件的作用都写得很详细，这让源码读起来更容易理解，此处手动给大神送糖果~~~

   接下来就由我给大家分享下 impress.js 效果是如何实现的、以及我们怎么利用它来实现特效。

impress.js的实现

我们在用 impress.js实现特效时，会用到类似下面的代码：



我们看到代码中有data-x，data-y等属性，实际上我们就是通过改变这些属性的值来实现PPT的跳转的。这些属性分别代表：

data-x：幻灯片的X坐标

data-y：幻灯片的Y坐标

data-scale：幻灯片显示的缩放比例

data-rotate：幻灯片旋转的度数

data-rotate-x：3D使用，设置它相对X轴旋转多少度

data-rotate-y：3D使用，设置它相对Y轴旋转多少度

data-rotate-z：3D使用，设置它性对Z轴旋转多少度
我们来看看impress源码中的 rotate函数：

//"rotate"对给定数据构造旋转变换
//默认旋转顺序为X,Y,Z,可以将参数设定为true来倒转顺序
var rotate = function( r, revert ) {
 var rX = " rotateX(" + r.x + "deg) ",
 rY = " rotateY(" + r.y + "deg) ",
 rZ = " rotateZ(" + r.z + "deg) ";
return revert ? rZ + rY + rX : rX + rY + rZ;
 };​

rotate函数的作用是将rotate对象转换成css使用的字符串。
用户自定义的数据通过data属性读取，并初始化给step对象。对应源码如下

：var data = el.dataset,
 step = {
 translate: {//对给定数据构造平移变换
 x: toNumber( data.x ),
 y: toNumber( data.y ),
 z: toNumber( data.z )
 },
 rotate: {//对给定数据构造旋转变换
 x: toNumber( data.rotateX ),
 y: toNumber( data.rotateY ),
 z: toNumber( data.rotateZ || data.rotate )
 },
 scale: toNumber( data.scale, 1 ),//对给定数据构造缩放变换
 el: el
 };​     

我们在编写HTML时，通过改变data的属性值实现页面切换，那么在源码中，又是怎么来实现的呢?
在impress.js源码中，主要通过三个事件来实现impress的运行，它们分别是impress:init,impress:stepenter和impress:stepleave,在了解这些事件之前，先明白 step 这个概念，一个step就相当于PPT中的一页，每切换一页就相当于切换一个step。每一次切换都会触发上面所提到的两个事件：impress:stepenter和impress:stepleave，从而达到页面跳转的效果。

我们在使用 impress.js的时候，需要调用impress.js中的impress().init()函数：`



init() 函数是 impress 的主初始化函数，它的作用是初始化 impress API ,从而运行impress。在 init() 函数的结尾触发 impress:init事件，这样绑定上去的函数就会全部触发了。以下代码即是触发 impress:init事件：

triggerEvent( root, "impress:init", { api: roots[ "impress-root-" + rootId ] } );
 };       

Triggerevent（）方法：触发指定对象的指定事件，并且立即执行该事件中的脚本。
Triggerevent构造一个事件，该事件以 "eventnam"命名，用detail处理数据，并在el上执行。源码如下：

var triggerEvent = function( el, eventName, detail ) {
 var event = document.createEvent( "CustomEvent" );
 event.initCustomEvent( eventName, true, true, detail );
 el.dispatchEvent( event );
 };​

接下来我们看看 impress:init事件上绑定了哪些函数：
（1）为step添加一些有用的类：

root.addEventListener( "impress:init", function() {
// STEP CLASSES
 steps.forEach( function( step ) {
 step.classList.add( "future" );//所有尚未展示的 steps 都添加到都添加 `future` 类
 } );
root.addEventListener( "impress:stepenter", function( event ) {
 event.target.classList.remove( "past" );
 event.target.classList.remove( "future" );
 event.target.classList.add( "present" ); // 当某个step 被展示，`future`类会被移除，并被添加上 `present`类
 }, false );
root.addEventListener( "impress:stepleave", function( event ) {
 event.target.classList.remove( "present" );
 event.target.classList.add( "past" );//当某个step结束时， `present` 又会被替换成`past`类
 }, false );
}, false );​ 

通过上面的方法，每个 step 都会处于 future, present 和 past三个状态中的一个，这样使得我们在切换PPT的时候可以前后任意切换。
上面代码中用到了addEventListener() 方法，该方法用于向指定元素添加事件句柄。语法如下：element.addEventListener(event,function,useCapture);
参数 event:必需，指定事件名，不要使用"on"前缀；
function:指定事件要触发时执行的函数；
useCapture:可选（布尔值），指定事件是否在捕获或者冒泡时执行。
可使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

（2）添加hash变化支持：

root.addEventListener("impress:init", function(){
 
  var lastHash = "";  // 将lasthash清空
 // `#step-id`将被替换成`#/step-id`以防止浏览器在默认状态下滚动至hash表中所保存元素所在位置
 //
 // 而且添加hash的操作必须在动画结束以后进行, 因为在Chrome里会导致动画延迟
 // BUG: http://code.google.com/p/chromium/issues/detail?id=62820
 root.addEventListener("impress:stepenter", function (event) {
 window.location.hash = lastHash = "#/" + event.target.id;
 }, false);
 
 window.addEventListener("hashchange", function () {
 // 当某一step被展示时，location里的hash已经更新（就在上面几行）
 // 所以hash change事件被触发，我们将在同一step上再一次调用`goto`方法。
 // 为了避免这一情况，我们将存储上一次 hash 的结果并比较.
 if (window.location.hash !== lastHash) {
 goto( getElementFromHash() );
 }
 }, false);
 
 // 开始
 // 选择记录在url中的step地址，或者演示文稿的第一张step
 goto(getElementFromHash() || steps[0], 0);
 }, false);​

window.location.hash: hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
location.hash可以用来获取或设置页面的标签值。
通过 window.location.hash=hash这个语句来调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用。

（3）导航事件
键盘处理导航：
按键被按下时：

// 防止不允许被按下的键被意外按下
 document.addEventListener("keydown", function ( event ) {
 if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) {
 event.preventDefault();
 }
 }, false);​

preventDefault() 方法阻止元素发生默认的行为。

按键弹起时，触发impress动作(下一张或上一张)：

    document.addEventListener("keyup", function ( event ) {
     if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) {
     switch( event.keyCode ) {
     case 33: // 上翻页
     case 37: // 小键盘左
     case 38: // 小键盘上
     api.prev();
     break;
     case 9: // tab键
     case 32: // 空格
     case 34: // 下翻页
     case 39: // 小键盘右
     case 40: // 小键盘下
     api.next();
     break;
     }
     
     event.preventDefault();
     }
     }, false);​
 处理在当前演示 steps 上产生的单击事件（当前step上是否存在超链接）：

document.addEventListener("click", function ( event ) {
     // 事件冒泡处理
     // 检查单击的目标（及其祖先级容器）是否是超链接
     var target = event.target;
     while ( (target.tagName !== "A") &&
     (target !== document.documentElement) ) {
     target = target.parentNode;
     }
     
     if ( target.tagName === "A" ) {
     var href = target.getAttribute("href");
     
     // 如果指向某一连接，跳转至这一连接
     if ( href && href[0] === "#" ) {
     target = document.getElementById( href.slice(1) );
     }
     }
     
     if ( api.goto(target) ) {
     event.stopImmediatePropagation();//如果目标对象件被执行，将阻止剩下事件执行
     event.preventDefault();
     }
     }, false);​
event.stopImmediatePropagation() 方法阻止剩下的事件处理程序被执行，该方法阻止事件在 DOM 树中向上冒泡。
处理在当前演示 steps 上产生的单击事件：

    document.addEventListener("click", function ( event ) {
     var target = event.target;
     // 查找距当前活跃step最近的不活跃step
     while ( !(target.classList.contains("step") && !target.classList.contains("active")) &&
     (target !== document.documentElement) ) {
     target = target.parentNode;
     }
     
     if ( api.goto(target) ) {
     event.preventDefault();
     }
     }, false);     
处理触摸屏上上轻击屏幕左边或者右边的事件：document.addEventListener("touchstart", function ( event ) {
 if (event.touches.length === 1) {
 var x = event.touches[0].clientX,
 width = window.innerWidth * 0.3,
 result = null;
 
 if ( x < width ) {
 result = api.prev();
 } else if ( x > window.innerWidth - width ) {
 result = api.next();
 }
 
 if (result) {
 event.preventDefault();
 }
 }
 }, false);

当窗口大小改变时，重新计算窗口大小：

window.addEventListener("resize", throttle(function () {
 // 强制激活当前step
 api.goto( document.querySelector(".step.active"), 500 );
 }, 250), false);   

impress总共有4个API，分别是goto(), init(), next(), prev()。
impress的切换主要通过 goto()来实现，goto API 跳转至以el参数(索引,id或元素名)标记的step 。prev API 按文档顺序跳回上一 step ，next API 按文档顺序跳向下一 step 。