0

JS コードをクリーンアップしていて、名前空間を作成して JS OO を使用したいと考えています。オブジェクト リテラル パターンに関する Rebecca Murphey による非常にすばらしいチュートリアルを見つけました。

今、これをどのように使用して jQuery UI のオートコンプリートを実現できるかを考えています。

// Pseudocode
$('#input_field').myNameSpace.my_search();

var myNameSpace= {
  my_search : function() {
    $(this).autocomplete({...});
  },

  my_other_function: function() {}
};

現在、私は自分のプラグインを使用しています：

$('#input_field').my_search();


(function ($) {
  $.fn.my_search = function () {

    $(this).autocomplete({
      minLength: 2,
      source: function( request, response ) {
        jQuery.ajax({
          url: callback_url,
          dataType: "json",
          data: {
            term: request.term
          },
          success: function( data ) {
            response( jQuery.map( data, function( item ) {
              return {
                id: item.id,
                value: item.name,
                name_encoded: item.name_encoded
              }
            }));
          }
        });
      },
      select: function( event, ui ) {
        (...)
      }
    });
  }
})(jQuery);

どんな助けでも感謝します。

更新
私の最初の例はかなり似ていて、James Kyburz も非常に似ていました (しかし動作していました)。複雑な戻りデータを避けるために、ジェームズの答えを単純化しました。

(function () {
  // Namspace which also kind of works like an interface
  $.fn.my_name_space = function(opt) {
    this.autosuggest_brand = autosuggest.autosuggest_brand;
    return this;
  }

  var autosuggest = {
    autosuggest_brand : function(action) {
      $(this).autocomplete({
        // Autocomplete stuff here
      });
    },
    som_other_function _ function() {}
  }
})(jQuery);
4

2 に答える 2

1

まだ頑張ってるけど無理だと思う

1 つの方法は、名前空間ではない関数ですべてをラップすることです...

$.fn.my_namespace = function() {
  var el = this;
  var foo = function() { console.log('foo', el); };
  var bar = function() { console.log('bar', el); };
  return { foo: foo, bar: bar };
}

$('input:first').my_namespace().foo() // foo, [input...]
$('input:first').my_namespace().bar() // bar, [input...]

defineProperty を使用して古いブラウザーをサポートする必要がない限り、解決策になる可能性があります

Object.defineProperty($.fn, 'my_namespace', {
  get: function() {
    var el = this;
    return {
      foo: function() { console.log( 'foo', el); },
      bar: function() { console.log( 'bar', el); },
    }
  }
});

$('input:first').my_namespace.foo() // foo, [input...]
$('input:first').my_namespace.bar() // bar, [input...]
于 2013-04-19T15:22:33.120 に答える
1

いいえ、jQuery プラグインに名前空間を使用することはできません (または非常に複雑です。名前空間オブジェクトでメソッドを実行すると、選択のコンテキストが失われます)。.my_search()

現在のプラグインは問題ありません。名前空間が必要な場合は、のようなプレフィックスを使用しますnamespace_search。

于 2013-04-19T14:11:27.830 に答える