Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
64
Help us understand the problem. What is going on with this article?
@otaka

jQuery pluginの書き方をいまさら

More than 5 years have passed since last update.

jQuery pluginの書き方

なんでいまさら?

いまさらですが、初めて書いたので備忘録的な感じです。
いままでは普通に素のJavaScriptを書いていましたが、汎用性とか使い回しを考えるとjQuery pluginになっていたほうが何かといいかなーと思ったのでした。

pluginにすると何がいいの?

HTML側の記述を下記のようにできます。
よく見かけるjQuery pluginと同じような記述方法で、なんか良いですよね。

<script type="text/javascript">
    $('.class-name').your_plugin_name();
</script>

で、js側の記述は下記のような感じです。

(function($){
    $.fn.your_plugin_name = function(){
        var $self = $.fn.your_plugin_name;  //自分自身を保持しておくと、後の記述がすっきりするし何かといいみたい
        var $this = this;                       //.class-nameのオブジェクトをこれで保持できるみたい

        //ここにやりたいことを書けばいいみたい

    };
})(jQuery);

引数で設定値を渡したい場合

HTML側で下記のような書き方をすることも割とよくやりますよね。

<script type="text/javascript">
    $('.class-name').your_plugin_name({ hoge: 'fuga' });
</script>

その場合、js側は下記のように受け取ってあげれば大丈夫っぽいです。

(function($){
    $.fn.your_plugin_name = function(config){
        var $self = $.fn.your_plugin_name;
        var $this = this;

        //受け取った値を保持しておく場合はこんな感じ
        //引数が無い場合は標準値が入るように三項にしておくと何かといいと思った
        //ほんとは引数の内容を検査しないといけないような気もしますが
        $self.config = {
            hoge: ( config.hoge ) ? config.hoge : 'default',
        };


        //ここにやりたいことを書けばいいみたい


    };
})(jQuery);

メソッドがいろいろあったりする場合

とりあえず、こんな感じにしています。

(function($){
    $.fn.your_plugin_name = function(config){
        var $self = $.fn.your_plugin_name;
        $self.$this = this; //スコープ外から参照したいので、$selfの下に入れておいてみた
        $self.config = {
            hoge: ( config.hoge ) ? config.hoge : 'default',
        };


        //ここにやりたいことを書けばいいみたい


    };

    $.fn.your_plugin_name.function_name = function(){
        var $self = $.fn.your_plugin_name;  //スコープ外なので、再度$selfに代入しておいてみた

        //ここにやりたいことを書こう
    };

})(jQuery);

おもったこと。

正しいとか理想的とかいうとまだまだ深みがあると思いますが、ちょっとした処理を書きたい場合は非常に簡単ですね。
素のJavaScriptでjQueryを使って書くより楽なような気がします。
やっぱりjQueryはステキ。

64
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
otaka
なんでも詰め込み系のWeb屋です。 なので、スキルが薄いです。 極力、ネットで情報が見つからなかったような内容を書いていきたいと思います。 レベルの低い内容ですが、備忘録兼用で投稿します。どなたかのためになればうれしいです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
64
Help us understand the problem. What is going on with this article?