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

引子

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

   接下來就由我給大家分享下 impress.js 效果是如何實現(xiàn)的、以及我們怎么利用它來實現(xiàn)特效。

impress.js的實現(xiàn)

我們在用 impress.js實現(xiàn)特效時，會用到類似下面的代碼：

?

我們看到代碼中有data-x，data-y等屬性，實際上我們就是通過改變這些屬性的值來實現(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è)置它相對X軸旋轉(zhuǎn)多少度

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

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

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

：var data = el.dataset,
 step = {
 translate: {//對給定數(shù)據(jù)構(gòu)造平移變換
 x: toNumber( data.x ),
 y: toNumber( data.y ),
 z: toNumber( data.z )
 },
 rotate: {//對給定數(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 ),//對給定數(shù)據(jù)構(gòu)造縮放變換
 el: el
 };??     

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

我們在使用 impress.js的時候，需要調(diào)用impress.js中的impress().init()函數(shù)：`

?

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

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

Triggerevent（）方法：觸發(fā)指定對象的指定事件，并且立即執(zhí)行該事件中的腳本。
Triggerevent構(gòu)造一個事件，該事件以 "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 );
 };??

接下來我們看看 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)某個step 被展示，`future`類會被移除，并被添加上 `present`類
 }, false );
root.addEventListener( "impress:stepleave", function( event ) {
 event.target.classList.remove( "present" );
 event.target.classList.add( "past" );//當(dāng)某個step結(jié)束時， `present` 又會被替換成`past`類
 }, false );
}, false );?? 

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

（2）添加hash變化支持：

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

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

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

// 防止不允許被按下的鍵被意外按下
 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)的行為。

按鍵彈起時，觸發(fā)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);??
 處理在當(dāng)前演示 steps 上產(chǎn)生的單擊事件（當(dāng)前step上是否存在超鏈接）：

document.addEventListener("click", function ( event ) {
     // 事件冒泡處理
     // 檢查單擊的目標(biāo)（及其祖先級容器）是否是超鏈接
     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)對象件被執(zhí)行，將阻止剩下事件執(zhí)行
     event.preventDefault();
     }
     }, false);??
event.stopImmediatePropagation() 方法阻止剩下的事件處理程序被執(zhí)行，該方法阻止事件在 DOM 樹中向上冒泡。
處理在當(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)窗口大小改變時，重新計算窗口大?。?/p>

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

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

?