使用require只在用户交互时加载jquery插件

using requirejs to only load jquery plugins on user interaction

本文关键字：加载 jquery 插件 交互 用户 require 使用      更新时间：2023-09-26

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

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

下面的代码是好实践还是坏实践?有什么是大家想要改变的吗?(下面的超级基本示例)

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();
    }
  }
});

欢呼,阿迪。

您加载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();在成功回调之外，将立即运行。

相关文章：