0

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

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

以下代码是否会被视为好/坏做法？有什么人会改变吗？（下面的超级基本示例）

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

干杯，阿迪。

4

1 回答 1

2

您的加载方法overlay是对 require 的正确使用，但是有几点：

Overlay.js 应该将 jQuery 列为依赖项。确保您的模块具有运行所需的所有代码。在这种情况下，这很好（因为您在 .js 文件中抓取了 jQuery require）但是如果您曾经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();在成功回调之外并且会立即运行。

于 2013-03-07T15:55:26.560 回答