web-dev-qa-db-ja.com

OO JQueryとクラス

私はサイトに取り組んでおり、本質的に初めてJQueryを使用しています。以前のプロジェクトではほとんどMooToolsを使用していましたが、 MooTools Class 構造を使用して作成したウィジェットクラスがいくつかあります。それらを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を使用してどのように記述しますか？

javascriptjqueryoopmootools
29
zombat

このアプローチは、問題のタスクに役立つことがあります。 オブジェクト指向のjqueryプラグインの構築

そして、Ajaxianに関するこの記事「 実数OO jqueryを使用したクラスシステム 」。

21
pixeline

うーん...面白い。私たちはjQueryを持っています。これはDOMとやり取りするのに最適なツールです。これは、選択したアイテムを変更するための独自のコード（プラグイン）を作成できる選択ツールです。ここでは、プラグインの独自の（オブジェクト指向）コードと対話して、本当にクールなことを行うことができます。

では、他のjQueryプラグインから継承できるようにしたいのでない限り、jQueryに余分なOO機能が必要なのはなぜですか？

次のことができるプラグインを持っている可能性があるためです。

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

そして、すでにいくつかの本当にクールな素晴らしさをしている間、あなたはこれの上により多くの精巧さが必要です。

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

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

しかし... ...

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

2番目のプラグインが最初のプラグインに加えて、この小さな（しかし素晴らしい;））ことを行うのはどこですか？

言い換えれば：OO purism？またはjQueryパイプメカニズムで十分で、おそらく必要なものはすべてありますか？

ここでは、責任の分離やあなたのmootoolsの考え方が本当の問題になるかもしれません。 jQueryに長所を持たせ、強力なパイプメカニズムを使用し、独自のプラグイン（多くの派手なOO stuff）を含む可能性があります）をパイプします...まだきれいです。

ここで私があまりにも単純だと思っていると思うなら、あなたのポイントの本質の良い例が歓迎されるでしょう！ :-)

それに先んじて、あなたが本当に高度なことをしていて、単に他の何かの上に何かをするだけで済まないなら、プラグインはOO =クラス。たとえば：

$.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();
  });
};
4
Jos

ミニプロジェクトの非常に最初のリリースを終了しました： https://github.com/op1ekun/plOOgins 。 OOP Jqueryプラグインとして使用されるコードを書くことです。これは、ロケット科学ではなく、職場で使用したいものです。少し役立つでしょう。幸運を祈ります！

2
op1ekun

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

2
BrianFreud

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

JS.Classは、Rubyのオブジェクト指向機能をシミュレートすることに重点を置いており、それでかなり良い仕事をします。Rubyまた、統合されたパッケージ管理とテストフレームワークが付属しています。

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

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

2
lorefnon

少し前にjQueryオブジェクト指向プラグインに関する記事を書きました。

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

2
Dima

問題は...なぜMooToolsから離れるのがあなたのニーズに合っているのですか？ MooToolsが正常に機能していたように思えますが、MooToolsができないjQueryの機能はありません。 （その反対は真実ではありません）。

残念なことに、jQueryはMooToolsのように古典的なOOPをサポートするように構築されていないため、クラスをjQueryプラグインとして記述する必要があります。

0
Andrew Moore

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

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

0
Ryan Florence