cordova - Push.js 的替代方案

Question

我正在使用 Phonegap 构建一个混合应用程序，但我不想使用 Ratchet，是否有任何替代Ratchet 的 push.js 的方法？

我希望用户在不刷新页面的情况下在页面之间移动。

Answer 1

一种选择是找到一个功能路由器（例如 Backbone 的），从 push.js 中提取内容加载/转换代码，然后编写一些自定义代码来打包并将您的 UI 注入到 DOM 中。

push.js 有代码来管理浏览器历史缓存并发出 ajax 请求以支持其内容请求。如果您正在使用像 Backbone 这样的 MV*（就像我一样），您可以将您的视图打包并输入到 push.js successXHR 处理程序的修改版本中。除此之外，swapContent方法bars和transitionMap关联数组是您将内容附加到 DOM 并转换到新页面所需的全部内容。

我喜欢您提出的问题，因为目前尚不清楚如何填补极简 UI 框架之间的空白，这些框架与棘轮和 ChocolateChipUI 之类的原型设计相距不远，而全角框架 Ionic 或 OnsenUI。

以下是您需要从 push.js 中借用的代码元素

    var transitionMap  = {
      slideIn  : 'slide-out',
      slideOut : 'slide-in',
      fade     : 'fade'
    };

    var bars = {
      bartab             : '.bar-tab',
      barnav             : '.bar-nav',
      barfooter          : '.bar-footer',
      barheadersecondary : '.bar-header-secondary'
    };

    var transition = function (data, options) {
        var key;
        var barElement;

        if (data.title) {
          document.title = data.title;
        }

        if (options.transition) {
            for (key in bars) {
                if (bars.hasOwnProperty(key)) {
                    barElement = document.querySelector(bars[key]);
                    if (data[key]) {
                        swapContent(data[key], barElement);
                    } else if (barElement) {
                        barElement.parentNode.removeChild(barElement);
                    }
                }
            }
        }

        swapContent(data.contents, options.container, options.transition, function () {});

    };

    var swapContent = function (swap, container, transition, complete) {
        var enter;
        var containerDirection;
        var swapDirection;

        if (!transition) {
            if (container) {
              container.innerHTML = swap.innerHTML;
            } else if (swap.classList.contains('content')) {
              document.body.appendChild(swap);
            } else {
              document.body.insertBefore(swap, document.querySelector('.content'));
            }
        } else {
            enter  = /in$/.test(transition);

            if (transition === 'fade') {
              container.classList.add('in');
              container.classList.add('fade');
              swap.classList.add('fade');
            }

            if (/slide/.test(transition)) {
              swap.classList.add('sliding-in', enter ? 'right' : 'left');
              swap.classList.add('sliding');
              container.classList.add('sliding');
            }

            container.parentNode.insertBefore(swap, container);
        }

        if (!transition) {
            complete && complete();
        }

        if (transition === 'fade') {
            container.offsetWidth; // force reflow
            container.classList.remove('in');
            var fadeContainerEnd = function () {
                container.removeEventListener('webkitTransitionEnd', fadeContainerEnd);
                swap.classList.add('in');
                swap.addEventListener('webkitTransitionEnd', fadeSwapEnd);
            };
            var fadeSwapEnd = function () {
                swap.removeEventListener('webkitTransitionEnd', fadeSwapEnd);
                container.parentNode.removeChild(container);
                swap.classList.remove('fade');
                swap.classList.remove('in');
                complete && complete();
            };
            container.addEventListener('webkitTransitionEnd', fadeContainerEnd);
        }

        if (/slide/.test(transition)) {
            var slideEnd = function () {
                swap.removeEventListener('webkitTransitionEnd', slideEnd);
                swap.classList.remove('sliding', 'sliding-in');
                swap.classList.remove(swapDirection);
                container.parentNode.removeChild(container);
                complete && complete();
            };

            container.offsetWidth; // force reflow
            swapDirection      = enter ? 'right' : 'left';
            containerDirection = enter ? 'left' : 'right';
            container.classList.add(containerDirection);
            swap.classList.remove(swapDirection);
            swap.addEventListener('webkitTransitionEnd', slideEnd);
        }
    };

您可以过渡到新内容

var data = {
  bartab             : menuDOM,
  barnav             : navigationDOM,
  barfooter          : null,
  barheadersecondary : null
  title: "New Page",
  content: pageContentDOM
};


var options = {
        transition: "slide-in",
        container: document.querySelector(".content")
};

transition(data, options);