javascript - 用于完全 ajax 网站中不同动态加载内容的 JS

Question

这是一篇完全更新的帖子，用改进的概念和代码(基于目前为止给出的答案)以更好的方式解释问题

我试图实现一个完全 ajax 的网站，但我遇到了多个绑定(bind)事件的问题。

这是基本的 HTML:

<header id="navigation">
    <ul>
        <li class="red" data-type="cars">Get Cars</li>
        <li class="red" data-type="vegetables">Get Vegetables</li>
    </ul>
</header>
<div id="anything">
    <section id="dymanic-content"></section>
</div>

导航是动态创建的(因为 #navigation 的内容可以用另一个导航替换)，所以导航元素的绑定(bind)看起来像这样:

$('#navigation').off('click', '.red').on('click', '.red', function() { 
    var type = $(this).attr('data-type');
    var data = { 'param': 'content', 'type': type };
    ajaxSend(data);
});

网站的内容也是动态加载的。例如有两种不同的内容:

1:

<div id="vegetables">Here are some information about vegetables: <button>Anything</button></div>

2:

<div id="cars"><img src="car.jpg"></div>

在加载内容时，我还将加载一个特定的 JS 文件，其中包含此类内容所需的所有绑定(bind)。所以加载脚本看起来像这样:

var ajaxSend = function(data) {
    $.ajax({ url: "script.php", type: "POST", data: data, dataType: "json" })
    .done(function( json ) {
        if (json.logged === false) { login(ajaxSend, data); }
        else {
            $.getScript( 'js/' + json.file + '.js' )
            .done(function( script, textStatus ) { 
                $('#result').html(json.antwort);
            });
        }
    });
}

当您传递所需结果类型的参数(即蔬菜或汽车)时，结果将显示在 #result 中。还将加载文件 cars.js 或 vegetables.js。

所以我的问题是避免多重事件绑定(bind)。我就是这样做的:

cars.js:

$('#result').off('mouseover', 'img').on('mouseover', 'img', function () { 
    // do anything
});

vegetables.js:

$('#result').off('click', 'button').on('click', 'button', function () { 
    // do anything
});

这是正确的方法吗？我认为使用 off() 只是一种解决方法。所以，如果有任何改进，我将不胜感激!

此外，我不知道是否存在问题，如果用户多次单击导航: 在这种情况下，js 文件会被多次加载，不是吗？那么这个概念有多重绑定(bind)吗？

Answer 1

当您提到一个一个完全使用 ajax 的网站时，我认为是一个SPA -- Ssingle P年龄申请。

区别可能是语义上的，但是 AJAX 意味着 DOM 操作，而 SPA 意味着 模板化 和导航。

HTML 模板在您的页面加载时加载。每个模板映射到特定的导航路线。主要变化不在于事件映射，而在于显示的模板以及是否加载了新数据。

See my example AngularJS SPA Plunkr

AngularJS 路由看起来像这样:

   scotchApp.config(function($routeProvider) {
     $routeProvider

     // route for the home page
     .when('/', {
       templateUrl: 'pages/home.html',
       controller: 'mainController'
     })

     // route for the cars page
     .when('/cars', {
       templateUrl: 'pages/Cars.html',
       controller: 'CarsController'
     })

     // route for the vegetables page
     .when('/vegetables', {
       templateUrl: 'pages/Vegetables.html',
       controller: 'VegetablesController'
     });
   });

所以每条路由都有对应的HTML Template和Controller(回调函数定义在其中)。

出于 CDN 的目的，模板可以作为 JSON 传回

     // route for the vegetables page
     .when('/vegetables', {
       template: '<div class="jumbotron text-center"><div class="row"><h3>Cars Page</h3>Available Cars: <a class="btn btn-primary" ng-click='LoadCars()'>LoadCars</a></div><div class="col-sm-4"><a class="btn btn-default" ng-click="sort='name'"> Make/Model</a></div><div class="col-sm-2"><a class="btn btn-default" ng-click="sort='year'"> Year</a></div><div class="col-sm-2"><a class="btn btn-default" ng-click="sort='price'"> Price</a></div><div class="row" ng-repeat="car in cars  | orderBy:sort"><div class="row"></div><div class="col-sm-4">{{ car.name }}</div><div class="col-sm-2">{{ car.year }}</div><div class="col-sm-2">${{ car.price }}</div></div></div>',
       controller: 'VegetablesController'
     });

• 在“模板化”应用程序中，每种类型的 HTML 都加载一次。

• 事件和控件绑定(bind)一次。

• 增量更改是 JSON 来回传递。您的端点不负责呈现 HTML。他们可以休息，并且有明确的关注点分离。

• 您可以使用 AngularJS、Ember、Backbone、JQuery 等。