摘要：構(gòu)造一個(gè)事件，該事件以命名，用處理數(shù)據(jù)，并在上執(zhí)行。導(dǎo)航事件鍵盤處理導(dǎo)航按鍵被按下時(shí)防止不允許被按下的鍵被意外按下方法阻止元素發(fā)生默認(rèn)的行為。的切換主要通過(guò)來(lái)實(shí)現(xiàn)，跳轉(zhuǎn)至以參數(shù)索引或元素名標(biāo)記的。

引子

   斷斷續(xù)續(xù)用了好幾天，終于把 impress.js 源碼看完，作為剛?cè)腴T的前端菜鳥(niǎo)，這是我第一次看 js 源碼，最初還是比較痛苦的。不過(guò)還好，impress.js源碼的注釋相當(dāng)清楚，每個(gè)函數(shù)和事件的作用都寫得很詳細(xì)，這讓源碼讀起來(lái)更容易理解，此處手動(dòng)給大神送糖果~~~

   接下來(lái)就由我給大家分享下 impress.js 效果是如何實(shí)現(xiàn)的、以及我們?cè)趺蠢盟鼇?lái)實(shí)現(xiàn)特效。

impress.js的實(shí)現(xiàn)

我們?cè)谟?impress.js實(shí)現(xiàn)特效時(shí)，會(huì)用到類似下面的代碼：

?

我們看到代碼中有data-x，data-y等屬性，實(shí)際上我們就是通過(guò)改變這些屬性的值來(lái)實(shí)現(xiàn)PPT的跳轉(zhuǎn)的。這些屬性分別代表：

data-x：幻燈片的X坐標(biāo)

data-y：幻燈片的Y坐標(biāo)

data-scale：幻燈片顯示的縮放比例

data-rotate：幻燈片旋轉(zhuǎn)的度數(shù)

data-rotate-x：3D使用，設(shè)置它相對(duì)X軸旋轉(zhuǎn)多少度

data-rotate-y：3D使用，設(shè)置它相對(duì)Y軸旋轉(zhuǎn)多少度

data-rotate-z：3D使用，設(shè)置它性對(duì)Z軸旋轉(zhuǎn)多少度
我們來(lái)看看impress源碼中的 rotate函數(shù)：

//"rotate"對(duì)給定數(shù)據(jù)構(gòu)造旋轉(zhuǎn)變換
//默認(rèn)旋轉(zhuǎn)順序?yàn)閄,Y,Z,可以將參數(shù)設(shè)定為true來(lái)倒轉(zhuǎn)順序
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函數(shù)的作用是將rotate對(duì)象轉(zhuǎn)換成css使用的字符串。
用戶自定義的數(shù)據(jù)通過(guò)data屬性讀取，并初始化給step對(duì)象。對(duì)應(yīng)源碼如下

：var data = el.dataset,
 step = {
 translate: {//對(duì)給定數(shù)據(jù)構(gòu)造平移變換
 x: toNumber( data.x ),
 y: toNumber( data.y ),
 z: toNumber( data.z )
 },
 rotate: {//對(duì)給定數(shù)據(jù)構(gòu)造旋轉(zhuǎn)變換
 x: toNumber( data.rotateX ),
 y: toNumber( data.rotateY ),
 z: toNumber( data.rotateZ || data.rotate )
 },
 scale: toNumber( data.scale, 1 ),//對(duì)給定數(shù)據(jù)構(gòu)造縮放變換
 el: el
 };??     

我們?cè)诰帉慔TML時(shí)，通過(guò)改變data的屬性值實(shí)現(xiàn)頁(yè)面切換，那么在源碼中，又是怎么來(lái)實(shí)現(xiàn)的呢?
在impress.js源碼中，主要通過(guò)三個(gè)事件來(lái)實(shí)現(xiàn)impress的運(yùn)行，它們分別是impress:init,impress:stepenter和impress:stepleave,在了解這些事件之前，先明白 step 這個(gè)概念，一個(gè)step就相當(dāng)于PPT中的一頁(yè)，每切換一頁(yè)就相當(dāng)于切換一個(gè)step。每一次切換都會(huì)觸發(fā)上面所提到的兩個(gè)事件：impress:stepenter和impress:stepleave，從而達(dá)到頁(yè)面跳轉(zhuǎn)的效果。

我們?cè)谑褂?impress.js的時(shí)候，需要調(diào)用impress.js中的impress().init()函數(shù)：`

?

init() 函數(shù)是 impress 的主初始化函數(shù)，它的作用是初始化 impress API ,從而運(yùn)行impress。在 init() 函數(shù)的結(jié)尾觸發(fā) impress:init事件，這樣綁定上去的函數(shù)就會(huì)全部觸發(fā)了。以下代碼即是觸發(fā) impress:init事件：

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

Triggerevent（）方法：觸發(fā)指定對(duì)象的指定事件，并且立即執(zhí)行該事件中的腳本。
Triggerevent構(gòu)造一個(gè)事件，該事件以 "eventnam"命名，用detail處理數(shù)據(jù)，并在el上執(zhí)行。源碼如下：

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

接下來(lái)我們看看 impress:init事件上綁定了哪些函數(shù)：
（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" ); // 當(dāng)某個(gè)step 被展示，`future`類會(huì)被移除，并被添加上 `present`類
 }, false );
root.addEventListener( "impress:stepleave", function( event ) {
 event.target.classList.remove( "present" );
 event.target.classList.add( "past" );//當(dāng)某個(gè)step結(jié)束時(shí)， `present` 又會(huì)被替換成`past`類
 }, false );
}, false );?? 

通過(guò)上面的方法，每個(gè) step 都會(huì)處于 future, present 和 past三個(gè)狀態(tài)中的一個(gè)，這樣使得我們?cè)谇袚QPPT的時(shí)候可以前后任意切換。
上面代碼中用到了addEventListener() 方法，該方法用于向指定元素添加事件句柄。語(yǔ)法如下：element.addEventListener(event,function,useCapture);
參數(shù) event:必需，指定事件名，不要使用"on"前綴；
function:指定事件要觸發(fā)時(shí)執(zhí)行的函數(shù)；
useCapture:可選（布爾值），指定事件是否在捕獲或者冒泡時(shí)執(zhí)行。
可使用 removeEventListener() 方法來(lái)移除 addEventListener() 方法添加的事件句柄。

（2）添加hash變化支持：

root.addEventListener("impress:init", function(){
 
  var lastHash = "";  // 將lasthash清空
 // `#step-id`將被替換成`#/step-id`以防止瀏覽器在默認(rèn)狀態(tài)下滾動(dòng)至hash表中所保存元素所在位置
 //
 // 而且添加hash的操作必須在動(dòng)畫結(jié)束以后進(jìn)行, 因?yàn)樵贑hrome里會(huì)導(dǎo)致動(dòng)畫延遲
 // 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 () {
 // 當(dāng)某一step被展示時(shí)，location里的hash已經(jīng)更新（就在上面幾行）
 // 所以hash change事件被觸發(fā)，我們將在同一step上再一次調(diào)用`goto`方法。
 // 為了避免這一情況，我們將存儲(chǔ)上一次 hash 的結(jié)果并比較.
 if (window.location.hash !== lastHash) {
 goto( getElementFromHash() );
 }
 }, false);
 
 // 開(kāi)始
 // 選擇記錄在url中的step地址，或者演示文稿的第一張step
 goto(getElementFromHash() || steps[0], 0);
 }, false);??

window.location.hash: hash 屬性是一個(gè)可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號(hào)開(kāi)始的部分）。
location.hash可以用來(lái)獲取或設(shè)置頁(yè)面的標(biāo)簽值。
通過(guò) window.location.hash=hash這個(gè)語(yǔ)句來(lái)調(diào)整地址欄的地址，使得瀏覽器里邊的“前進(jìn)”、“后退”按鈕能正常使用。

（3）導(dǎo)航事件
鍵盤處理導(dǎo)航：
按鍵被按下時(shí)：

// 防止不允許被按下的鍵被意外按下
 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() 方法阻止元素發(fā)生默認(rèn)的行為。

按鍵彈起時(shí)，觸發(fā)impress動(dòng)作(下一張或上一張)：

    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: // 上翻頁(yè)
     case 37: // 小鍵盤左
     case 38: // 小鍵盤上
     api.prev();
     break;
     case 9: // tab鍵
     case 32: // 空格
     case 34: // 下翻頁(yè)
     case 39: // 小鍵盤右
     case 40: // 小鍵盤下
     api.next();
     break;
     }
     
     event.preventDefault();
     }
     }, false);??
 處理在當(dāng)前演示 steps 上產(chǎn)生的單擊事件（當(dāng)前step上是否存在超鏈接）：

document.addEventListener("click", function ( event ) {
     // 事件冒泡處理
     // 檢查單擊的目標(biāo)（及其祖先級(jí)容器）是否是超鏈接
     var target = event.target;
     while ( (target.tagName !== "A") &&
     (target !== document.documentElement) ) {
     target = target.parentNode;
     }
     
     if ( target.tagName === "A" ) {
     var href = target.getAttribute("href");
     
     // 如果指向某一連接，跳轉(zhuǎn)至這一連接
     if ( href && href[0] === "#" ) {
     target = document.getElementById( href.slice(1) );
     }
     }
     
     if ( api.goto(target) ) {
     event.stopImmediatePropagation();//如果目標(biāo)對(duì)象件被執(zhí)行，將阻止剩下事件執(zhí)行
     event.preventDefault();
     }
     }, false);??
event.stopImmediatePropagation() 方法阻止剩下的事件處理程序被執(zhí)行，該方法阻止事件在 DOM 樹(shù)中向上冒泡。
處理在當(dāng)前演示 steps 上產(chǎn)生的單擊事件：

    document.addEventListener("click", function ( event ) {
     var target = event.target;
     // 查找距當(dāng)前活躍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);

當(dāng)窗口大小改變時(shí)，重新計(jì)算窗口大?。?/p>

window.addEventListener("resize", throttle(function () {
 // 強(qiáng)制激活當(dāng)前step
 api.goto( document.querySelector(".step.active"), 500 );
 }, 250), false);   

impress總共有4個(gè)API，分別是goto(), init(), next(), prev()。
impress的切換主要通過(guò) goto()來(lái)實(shí)現(xiàn)，goto API 跳轉(zhuǎn)至以el參數(shù)(索引,id或元素名)標(biāo)記的step 。prev API 按文檔順序跳回上一 step ，next API 按文檔順序跳向下一 step 。
?

?