29

私はサイトで作業していて、本質的に初めて JQuery を使用しています。以前のプロジェクトでは主に MooTools を使用しており、MooTools クラス構造を使用して作成したウィジェット クラスがいくつかあります。それらを JQuery に移植したいのですが、オブジェクト クラスに関しては MooTools の機能に似たものはないように思えます。

少し調べてみましたが、あまり出てきませんでした。Digg は独自の を展開しているようですが、これを使用する必要があるかどうかはわかりません。より良い方法はありますか？人々は通常、JQuery でどの程度オブジェクト指向を理解するのでしょうか? UI ウィジェット (または機能クラス構造) をカプセル化する通常の方法は何ですか?

可能性のある MooTools ウィジェット クラスの偽の例を投稿します。

var ZombatWidget = new Class({
    Extends: BaseWidget,
    widgetPropertyX = 'prop1',
    widgetPropertyY = 'prop2',
    attach = function(el) {
        var f = function() { 
            //do something widgety
        };
        el.addEvent('dblclick',f);
        el.addClass('widgetized');
    }
});

var z = new ZombatWidget();
z.attach($('widgetDiv'));

私が持っているものはそれよりもはるかに大きいですが、あなたはアイデアを得る. prototypeこれをクラス/継承構造化の方法に変換する必要がありますか? JQuery を使用して、この種のオブジェクト クラスをどのように記述しますか?

4

8 に答える 8

4

うーん... 面白い。DOM とやり取りするための優れたツールである jQuery があります。これは、選択した項目を変更する独自のコード (プラグイン) を作成できる選択ツールです。ここで、プラグイン内の独自の (オブジェクト指向) コードを操作して、非常に優れた操作を行うことができます。

では、他の jQuery プラグインから継承できるようにしたい場合を除いて、jQuery に追加の OO 機能が必要になるのはなぜでしょうか?

次のことを可能にするプラグインがある可能性があるためです。

$(".spiffyness").yourSpiffyficationPlugin1();

そして、すでにいくつかの本当にクールな素晴らしさを実現していますが、これにさらに気品が必要です。

したがって、最初のプラグインから継承すると、次のようになります。

$(".spiffyness").yourSpiffyficationPlugin2(); //plugin inherited from 1

しかし...これを行うことであなたもそこにたどり着きませんか？

$(".spiffyness").yourSpiffyficationPlugin1().yourSpiffyficationPlugin2();

2 番目のプラグインは、最初のプラグインに加えて、この小さな (しかし素晴らしい ;)) ことを行うだけでしょうか?

言い換えれば、あなたが望むものは、オブジェクト指向の純粋主義のために努力する価値がありますか? それとも、jQuery のパイプ メカニズムで十分で、必要なものはすべて揃っているのでしょうか。

ここでは、責任の分離やあなたのムーツールの考え方が本当の問題かもしれません。jQuery に得意なことをさせ、その強力なパイプ メカニズムを使用し、独自のプラグイン (多くの派手な OO が含まれている可能性があります) をパイプ処理します... コードがクリーンなうちに素晴らしい結果を得ることができます。

ここで私の考えが単純すぎると思われる場合は、あなたの主張の本質を示す良い例を歓迎します! :-)

それに先んじて、本当に高度なことをしていて、何か他のものの上に何かをするだけではうまくいかない場合は、プラグインを OO クラスの 1 つに委譲することもできます。例：

$.fn.totalAwesomeness = function(options) {
  var defaults = {
    mode: 1,
    title: 'Awesome'
  };
  var opts = $.extend(defaults, options);
  return this.each(function() {
    var $this = $(this);
    var handler = null;
    if(defaults.mode == 1)
       handler = new com.myStuff.class1($this);
    else if(defaults.mode == 2)
   handler = new com.myStuff.class2($this); //class2 inherits from class1 
    handler.doMagic();
  });
};
于 2011-01-23T15:40:43.563 に答える
2

非常に強力なイントロスペクション機能を提供するサードパーティのjavascriptクラスの実装があります。特にJS.ClassとJooseを強調したいと思います。JS.ClassはRubyをモデルにしていますが、JooseはMooseをモデルにしています。私はmootoolsのユーザーではないので、mootoolsに関する彼らの長所/短所についてコメントすることはできません。しかし、私はそれらの主要な機能を要約します。

JS.Classは、Rubyのオブジェクト指向機能のシミュレーションに重点を置いており、その点でかなり優れています。Rubyの標準ライブラリをモデルにした強力なライブラリを提供し、十分に統合されたパッケージ管理およびテストフレームワークも付属しています。

Jooseは、テストフレームワーク/パッケージ管理機能を提供していませんが、高度な属性管理機能、フィルター、およびより優れたイントロスペクション機能の点で優れています。

どちらも非常に優れたドキュメントを備えており、サーバーだけでなくブラウザでも使用できます。

于 2012-06-21T18:24:43.690 に答える
2

ミニプロジェクトの最初のリリースを終えたところです：https ：//github.com/op1ekun/plOOgins 。Jqueryプラグインとして使用するOOPコードを作成することがすべてです。私たちが職場で使いたかったのは、ロケット科学ではありません。多分それはあなたを少し助けるでしょう。幸運を！

于 2012-12-28T20:42:29.293 に答える
2

moo4q - http://moo4q.com/もいつでも使用できます。jQuery に MooTools クラスのサポートを追加します。

于 2012-01-23T04:52:13.810 に答える
2

以前、jQuery オブジェクト指向プラグインについての記事を書きました。参考になれば幸いです。

http://ajax911.com/jquery-object-directional-plugins/

于 2012-05-24T21:11:34.213 に答える
0

プラグインは時々そのトリックを行います。

もちろん、クラス/継承モデルを取得するのに十分な数の mootools を使用することもできます。1.2.3 での「互換モード」の実装により、document.idケーキを持って食べることもできます (私は思いますが、自分ではやったことがありません)。

于 2009-08-09T05:07:10.190 に答える
0

問題は... MooTools があなたのニーズに合っているのに、なぜ MooTools から離れたのですか? MooTools は問題なく動作しているように思えますし、MooTools にできない jQuery の機能はありません。(その逆は正しくありません)。

残念ながら、jQuery は MooTools のように従来の OOP をサポートするように構築されていないため、クラスを jQuery プラグインとして作成する必要があります。

于 2009-08-09T05:06:03.937 に答える