独自のJSコンポーネントをカプセル化

20016 ワード
JSパッケージ等の考え方
前言:以前はそんなに多くのbootstrapコンポーネントの使用経験を分かち合って、このブロガーはJSコンポーネントの拡張とパッケージを研究するつもりで、私たちはJQueryが私たちに$を提供することを感じます.Extendの不思議なことに、私たちがどのように自分のコンポーネントをカスタマイズするかを見てみましょう.例えば、私たちは$("#id")を拡張したいと思っています.MyJsControl({})は私たちのコンポーネントを作って、私たちはどのようにするべきで、焦らないで、私たちはゆっくりと過程を見てみましょう.
一、既存のコンポーネントを拡張する
1、需要背景
多くの場合、jqueryを使用します.ajaxはバックグラウンドに要求を送信します.
　　　　　　$.ajax({
                type: "post",
                url: "/User/Edit",
                data: { data: JSON.stringify(postdata) },
                success: function (data, status) {
                    if (status == "success") {
                        toastr.success('      ');
                        $("#tb_aaa").bootstrapTable('refresh');
                    }
                },
                error: function (e) {
                },
                complete: function () {
                }

            });

このコードはあまりにも一般的で、この時私たちはajaxリクエストを自分で呼び出すとき、error:function(e){}というコードを毎回書きたくありませんが、ajaxのエラー情報をブラウザに出力してユーザーが見ることができるようにしたいと思っています.どうしようかな?
2、実現原理
以上の効果を実現するには、実際には難しくありません.ajax({})は1層パッケージ化され,パッケージ化の共通メソッドでerrorに対応するイベントを定義すればよい.確かに、これは私たちの要求に達することができますが、完璧ではありません.原因は簡単です.1)jqueryの基礎の上でもう1層パッケージして、効率が足りません.2)呼び出し元の習慣を変える必要があり,ajaxを呼び出すたびに我々が定義した方法の規則に従って書く必要があり,直接元の$を使うことはできない.ajax({})という書き方は、あまり見たくありません.
それなら、コントロールをカプセル化せずに、以上の要件を満たすにはどうすればいいのでしょうか.答えは私たちの$です.extendは原生のjqueryを拡張する.ajax .
実際には実現するのも難しくありませんが、以下のコードで私たちの要求を満たすことができます.
(function ($) {
    //1.  $.ajax   
    var _ajax = $.ajax;
    $.ajax = function (options) {
        //2.      ajax          error    
        var fn = {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                toastr.error(XMLHttpRequest.responseText, '    ', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
            },
            success: function (data, textStatus) { },
            beforeSend: function (XHR) { },
            complete: function (XHR, TS) { }
        }
        //3.          error     ，      
        if (options.error) {
            fn.error = options.error;
        }
        if (options.success) {
            fn.success = options.success;
        }
        if (options.beforeSend) {
            fn.beforeSend = options.beforeSend;
        }
        if (options.complete) {
            fn.complete = options.complete;
        }
        //4.     $.ajax  ，       
        var _options = $.extend(options, {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                fn.error(XMLHttpRequest, textStatus, errorThrown);
            },
            success: function (data, textStatus) {
                fn.success(data, textStatus);
            },
            beforeSend: function (XHR) {
                fn.beforeSend(XHR);
            },
            complete: function (XHR, TS) {
                fn.complete(XHR, TS);
            }
        });
        //5.        ajax  
        _ajax(_options);
    };
})(jQuery);

jqueryの中の$に触れたことがなければ.extendという方法の子供靴は、以上の意味が分からないかもしれません.まずjquery API対$を見てみましょうextend()メソッドはどのように解釈されますか.
どういう意味ですか.公式の2つの例を見てみましょう
栗一:
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);

結果:
settings == { validate: true, limit: 5, name: "bar" }

栗二:
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);

結果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

以上の2つの簡単な例はextend()メソッドの役割が別のオブジェクトをマージすることであり、同じものがあれば上書きし、同じものがなければ追加することであることを示している.こんなに簡単です.
$を了解しました.extend()の役割は、上の拡張jqueryを大体理解することができます.ajaxの実現でしょう.主な手順は次のとおりです.
1)デフォルトのerror処理方法を定義します.
var fn = {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                toastr.error(XMLHttpRequest.responseText, '    ', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
            },
            success: function (data, textStatus) { },
            beforeSend: function (XHR) { },
            complete: function (XHR, TS) { }
        }

2)ユーザが$を呼び出していると判断する.ajax({})の場合error:function(){}をカスタマイズしているかどうか、定義した場合はユーザ定義を使用し、逆にデフォルトのerror処理方法を使用します.
3)$を使用する.extend()はerrorのデフォルト処理方法を$に入力.ajax()のパラメータにあります.optionsパラメータに$が含まれているのを見てみましょう.ajax()メソッドのすべてのパラメータは、デフォルトのfnで拡張すればよい.
以上の3つのステップで対ドルを実現することができる.ajax()メソッドのerrorデフォルト処理メソッド.このように拡張することは、私たちの使用者にとって変化を全く感じず、私たちは依然として$ajax({});このようにajaxリクエストを送信し、特別な状況がなければerror処理方法を書く必要はありません.
3、コンポーネント拡張の意義
コンポーネント拡張を使用すると、既存のコンポーネントの上にシステムビジネスに関連する処理要件を追加するのに役立ちますが、使用時には、コンポーネントの上にさらにカプセル化された肥大化を回避するために、オリジナルのコンポーネントを使用するのと同じように呼び出すことができます.
二、自分のコンポーネントを拡張する
上を通る$.extend()メソッドは$を拡張した.ajax()のerrorイベント処理方法.次に、独自のコンポーネントをパッケージ化してみましょう.機能は簡単ですが、説明性があります.私たちはselectというコンポーネントを例にとると、多くの場合、私たちのselectの中のoptionはデータベースからデータを取る必要があるので、一般的な方法はajaxリクエストを送信し、successメソッドでhtmlをつづることです.次にselectリモートでデータを取得する方法をカプセル化します.
1、コード実装及び使用例
まず乾物を出して、書いたものを片付けましょう.
(function ($) {
     //1.  jquery     combobox
    $.fn.combobox = function (options, param) {
        if (typeof options == 'string') {
            return $.fn.combobox.methods[options](this, param);
        }
        //2.            default    
        options = $.extend({}, $.fn.combobox.defaults, options || {});
        //3.     
        var target = $(this);
        target.attr('valuefield', options.valueField);
        target.attr('textfield', options.textField);
        target.empty();
        var option = $(');
        option.attr('value', '');
        option.text(options.placeholder);
        target.append(option);
        //4.                    data   ，    ，   ajax    ，    ajax      
        if (options.data) {
            init(target, options.data);
        }
        else {
            //var param = {};
            options.onBeforeLoad.call(target, option.param);
            if (!options.url) return;
            $.getJSON(options.url, option.param, function (data) {
                init(target, data);
            });
        }
        function init(target, data) {
            $.each(data, function (i, item) {
                var option = $(');
                option.attr('value', item[options.valueField]);
                option.text(item[options.textField]);
                target.append(option);
            });
            options.onLoadSuccess.call(target);
        }
        target.unbind("change");
        target.on("change", function (e) {
            if (options.onChange)
                return options.onChange(target.val());
        });
    }

    //5.          ，      。
    $.fn.combobox.methods = {
        getValue: function (jq) {
            return jq.val();
        },
        setValue: function (jq, param) {
            jq.val(param);
        },
        load: function (jq, url) {
            $.getJSON(url, function (data) {
                jq.empty();
                var option = $(');
                option.attr('value', '');
                option.text('   ');
                jq.append(option);
                $.each(data, function (i, item) {
                    var option = $(');
                    option.attr('value', item[jq.attr('valuefield')]);
                    option.text(item[jq.attr('textfield')]);
                    jq.append(option);
                });
            });
        }
    };

    //6.      
    $.fn.combobox.defaults = {
        url: null,
        param: null,
        data: null,
        valueField: 'value',
        textField: 'text',
        placeholder: '   ',
        onBeforeLoad: function (param) { },
        onLoadSuccess: function () { },
        onChange: function (value) { }
    };
})(jQuery);

まず、カスタムコンポーネントの使用方法を見てみましょう.
使用法一:URLでリモートでデータを取り、初期化する
まず空のselectを定義します

そして初期化
$(function(){
     $('#sel_search_plant').combobox({
            url: '/apiaction/Plant/Find',
            valueField: 'TM_PLANT_ID',
            textField: 'NAME_C'
      });
})

パラメータは簡単で、一つ一つ紹介しません.シンプルで有木有~~
使用法2:値と設定
var strSelectedValue = $('#sel_search_plant').combobox("getValue");

$('#sel_search_plant').combobox("setValue", "aaa");

実は簡単なselectラベルに対して、ブロガーはここのgetValuとSetValueが直接$('#sel_search_plant')を通過するため意味がないと思っています.val()で解決できることを、もう1つ封印する必要はありません.ここではプレゼンテーションをするだけで、select 2やmultiselectのようなコンポーネントにパッケージ化すれば、getValueやsetValueの意味があると思いますが、どう思いますか?
2、コードの詳しい説明
上の実装コードは、一目でわかるように、よく閉じたエビであることを証明しています.下のものは見なくてもいいです.読めないなら、大丈夫です.コードを分解して、中に何が入っているのか詳しく見てみましょう.
(1)まず、私たちが最もよく見ている書き方を見てみましょう.
(function ($) {
      //....      
})(jQuery);

初めてこのような使い方を見て、ブロガーも狂って捕まえて、これは何の鬼ですか、四似ていません.これが匿名関数の形式であることがわかりました.分解すると次のように見えます.
var fn = function($){
       //.....      
};
fn(jQuery);

すなわち,この書き方はまずメソッドを定義し,直ちにこのメソッドを呼び出すことを意味し,jQueryは実パラメータに相当する.jqueryを開きます.jsの元のファイルはjQueryがこのファイルの中のグローバル変数であることがわかります.
(2)独自のコンポーネントを定義するコード:
$.fn.combobox = function (options, param) {
    
};

このような書き方に慣れているのは、jqueryオブジェクトにカスタムメソッドを追加することを意味します.例えば、文章の最初の$("#id").MyJsControl({})という使い方で$を定義できます.fn.MyJsControl= function (options){} .
(3) options = $.extend({}, $.fn.combobox.defaults, options || {}); この文を見たことがある友达はextendという方法を覚えているでしょう.どうですか.またあなたが来ました.この言葉は実は何も言うことはありません.デフォルトのパラメータとユーザーから送られてきたパラメータを結合します.
(4)デフォルトパラメータリスト
 $.fn.combobox.defaults = {
        url: null,
        param: null,
        data: null,
        valueField: 'value',
        textField: 'text',
        placeholder: '   ',
        onBeforeLoad: function (param) { },
        onLoadSuccess: function () { },
        onChange: function (value) { }
    };

ユーザーがパラメータを渡さない場合は、デフォルトのパラメータリストを使用します.注意深い場合は、ブロガーが以前共有していた他のbootstrapコンポーネントのjsファイルにこのようなdefaultパラメータのリストがあることがわかります.私たちは勝手に2つ探します.
bootstrapアップロードコンポーネント
bootstrap tableコンポーネント
基本的にはこのような使い方です.このようにして、自分でjsコンポーネントを閉じることもできますか~~
三、まとめ
以上,jsコンポーネントの拡張およびパッケージングの使い方に対するブロガーの認識と総括である.もちろん、比較的簡単なベースのパッケージですが、bootstrap tableのようなコンポーネントを実現するには、まだまだです.しかし、万丈のビルが平地に建てられ、基礎を築くだけで、自分のtableコンポーネントを閉じるのも大きな問題ではありません.文の中で理解が間違っているところがあれば、指摘を歓迎して、博主は感謝に堪えません.もし本文があなたに少しも助けることができたら、あなたの小さな手を上げて推薦してください.ブロガーはきっと努力を続けて、もっと良い文章をみんなに分かち合います.
JQueryに基づいて編集可能な表の特効を作成
jsにおける閉パケットの理解二