Clever Geek Handbook

15歳のときに最初のjQueryプラグインを作成した方法とその作成方法

こんにちは！私はウズベキスタンに住んでいて、独立してすでに3年目のウェブ開発を勉強しています。この間、私は自分で問題を解決するために、自分でホイールを再発明することを学びました。ここでは、そのような問題の1つとその解決策について説明します。面白いと思います。





なぜプラグインを書かなければならなかったのですか？



スライダーを挿入する必要があるいくつかの理由により、ブートストラップを使用せずに静的ページを作成し始めました。スライダーを書いても良かったのですが、新しいプロジェクトで再利用できるソリューションを見つけたかったのです。



したがって、スライダーを挿入するためのプラグインを探しましたが、すべての基準で自分に適した適切なプラグインを見つけることができませんでした。すべてのコードが1つのファイルに収まるように、モバイルフレンドリーで、コンパクトなコードで、すべてのデフォルトオプションがあります。スライダー用。



次に、スライダーを作成するための独自のプラグインを作成することにしました。これは、他のプロジェクトで使用でき、コミュニティーの助けを借りて改善できます。プラグインはSliboxと呼ばれます。



プラグインを作成する2つ目の理由は、自己学習と開発です。プラグインを作成することで、プラグインとモジュールの作成経験を積みます。そして、この知識は将来私を助けるかもしれません。



なぜjQueryを使用したのですか？



私はバニラJavaScriptでコードを書くことができますが、jQueryで作業する方が便利な場合があります）



jQueryプラグインの作成方法は？



まず、この問題を解決するには、このプラグインが作成された理由を理解する必要があります。結局のところ、既製のものを使用できます。



問題の選択を決定したら、開発を開始できます。



テンプレート



まず、jQueryをページに接続します。



<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>


次に、新しいファイルを作成し、次のコードを追加します。



(function($) {
    $.fn.plugtest = function(options) {

    }
})(jQuery)


これは、プラグテストのグローバリゼーションのための自己呼び出し機能です。はい、プラグインをプラグテストと呼びます。$ .fnは、任意の要素でこの関数を呼び出すために必要です。



<div></div>


以下のスクリプト要素：



$('div').plugtest({})


, options .



this



console.log(this) , :



(function($) {
    $.fn.plugtest = function(options) {
        console.log(this)
    }
})(jQuery)


これは出力です





, :



(function($) {
        $.fn.plugtest = function(options) {
            let o = $.extend({
                greeting: '!'
            }, options)
            console.log(this[0].tagName + '  ' + o.greeting)
        }
    })(jQuery)


extend «» . greeting :



$('div').plugtest({
        greeting: "!"
})


:



DIVさん、こんにちは！



, :



let test = $('div').plugtest({
        greeting: "!"
})


(function($) {
    $.fn.plugtest = function(options) {
        let o = $.extend({
            greeting: '!'
        }, options)
        return this.each(function() {
            console.log(this[0].tagName + '  ' + o.greeting)
        })
    }
})(jQuery)


, , - . . , !



Slibox github-e:



Slibox





PHP、Laravel、VueフレームワークでのAPIとアプリケーションの作成経験があり、node.js、express.jsの経験があります。また、クロスプラットフォームのデスクトップアプリケーションの作成にも興味があり、アプリケーションをより適切に制御するためのバニラJavaScriptを書くのが大好きです。フロントエンドとバックエンドのタスクに等しく関心があります。



私は、メンターの監督下で緊密に結びついたチームでリモートでトレーニングしたいと思います。そこでは、私のスキル（ライトセーバーの所有）が役立ちます。ヒントと意見をありがとう。



More articles:


All Articles