impress.js 源码分析

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节点是不是
        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" element
    arrayify(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 steps
    steps = $$(".step", root);
    steps.forEach(initStep);
    // 找到每一个class为”step“的元素，返回root(id=“impress”)的数组
    // forEach遍历每一个数组，对每个div用initstep()函数初始化
    //即我们一开始分析的那个函数。主要是把data-*自定义的数据获得，附上transtion样式。
    // set a default initial state of the canvas
    currentState = {
        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 CLASSES
    steps.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代码的兼容性等细节都是值得学习的地方。