摘要：構造一個事件，該事件以命名，用處理數據，并在上執行。導航事件鍵盤處理導航按鍵被按下時防止不允許被按下的鍵被意外按下方法阻止元素發生默認的行為。的切換主要通過來實現，跳轉至以參數索引或元素名標記的。

引子

   斷斷續續用了好幾天，終于把 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 。
?

?