javascript - 将pushState()和popstate添加到我的项目中

Question

我正在做一个有画廊的项目。图库的工作方式是用户看到一个图像列表，每个图像都是一个“相册”，链接到给定图库的更多图像。我目前正在使用该功能，但是当用户在转到所选图库后单击后退按钮时，他们不会返回到相册列表。例如，如果您在主页，单击相册页面，然后打开一个图库。单击后退按钮后，您将返回主页。

所以我想解决这个问题，我可以使用历史API并使用pushState和popstate。我的问题是我无法让它工作，并且我不确定在给定脚本中将函数放在哪里。

如果您想要我正在开发的网站的实时版本，请访问:Live Demo

这是我当前的脚本:

(function(code) {
  code(window.jQuery, window, document);
}(function($, window, document) {
  $(function() {
    initialize();
  });

  function initialize() {
    $.getJSON('/assets/js/images.json', function(json) {
      $.each(json.albums, function(i, item) {
        var photos = item.photos,
            name   = item.name,
            id     = item.id;

        showAlbums(photos, name, id);
      });  
    });
  }
  function showAlbums(p, n, i) {
    var albums    = $('.albums'),
        gallery   = $('.gallery'),
        album     = $('#templates #album .thumb').clone(true),
        thumbnail = album.find('.thumbnail'),
        image     = album.find('.image'),
        caption   = album.find('.caption h4');

    thumbnail.attr('href', '#').attr('title', n).attr('data-url', i);
    image.attr('src', p[0].href).attr('alt', n);
    caption.html(n);

    albums.append(album);

    album.on('click', 'a', function(e) {
      e.preventDefault();
      albums.hide();
      gallery.empty().show();
      document.title = "Schultz | " + n;
      $.each(p, function(i, item) {
        var photo = item.href;
        showGallery(photo, n);
      });
    });
  }
  function showGallery(p, n) {
    var gallery = $('.gallery'),
        images  = $('#templates #gallery .thumb').clone(),
        link    = images.find('.thumbnail'),
        image   = images.find('.thumbnail img');

    link.attr('href', p).attr('title', n).attr('data-gallery', '');
    image.attr('src', p).attr('alt', n);

    gallery.append(images);
  }
}));

感谢任何帮助，谢谢

Answer 1

本质上，您想要做的是将相册点击处理程序重构为一个函数，可以在初始化之外调用该函数来构建相册 View ，然后在单击相册时调用该函数，以及 popstate(后退/前进)。

为了实现这一点，您应该存储对您为构建图库而提取的 JSON 数据的引用(数据本身或用于检索它的 XHR)。这样我们就可以编写一个“showAlbum”函数，它需要一个索引或 ID，我们可以用它来访问数据中选定的专辑。

所以像这样:

// As you're doing your initialization, process the JSON array of albums
// into a hash by ID (this is one of many ways to go about this, a more
// robust solution would be to use the XHR promise to ensure the JSON is
// always there when you need it).
var albumData = {};

function initialize () {
  $.getJSON('/assets/js/images.json', function(json) {
    $.each(json.albums, function(i, item) {
      var photos = item.photos,
          name   = item.name,
          id     = item.id;

      // Same as you have now, but with this line:
      albumData[id] = item;

      showAlbums(photos, name, id);
    });  
  });
}


// Then we create a function to show an album by ID, essentially the same as
// your click handler now, but retrieving the data from the structure we
// built out of the JSON.
function showAlbumById (id) {
  e.preventDefault();
  var album = albumData[id]
    , photos = album.photos
    , name = album.name;
  albums.hide();
  gallery.empty().show();
  document.title = "Schultz | " + n;
  $.each(photos, function(i, item) {
    showGallery(item.href, name);
  });
});

然后，您将替换专辑点击处理程序以推送状态并调用该函数。在这里，我使用查询变量来表示 URL 中的状态，并使用 theAlbumId 来清楚起见(在代码中它由 i 引用)。如果添加“返回相册”按钮，您将执行类似的处理程序，但推送 URL没有查询变量。

album.on('click', 'a', function(e) {
  e.preventDefault();
  history.pushState({}, '', '?id='+theAlbumID);
  showAlbumById(theAlbumId);
});

这应该处理pushState部分，但是popstate部分需要更多的工作。我们需要能够在两种状态之间前进和后退:显示单个专辑或显示专辑索引。为此，您需要为 popstate 事件添加一个处理程序。

// define `onpopstate` or add a listener for `popstate` on the window
window.onpopstate = function (state) {
  // pseudocode, you'd need to write or find a function to pull query vars
  var albumId = getQueryParameter('id');

  // if an album ID is in the query string, show it
  if (albumId) {
    showAlbumById(albumId);
  } 
  // otherwise show the index (this should probably be another function)
  else {
    albums.show();
    gallery.empty().hide();
    document.title = "Schultz";
  }
};

最后，为了处理用户刷新页面或直接访问相册 URL，您还需要在页面加载时检查相册 ID 的查询字符串，并像在 popstate 中一样显示相册(popstate 在某些情况下浏览器在页面加载时运行，但它不应该运行)