barbajs源码分析

就算有官方文档 其实做起来还是有些一头雾水啊。。。。
官方地址：http://barbajs.org/index.html

运行流程如下：
每一个应用基本上都先调用这两个方法

Barba.Pjax.init();
Barba.Prefetch.init();

• onLinkClick 函数init时，会监听整个儿document的click事件，交给onLinkClick函数执行。
• onLinkClick函数先将所有点击元素的默认事件取消，trigger一个linkClicked事件，将点击元素和事件传递进去
• 然后取得这个元素的href，运行goTo函数
• goTo函数pushState，塞进一个历史，运行onStateChange函数
• onStateChange函数在'popstate'事件之后或者goTo函数之后运行
• onStateChange函数运行load方法，取得后台数据，返回一个newContainer
• onStateChange函数通过getTransition函数初始化一个transition对象，运行transition.init方法，将this.Dom.getContainer(),newContainer带入 这是oldContainer, newContainer

BaseView类分析

BaseView里面写了一些接口函数和一些监听函数，如果trigger了相关监听，则调用里面的接口函数。

• 接口函数有：

  • namespace 视图命名空间 需要与container的data-namespace关联
  • extend 对象继承
  • onEnter 当 container准备装载到dom上触发
  • onEnterCompleted 当这个container过场动画完成触发
  • onLeave 一个新container开始其过场动画触发
  • onLeaveCompleted container从dom中被移除触发

• 在init方法中，写了所有的钩子

  • initStateChange钩子：两个参数 newStatus, oldStatus 如果oldStatus存在并其命名空间等于当前的命名空间，运行 onLeave
  • newPageReady钩子：三个参数 newStatus, oldStatus, container 如果newStatus其命名空间等于当前命名空间 运行onEnter
  • transitionCompleted钩子：两个参数 newStatus, oldStatus 还是判断命名空间，如是newStatus，运行onEnterCompleted 如是oldStatus，运行onLeaveCompleted

用法如下：

var Home = Barba.BaseView.extend({
  namespace: 'home',
  onEnter: function() {
  },
  onEnterCompleted: function() {
    document.body.classList.add('home');
  },
  onLeave: function() {
    document.body.classList.remove('home');
  },
  onLeaveCompleted: function() {
  }
});

Home.init();

var About = Barba.BaseView.extend({
  namespace: 'about',
  onEnter: function() {
  },
  onEnterCompleted: function() {
    document.body.classList.add('about');
  },
  onLeave: function() {
    document.body.classList.remove('about');
  },
  onLeaveCompleted: function() {
  }
});

About.init();

Barba.Pjax.start();

在pjax里面用到了上述监听
init方法

 Dispatcher.trigger('initStateChange', this.History.currentStatus());
    Dispatcher.trigger('newPageReady',
      this.History.currentStatus(),
      {},l
      container,
      this.Dom.currentHTML
    );
    Dispatcher.trigger('transitionCompleted', this.History.currentStatus());

onStateChange方法

Dispatcher.trigger('initStateChange',
      this.History.currentStatus(),
      this.History.prevStatus()
    );
var transitionInstance = transition.init(
      this.Dom.getContainer(),
      newContainer
    );

    newContainer.then(
      this.onNewContainerLoaded.bind(this)
    );

    transitionInstance.then(
      this.onTransitionEnd.bind(this)
    );
/**
   * new container一准备好就调用
   *
   * @memberOf Barba.Pjax
   * @private
   * @param {HTMLElement} container
   */
  onNewContainerLoaded: function(container) {
    var currentStatus = this.History.currentStatus();
    currentStatus.namespace = this.Dom.getNamespace(container);

    Dispatcher.trigger('newPageReady',
      this.History.currentStatus(),
      this.History.prevStatus(),
      container,
      this.Dom.currentHTML
    );
  },

  /**
   * 动画一结束就调用
   *
   * @memberOf Barba.Pjax
   * @private
   */
  onTransitionEnd: function() {
    this.transitionProgress = false;

    Dispatcher.trigger('transitionCompleted',
      this.History.currentStatus(),
      this.History.prevStatus()
    );
  }