backbone h5 history 的使用

[mishe]

基于backbone h5 history 的使用

backbone h5 history 的代码

先来看下 backbone的backbone.route.navigate 代码源码

navigate: function(fragment, options) {
      if (!History.started) return false;
      if (!options || options === true) options = {trigger: !!options};

      // Normalize the fragment.
      fragment = this.getFragment(fragment || '');

      // Don't include a trailing slash on the root.
      var root = this.root;
      if (fragment === '' || fragment.charAt(0) === '?') {
        root = root.slice(0, -1) || '/';
      }
      var url = root + fragment;

      // Strip the hash and decode for matching.
      fragment = this.decodeFragment(fragment.replace(pathStripper, ''));

      if (this.fragment === fragment) return;
      this.fragment = fragment;

      // If pushState is available, we use it to set the fragment as a real URL.
      if (this._usePushState) {
        this.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, url);

      // If hash changes haven't been explicitly disabled, update the hash
      // fragment to store history.
      } else if (this._wantsHashChange) {
        this._updateHash(this.location, fragment, options.replace);
        if (this.iframe && (fragment !== this.getHash(this.iframe.contentWindow))) {
          var iWindow = this.iframe.contentWindow;

          // Opening and closing the iframe tricks IE7 and earlier to push a
          // history entry on hash-tag change.  When replace is true, we don't
          // want this.
          if (!options.replace) {
            iWindow.document.open();
            iWindow.document.close();
          }

          this._updateHash(iWindow.location, fragment, options.replace);
        }

      // If you've told us that you explicitly don't want fallback hashchange-
      // based history, then `navigate` becomes a page refresh.
      } else {
        return this.location.assign(url);
      }
      if (options.trigger) return this.loadUrl(fragment);
    },

backbone 是否使h5方式还是hash方式的条件是this._usePushState==true

在来看this._usePushState的定义函数是backbone.history.start 函数

start: function(options) {
      if (History.started) throw new Error('Backbone.history has already been started');
      History.started = true;

      // Figure out the initial configuration. Do we need an iframe?
      // Is pushState desired ... is it available?
      this.options          = _.extend({root: '/'}, this.options, options);
      this.root             = this.options.root;
      this._wantsHashChange = this.options.hashChange !== false;
      this._hasHashChange   = 'onhashchange' in window;
      this._useHashChange   = this._wantsHashChange && this._hasHashChange;
      this._wantsPushState  = !!this.options.pushState;
      this._hasPushState    = !!(this.history && this.history.pushState);
      this._usePushState    = this._wantsPushState && this._hasPushState;
.....

可以看出，是否启用pushstate是有当前页面是否支持pushstate和页面调用backbone.history.start函数时，是否指定使用pushstate一起来决定的。

使用backbone的H5 history

1.开启backbone route的使用pushstate方式

Backbone.history.start({pushState: true});

2. 配置route表

module.exports=Backbone.Router.extend({
    initialize:function(){},
    routes:{
        '':                             'home',
....
}

3.执行页面的跳转

router.navigate(path, {trigger:true});

trigger:true的配置项，是为了让页面的地址栏变化的同时，也改变页面的内容展示，否则只改变页面地址，不改变内容。

4.如果当前页面是一个tab页

每个tab页都有独立的地址，每次切换tab都会留下历史记录，使得页面的后退，陷入循环中，为了处理这个问题，需要设置replace：true来解决。

router.navigate(hash_path, {trigger:true,replace:replace});

5. 页面跳转的简单封装

为了实现统一跳转入口，实现以上的2组跳转，可以简单封装一个函数

changePage: function (hash_path,replace) {
        st.router.navigate(hash_path, {trigger:true,replace:replace});
}

以后每次调用，只要简单的把需要跳转的地址传入就好，如果是tab页，也只要把第二个参数设置为true