javascript - 使用 requirejs 仅在用户交互时加载 jquery 插件

Question

我第一次开始使用 require js/模块化开发，并且很喜欢我所看到的。

我想要实现的目标基本上是仅在需要时加载某些自定义 jQ 模块。我的主要目标是页面性能。目前我只加载 require.js (这又加载 jQ 异步)，然后其他 jQ 代码/插件仅在用户交互时触发。

以下代码会被视为好/坏做法吗？有什么人会改变的吗？ (下面是 super 基本的例子)

MAIN.JS

require.config({
    paths: {
        "jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min"
    }
});

require(["jquery"], function($) {

    // overlay plugin
    $("a").on("click", function(e){
        var self = this;
        require(["overlay"], function (overlay) {
            overlay.init(self);
        });
        e.preventDefault();
    });

});

OVERLAY.JS

define(function () {
  return {
    init: function(self) {
        $.ajax({
           url: self.href,
           success: function (data) {
              $("#results").html($(data).filter('#details').html());
           },
           dataType: 'html'
        });
        $('#results').fadeIn();
    }
  }
});

干杯，阿迪。

Answer 1

加载overlay的方法是正确使用require，但是有一些事情:

Overlay.js 应该将 jQuery 列为依赖项。确保您的模块具有运行所需的所有代码。在这种情况下，这很好(因为您在 require 中获取了 jQuery)，但如果您使用 document.addEventListener 来附加您的点击，那么您就不再确定 jQuery 会可供 $.ajax 使用。很高兴知道您的模块会请求它们所需的一切，而不是靠运气获得。

我尝试遵循的一条规则是将所有 DOM 相关内容保留在 main 中。例如:

叠加

// Example code, and not complete
define(function(require) {
    var $ = require('jquery');

    return {
        init: function(elements) {
            this.trigger = $(elements.trigger);
            this.target = $(elements.target);

            this.trigger.on('click', this.someEvent.bind(this));
        },

        someEvent: function() {
            this.getAjax();
        }
    }
});

然后在 main.js 中传入 DOM 元素

require(['overlay'], function(overlay) {
    overlay.init({
        trigger: 'a',
        target: '#results'
    })
});

将 DOM 元素分开并放在一个位置使得更新它们变得轻而易举。您还可以传入其他内容(例如类名)的选项对象，就像 jQuery 插件一样。

最后，在您的示例代码中，您的 $('#results').fadeIn(); 位于成功回调之外，并且会立即运行。