CSS、デザイン、プログラミング等などWebに関する事を更新しています。

window.$
= window.jQuery
= function(){ ... }

$やjQueryは同じ意味、エイリアス。windowオブジェクトのプロパティ名。関数オブジェクトらしい。

jQueryの関数API、メソッドAPI

今まで朧げで、謎だったjQueryの関数やメソッドAPIについて

関数API

jQuery関数オブジェクトが持つ、関数オブジェクトの事。

// 関数API
jQuery.functionName = function(){ ... }

これが関数APIらしいけど、これでいいのかな。

メソッドAPI

jQueryセレクタのprototypeオブジェクトが持つ関数オブジェクトのこと。

// メソッドAPI
jQuery.prototype.functionName = function(){ ... }

// これは同じ意味
jQuery.fn
= jQuery.prototype

prototypeは全ての関数オブジェクトが持っているオブジェクトで、プラグイン定義の際に使用される jQuery.fn は jQuery.prototype の別名（ショートカット・エイリアス）

こうすると

// よく見る
$('#target').functionName
// とか
var instance = new jQuery();
instance.functionName();
// とか

やって、jQuery.prototypeに定義された関数がメソッドAPIとして使える。

関数APIと具体的にどう違うのだろうか・・・

jQueryのプラグイン定義

関数API系プラグインの定義の仕方

一個の関数のみ定義する場合

jQuery.functionName = function( option ){
	// statement
}

複数の関数を定義する場合

(function($){
    $.plugin = {
        functionName01 : function(){
            // statement
        },
        functionName02 : function(){
            // statement
        }
    }
})(jQuery);

これで合っているのだろうか。。

メソッドAPI系プラグインの定義の仕方

標準的な定義

(function($){
    $.fn.functionName = function( option ) {
        return this.each(function() {
            // init statement
            var hoge = function(){ ... }
            var fuga = function(){ ... }
        });
    };
})(jQuery);

基本的にはこうらしい。プラグイン実行の度にメソッドが再定義されるから無駄なコストが掛かる。

実装独立型の定義

(function($){
//  var functionName = function( elem , option) {   // private
    $.functionName = function( elem , option) {     // public
        // init
        var hoge = function(){ ... }
        var fuga = function(){ ... }
    }
    $.fn.functionName = function( option ) {
        return this.each(function() {
            $.functionName( this , option);
        });
    };
})(jQuery);

こういうのを実装独立型の定義というらしい。インタフェースと実装を分けて作る事によってインデントが浅くなるとの事、基本的には標準的な定義と同じ。

サブメソッドを外部で定義

(function($){
//  var functionName = {    // private
    $.functionName = {      // public
        hoge : function(){ ... },
        fuga : function(){ ... }
    }
    $.fn.functionName = function( option ) {
        return this.each(function() {
            // init
        });
    };
})(jQuery);

サブメソッドをプラグインメソッド外（メソッドAPIの外）で定義している為、プラグイン実行時のサブメソッドの再定義コストがかからない。その分、パラメータoptionをどの様に渡すかが問題。

サブメソッドをプラグインメソッド直下に定義

(function($){
//  var functionName = function( option ) {     // private
    $.fn.functionName = function( option ) {    // public
        return this.each(function() {
            // init
        });
    };
    $.extend($.fn.functionName , {
        hoge : function(){ ... },
        fuga : function(){ ... }
    });
})(jQuery);

サブメソッドを外部で定義することと殆ど同じらしいが、プラグインメソッド（メソッドAPI）の直下で定義しているのでjQueryセレクタは汚染されない（？）。

サブメソッドをプライベート関数として定義

(function($){
    var hoge = function(){ ... }
    var fuga = function(){ ... }
    $.fn.functionName = function( option ) {
        return this.each(function() {
            // init
        });
    };
})(jQuery);

サブメソッドをプライベート関数として定義するので、関数自体を外部から参照できない。

これは、サブメソッドを下記のように書いても同じはず？

(function($){
    function hoge(){ ... }
    function fuga(){ ... }
    $.fn.functionName = function( option ) {
        return this.each(function() {
            // init
        });
    };
})(jQuery);

関数API / メソッドAPI の同時定義

(function($){
    $.functionName = function( option ){
        $.functionName.init( window , option);
    }
    $.extend($.functionName,{
        init : function( elem , option ){
            // init
        },
        hoge : function(){ ... },
        fuga : function(){ ... }
    });
    $.fn.functionName = function( option ) {
        return this.each(function() {
            $.functionName.init( this , option);
        });
    };
})(jQuery);

関数API/メソッドAPIを同時に定義し、ロジック部分を共有する。

実装部分ていうのは真ん中のextendのところの事で良いのかな。実際に使うときはどう使われるんだろうか。

// javascript documents
jQuery.functionName();
window.functionName();
jQuery("#hoge").functionName();

みたいな形で、どれも使えるのかな

実装をprototypeオブジェクトで定義

(function($){
    $.functionName = function( elem , option ){
        // init
    }
    $.extend( $.functionName.prototype,{
        hoge : function(){ ... },
        fuga : function(){ ... }
    });
    $.fn.functionName = function( option ) {
        return this.each(function() {
            new $.functionName( this , option);
        });
    };
})(jQuery);

prototype ベースオブジェクト指向による JavaScript らしい実装（だと思う）。jQuery セレクタで取得された要素１つ１つが、専用のプラグインインスタンスを持つことになるで、各要素固有のパラメータをインスタンス側で保持することができます。jQuery UI ではこのインスタンスを data() メソッドにより対応する要素にもたせることで、プラグイン利用者がインスタンスの存在を意識することなく、自由なタイミングでサブメソッド（ hoge や fuga ）を実行できる API を提供してます。

Cyokodog :: Diary (http://d.hatena.ne.jp/cyokodog/20091126/define_plugin01)

この辺りからはもう私の頭では理解できなくなってきた。

メソッドAPIを使って関数APIであるfunctionNameのprototypeをextendでオーバーライドされたものを呼びだしている。（なんじゃそりゃ

インターフェース部と実装部を分離した書き方です。インデントが浅くなることと、実装定義の外部参照が可能になること意外は「2.1 標準的な定義」と大差ありません。

Cyokodog :: Diary (http://d.hatena.ne.jp/cyokodog/20091126/define_plugin01)