JS コンポーネント シリーズ - 徹底したコンポーネントのカプセル化: jquery data() と html 5 data-* 属性を使用して、components_html/css_WEB-ITnose を初期化します。

はじめに: 最近、ブートストラップ コンポーネントを使用する際のユーザビリティの問題を発見しました。多くの単純なコンポーネントの初期化では、バックグラウンドからデータを取得するだけでよいため、単純な select タグなどの多くの初期化コードを JS で記述する必要があります。オプションにありますが、バックグラウンドからデータを取得するには js 初期化が必要なので、ページが初期化されるとき、js 初期化コードには $("#id").combobox({url:"",valueField など) のような多くの型があります。 :" ",textField:""}); この種の繰り返しコードは非常に面倒に見えます。次に、ブートストラップ テーブルの data 属性を考えました。単純なコンポーネントを初期化するために HTML で直接 data-* を使用できれば素晴らしいでしょう。まずブートストラップ テーブルのドキュメントを見てみましょう:

ブートストラップ テーブルのほぼすべてのプロパティとイベントが data-* を使用して実行できることがわかります。これはかなり良いと思います。それからブロガーは調査を開始します。 data-* はどこから来たのでしょうか?

1. jquery data() についての予備調査

インターネットで検索した結果、データのソースが Jquery と html5 にあることがわかりました。まずは jquery の API を見てみましょう

本来の使い方は以下の通りです:

この関数は実際には非常に明白で、特定の属性とデータを要素に追加したり、値を取得したりすることです。

data() メソッドと html5 data-* 属性の組み合わせを見てみましょう

はは、これは良いことです。html5 の data-* で設定された値は、jquery の data() メソッドを使用して取得できます。ここでのルールは次のとおりです:

1) すべてのデータ属性は「data-」で始まる必要があります、

2) 属性は「-」で区切られます、

3) jquery で属性を取得するときは、「data」と「」を削除します。 -" "それでおしまい。

これを基礎として、タグに属性を設定し、対応する属性を js で取得する方法がわかりました。前回のコンボボックスのカプセル化例に基づいて説明します。

2. jquery data() は data-* 初期化コンポーネントを実装します

前の JS コンポーネント シリーズを思い出してください - 独自の JS コンポーネントをカプセル化する この記事では、 url を介してバックグラウンドからデータをフェッチできる単純なコンボボックスをカプセル化することもできます。したがって、以下では、このコンポーネントに基づいて、 data-* 属性を select タグに直接追加して、ドロップダウン ボックス コンポーネントを初期化するトリックをまだ行っています。

1. js コンポーネントのカプセル化コード

(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></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, options.param);            if (!options.url) return;            if (typeof options.param == "string"){                options.param = JSON.parse(options.param);            }            $.getJSON(options.url, options.param, function (data) {                init(target, data);            });        }        function init(target, data) {            $.each(data, function (i, item) {                var option = $('<option></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></option>');                option.attr('value', '');                option.text('请选择');                jq.append(option);                $.each(data, function (i, item) {                    var option = $('<option></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) { }    };    //这一段是新加的，在页面初始化完成之后调用初始化方法    $(document).ready(function () {        $('.combobox').each(function () {            var $combobox = $(this);            $.fn.combobox.call($combobox, $combobox.data());        })    });    })(jQuery);

コードの大部分は前回と変わりません

　　//这一段是新加的，在页面初始化完成之后调用初始化方法    $(document).ready(function () {        $('.combobox').each(function () {            var $combobox = $(this);            $.fn.combobox.call($combobox, $combobox.data());        })    });

明らかに、コンポーネントはページの初期化が完了した後にスタイル セレクターを通じて初期化されます。それぞれを使用して、複数の .combobox スタイルがある場合は、それぞれを順番に初期化します。 $.fn.combobox.call($combobox, $combobox.data()); を通じて call メソッドを呼び出し、コンボボックスの初期化を呼び出します。 call メソッド内の 2 つのパラメーターは次のとおりです:

1) 現在初期化されている jquery オブジェクト

2 )パラメータリスト。 $combobox.data() を通じてここで取得できるのは、すべての HTML の data-* 属性です。すべての data-* 属性をパラメータとしてコンボボックスの初期化メソッドに渡します。

2. data-* を通じて HTML を初期化します

 <select id="Search_"         name="Search_province"         class="form-control combobox"         data-url="/Home/GetProvince"         data-param='{"type":"0"}'         data-text-field="Name"         data-value-field="Id"> </select>

data-* 属性を指定します。上記のことから、ここでの初期化は、スタイル selector.combobox を通じてコン​​ポーネントを初期化することであることがわかります。そのため、data-* を使用してコンポーネントを初期化したい場合は、class="combobox" スタイルを設定する必要があります。バックグラウンドで初期化が必要なタグを取得できること。

3. バックエンド C# メソッド

 public class HomeController : Controller {        public List<string> lstProvince = new List<string>() { "北京市", "天津市", "重庆市", "上海市", "河北省", "山西省", "辽宁省", "吉林省", "黑龙江省", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "海南省", "四川省", "贵州省", "云南省", "陕西省", "甘肃省", "青海省", "台湾省", "内蒙古自治区", "广西壮族自治区", "西藏自治区", "宁夏回族自治区", "新疆维吾尔自治区", "香港特别行政区", "澳门特别行政区" };        public JsonResult GetProvince(string type)        {            var lstRes = new List<Province>();            for (var i = 0; i < 10; i++)            {                var oModel = new Province();                oModel.Id = i;                oModel.Name = lstProvince[i];                lstRes.Add(oModel);            }           return Json(lstRes, JsonRequestBehavior.AllowGet);        }    }    public class Province    {        public int Id { get; set; }        public string Name { get; set; }    }

テストコード、言うことはありません。

4. エフェクトのデバッグ

エフェクトの取得

これで基本的に data-* によるコンポーネントの初期化が完了します。

3. 概要

上記は、html5 data-* 属性と組み合わせた jquery data() メソッドの使用法を簡単に示しています。基本的に、追加の js コード行を記述せずにタグを直接初期化するというブロガーのニーズを満たすことができます。 jquery.js および jquery.extension.js ファイルを使用する場合は、これらのファイルを直接参照できます。ただし、これは HTML5 の機能であるため、ブラウザーに特定の要件が必要であることはわかっています。もちろん、この使用関数は比較的初歩的なものですが、いくつかの単純なコンポーネントの初期化には十分です。記事に誤解がある場合は、ご指摘ください。ブロガーは感謝します。この記事があなたのお役に立ちましたら、小さな手を挙げて推薦をお願いします。ブロガーはこれからも頑張って、より良い記事を皆さんと共有していきます。