0

初めてrequire js /モジュラー開発を始めて、私が見ているものが好きです。

私が達成しようとしているのは、基本的に、必要なときに特定のカスタム jQ モジュールのみをロードすることです。私の主な目標は、ページのパフォーマンスです。現在、require.js のみをロードしており (jQ async をロードしています)、他の 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();
    });

});

オーバーレイ.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 をリストする必要があります。モジュールに実行に必要なすべてのコードがあることを確認してください。この場合は ( で jQuery を取得しているのでrequire) 問題ありませんが、以前document.addEventListenerはクリックを添付していたので、 で jQuery を使用できるかどうか確信が持てなくなりました$.ajax。モジュールが必要なものをすべて要求するのは、幸運ではないということを知っておくとよいでしょう。

私が守ろうとしているルールの 1 つは、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 要素を分離して 1 か所に保持すると、更新が簡単になります。jQuery プラグインのように、他のもの (クラス名など) のオプション オブジェクトを渡すこともできます。

最後に、コード例で$('#results').fadeIn();は、成功コールバックの外にあり、すぐに実行されます。

于 2013-03-07T15:55:26.560 に答える