cordova - Push.js 的替代品

Question

我正在使用 Phonegap 构建一个混合应用程序，但我不想使用 Ratchet，有没有替代 Ratchet's push.js 的选择？ ？

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

Answer 1

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

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

我喜欢你问的问题，因为目前尚不清楚如何填补极简主义 UI 框架之间的差距，这些框架并没有超出 ratchet 和 ChocolateChipUI 之类的原型(prototype)设计，与全角度框架 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);