javascript - 在没有 MV* 框架的情况下组织 jQuery AJAX

Question

我正在构建一个静态站点，需要页面之间平滑的页面转换。当单击任何链接时，这些页面将被 AJAX 加载，以保持顺利并防止页面重新加载。

由于所有内容都是静态 HTML(使用 Grunt 在本地编译)，我认为不需要像 Backbone 或 Angular 这样的 MV* 框架。这可能有点矫枉过正，因为我并没有真正以任何有意义的方式处理数据。我真正需要的是 jQuery 库的 AJAX 部分。

我的问题是，有人知道有一个框架可以在 jQuery 中组织 AJAX 调用而不需要进一步的复杂性吗？或者是否有任何组织这些通话的提示，因为我可以看到它们很快就会变得困惑。

Answer 1

如何创建一个包含所有静态页面( View )和相关 href anchor 的对象，例如:

var views = [

   { view: '/about.html',href:'#about'},
   { view: '/contact.html', href'#contact'}

];

所以在html中

<a href="#contact">Contact</a> |
<a href="#about">About</a>

<div id="viewStage"></div>

使用一些jquery和一个函数来监视地址栏中的哈希更改并将其连接到为其定义的 View 。:

(function() {

   var $viewStage = $('#viewStage');

   function loadView(view) {

     $viewStage.html('<div class="loading"></div>').load(view);

   }

   /* matches the hash url to the view in the 'views' array of objects */
   function getView(hash) {
      for (var i=0, i < views.length; i++) {
         if (views[i].href === hash) { return views[i].view; break; }
      }    
   }

    /* listen for the anchor hashtag change */
    $(window).on('hashchange', function() {

       loadView(getView(document.location.hash));

     });

})();

---

除了 之外，我没有解决在加载之间创建页面过渡效果的问题，希望您能看到在 loadView() 中，我们有机会在您清除之前做一些事情#viewStage div 中的 html 并加载新内容。

---

这是我希望的一些东西的开始(没有 M 和有争议的 C 的 MVC)简短而友好 - 因为它对地址栏中的哈希使用react。

---

编辑:这里有一个 jquery 哈希更改监听器抽象可供使用 - 所以添加了这一点。