プラグインを書くか、関数を使うべきですか？

Question

私は、モーダルやフォームの検証などのためにjQueryを使用するWebサイトを構築しています。私は自分自身がかなり簡単にコードを書くことができますが、それはあまりモジュール化されていないので、多くのコードを書き直しています。私はCSのバックグラウンドを持っていますが、私はjQueryの新機能です。私はjQueryがオブジェクト指向の機能を持っていることを理解していますが、jQueryでどのように行われているかを十分に把握していないので、コードは非常に手続き的です。

は、例えば、このような何かを取る：

$("#show").click(function() { 
    $("#view").fadeIn(500); 
    return false; 
}); 
$("#view .popup-close a").click(function() { 
    $("#view").fadeOut(500); 
    return false; 
}); 

を私はどこでも私はモーダルを持っている同様の宣言のリストを持っています。どのように私はこの声明をよりモジュラー的な方法で書くのですか？

Answer 1

これをサイト全体で再利用可能なプラグインにしたい場合は、あまり難しくありません。

私はプラグイン/オーサリングガイドラインに読み取りを与えることをお勧めしたい：http://docs.jquery.com/Plugins/Authoring

は、ここでは、あなたのポップアップをpluginifying行くと思いますどのようにスタートだ：

(function ($) { 
var methods = { 
    init: function(options){}, 
    fadeIn: function(target, speed){ 
     //fade in logic here 
     this.fadeIn(speed);   
    }, 
    fadeOut: function(target, speed){ 
     //fade out logic here 
     this.fadeOut(speed); 
    } 
}; 
$.fn.popup = function(method){ 
    // Method calling logic -straight from jquery plugin documentation 
    if (methods[method]) { 
     return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery.popup'); 
    } 
}; 
})(jQuery); 

そして、ここでは、作業です例：http://jsfiddle.net/HMX9J/

Answer 2

Jqueryを使用してモジュール性を高める方法についての情報は次のとおりです。

0123あなたのハンドラで必要な状態や余分な情報を追跡するために "this"キーワード

使用data objectsを使用して

• インテリジェントにあなたのhtmlを設計し、幅広いセレクタを保つ
• 使用toggle
• 独自のplugins
を書きます

たとえば、#show要素もリンクであり、HTMLの外観であると仮定するとこのようなS：

<div class="myButtons"> 
    <a id="show" data-fade="show"></a> 
    <a id="close" data-fade="fade"></a> 
</div> 

あなたの代わりに複数のハンドラを有していると、このようなことを行うことができます。ちょうどあなたの上記のコードは、よりモジュラー作る方法についての正確な答え、ちょうどjquerysチェックアウトトグルの

$('.myButtons a').click(function(){ 
    var func = $(this).data("fade"); 

    if (func === "show"){ 
     $("#view").fadeIn(500); 
    } 
    else if(func === "hide"){ 
     $("#view").fadeOut(500); 
    } 
}); 

（）が、全体としては、これらの他のメソッドを考慮したいと思っています。これらの他の要素を組み込むと、指先でより多くのパワーが得られます。