2011-01-12 8 views
2

ちょうど私たちのウェブサイトのちょっとしたニュースティッカースクリプトを書くように求められたので、私たちのニーズに合わせて既存のjQueryスクリプトを書き直しました。その後、jQueryの代わりにPrototypeを使用すると言われたので、今度はスクリプトを変換する必要があります。jQueryからプロトタイプへ、いくつかのjQueryの部分がわからない

ほとんどの単純な部分は、Prototypeのドキュメントを使って調べることができますが、jQueryにはよく分からない部分があります。私は主のような部分について話している:

(function($) { 

$.fn.newsTicker = $.fn.newsticker = function(delay) 
{ 
    delay = delay || 4000; 
    initTicker = function(el) 
    { 
     //bla bla some stuff 
    }; 

    //here be more functions 

    this.each(
     function() 
     { 
      if(this.nodeName.toLowerCase()!= "ul") return; 
      initTicker(this); 
     } 
    ); 
}; 

$.newsticker = $.newsTicker = 
{ 
    pause: function(el) 
    { 
     (el.jquery ? el[0] : el).pause = true; 
    }, 
    //more functions 
} 

})(jQuery); 

は、これらは、クラスのいくつかの並べ替えていますか? $(#element).newsTicker()が正しい機能をどのように起動するのか分かりません。これはどのように機能し、より重要なことにPrototypeで何が翻訳されますか?

全スクリプト:http://jsfiddle.net/PXn4r/9/

答えて

2

私はプロトタイプポートを手助けすることはできませんが、元のコードの仕組みはこちらです。

これらはいくつかの種類のクラスですか? I $(#要素).newsTicker() が正しい関数をどのように起動するのかを知りません。

jQueryには、通常使用できるすべての機能(「機能」)が含まれている$という別名のグローバルオブジェクトが1つあります。これらの機能は拡張可能です。グローバルオブジェクトに独自の関数を追加することができます。適切に行うと、他のjQuery組み込み関数と区別がつきません。再利用可能なスタイルで行う場合は、プラグインを作成しています。これは、コードが何をするかです:

$.fn.newsTicker = $.fn.newsticker = function(delay){ 
} 

それはdelayパラメータを受け入れるjQueryのメソッドを作成します。 (名前のスペルを間違えことができるように実際に、それは二度定義されています。)あなたは今、このようなものを行うことができます。今、この

$("#main div.ticker").newsticker(2000); 

を:

(function($) { 
    // ... 
})(jQuery); 

$別名は単なる慣習で、利用できるようにすることができますか否か。このコードは、jQueryグローバルオブジェクトを受け取り、$というローカル変数に格納する無名関数を定義します。そうすれば、$が存在し、周囲にある可能性のある他の$変数と競合することはありません。

更新

関数と.Fnと機能とないものとの違いは何ですか?

jQuery.fnは、プラグインのための特別なオブジェクトです。私はあなたが他の場所にあなたの関数を追加すると何が起こるのかわかりません(それは期待どおりに動かないかもしれませんが、私はそれをテストしていません)が、それはベストプラクティスです。あなたはそれを名前空間と見なすことができます:そこに置かれたものは何にも干渉しません。

参考:http://docs.jquery.com/Plugins/Authoring

ところで、適切に書かれたプラグインはjQueryのチェーンの途中で、例えば、それを挿入することができます:答えを

$("#main div.ticker").css("color: red").newsticker(2000).fadeIn("slow"); 
+0

恐ろしいです。そして.fnとの間の違いは何ですか? –

+0

@Stephan Muller - 更新された回答を見る –

1

あなたはプロトタイプにあなたがjQueryのを拡張することができる方法を拡張傾けます。 jQueryには、すべてが一緒になる主要なオブジェクトがあります。Prototypeには複数のグローバルオブジェクトがあります... 純粋なjsバージョンを持っていれば、Prototypesオブジェクトを拡張することができます。その1 ...

ちょうどプロトタイプセレクタをサポートすることを確認してください(おそらくプロトタイプ$関数を利用している最も簡単な方法)

編集:すみません、私はあなたが外のjQueryプラグインを作ったことを書いたと思いました純粋なjsスクリプト。 しかし、その場合は、jQuery.noConflictを使用してjQueryとPrototypeを使用することを検討してください。 jQueryプラグインをプロトタイプに変換する簡単な方法はありません。

+0

おかげで、私はに許可されていませんよjQueryをすべて使用してください。Prototypeに完全になりました。使用した実際のjQueryを完全に理解していれば手で書き直す必要はありません。 –