使用requirejs只加载用户交互的jquery插件

我开始玩第一次需要js /模块化开发，并喜欢我所看到的。使用requirejs只加载用户交互的jquery插件

我想要实现的基本上只是在需要时加载某些自定义jQ模块。我的主要目标是页面性能。目前我只加载require.js（反过来加载jQ异步），然后其他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(); 
    } 
    } 
});

干杯，阿迪。

来源

2013-03-07 Adi

你加载overlay的方法是正确的使用需要，但一两件事情：

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();位于成功回调之外，并且会立即运行。

来源

2013-03-07 15:55:26

使用requirejs只加载用户交互的jquery插件

回答

相关问题