note.js

《征服Ajax》原书的例题源码

Effect.Base = function() {};
Effect.Base.prototype = {
  position: null,
  start: function(options) {
    // 默认参数
    this.options      = Object.extend(Object.extend({},Effect.DefaultOptions),
     options || {});

    // 当前帧序号为0
    this.currentFrame = 0;

    // 状态设置为'idle'
    this.state        = 'idle';

    // 特效启动的时间，单位是毫秒
    this.startOn      = this.options.delay*1000;

    // 特效终止时间=特效启动时间+特效持续时间
    this.finishOn     = this.startOn + (this.options.duration*1000);

    // 执行beforeStart事件响应函数
    this.event('beforeStart');

    // 如果是非同步执行特效，则将当前特效的实例加入到Effect.Queues队列中
    if(!this.options.sync)
      Effect.Queues.get(typeof this.options.queue == 'string' ?
        'global' : this.options.queue.scope).add(this);
  },

  // loop方法：当特效对象加入Effect.Queues队列以后，loop方法会被周期性的调用
  loop: function(timePos) {
    if(timePos >= this.startOn) {
      // 特效持续时间已到
      if(timePos >= this.finishOn) {
        // 重绘最终页面
        this.render(1.0);

        // 取消特效
        this.cancel();

        // 执行beforeFinish事件响应函数
        this.event('beforeFinish');

        // 如果定义了finish方法，执行之
        if(this.finish) this.finish();

        // 执行afterFinish事件响应函数
        this.event('afterFinish');
        return;
      }

      // 特效仍需继续执行
      var pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
      var frame = Math.round(pos * this.options.fps * this.options.duration);
      if(frame > this.currentFrame) {
        // 重绘页面
        this.render(pos);
        this.currentFrame = frame;
      }
    }
  },

  // render函数的功能是切换到下一帧并更新页面元素的显示
  render: function(pos) {
    // 如果当前特效的运行状态是'idle'，说明特效对象是第一次执行render方法
    if(this.state == 'idle') {
      // 设置状态为'running'
      this.state = 'running';

      // 执行beforeSetup事件响应函数
      this.event('beforeSetup');

      // 如果定义了setup方法，执行之
      if(this.setup) this.setup();

      // 执行afterSetup事件响应函数
      this.event('afterSetup');
    }

    // 如果当前特效的运行状态是'running'
    if(this.state == 'running') {
      // 计算下一个position值
      if(this.options.transition) pos = this.options.transition(pos);
      pos *= (this.options.to-this.options.from);
      pos += this.options.from;
      this.position = pos;

      // 执行beforeUpdate事件响应函数
      this.event('beforeUpdate');

      // 如果定义了update方法，执行之
      if(this.update) this.update(pos);

      // 执行afterUpdate事件响应函数
      this.event('afterUpdate');
    }
  },

  // cancel函数的功能是终止当前特效对象的执行
  cancel: function() {
    // 如果特效不是同步运行状态
    if(!this.options.sync)
      // 从Effect.Queues队列中移除当前的特效对象
      Effect.Queues.get(typeof this.options.queue == 'string' ?
        'global' : this.options.queue.scope).remove(this);

    // 设置当前特效的状态为'finished'
    this.state = 'finished';
  },

  // event函数的功能是执行相应的事件响应函数
  event: function(eventName) {
    // 如果定义了名称为（事件名+Internal）的方法，执行之
    if(this.options[eventName + 'Internal'])
      this.options[eventName + 'Internal'](this);

    // 如果定义了和事件名相同的事件响应函数，执行之;这里可以看出，
    // 当Internal方法和与事件名同名的方法同时存在时，Internal方法将先被执行
    if(this.options[eventName]) this.options[eventName](this);
  },
  inspect: function() {
    return '#<Effect:' + $H(this).inspect() + ',options:' +
     $H(this.options).inspect() + '>';
  }
}