سلسلة مكونات JS: كيفية استيراد مكونات JS باستخدام خاصية data HTML

مقدمة: في الآونة الأخيرة، عند استخدام مكونات bootstrap، لاحظت مشكلة سهولة الاستخدام، حيث يتطلب الكثير من الكود التمهيدي في JS لتشغيل العديد من المكونات البسيطة، مثل علامة select البسيطة، لأنها تحتاج فقط إلى إضافة بيانات من الخادم إلى option، ولكن لسحب البيانات من الخادم يتطلب التمهيد JS، مما يؤدي إلى وجود الكثير من الكود التمهيدي المكرر في كود التمهيد للصفحة، مما يجعل الأمر محبطًا. لذا، فكرت في خاصية data في bootstrap table، إذا كان بإمكاننا استخدام طريقة data-* مباشرة في html لتشغيل المكونات البسيطة، فسيكون ذلك رائعًا. دعونا نرى وثائق bootstrap table أولاً:

可以看到bootstrap table中几乎所有的属性、事件都可以用data-*这种方式来做，感觉还不错。那么博主就要开始研究了。data-*这个东西是从哪里来的呢？

一、jQuery data()初探

在网上搜索了一圈，终于找到了data-*的来源，原来是jQuery和HTML5中的，好东西，真是好东西！我们先来看看jQuery的API

原始用法如下：

作用其实很明显，就是给元素添加某些属性和数据，或者获取值。

下面看看data()方法和HTML5 data-*属性的结合使用

哈哈，这个功能真好，通过HTML5的data-*设置的值，能够用jQuery的data()方法获取。这里的规则如下：

1）所有的data属性必须以“data-”开头，

2）属性用“-”分隔，

3）在jQuery中获取属性时去掉“data”和“-”即可。

有了这个作为基础，我们就知道如何在标签中设置属性，然后在JS中获取对应的属性了。下面结合上次封装combobox的例子进行说明。

二、jQuery data()实现data-*初始化组件

还记得之前JS组件系列——封装自己的JS组件，你也可以在这篇文章中封装了一个简单的combobox，可以通过URL从后端获取数据。那么下面我们仍然在这个组件的基础上进行操作，实现直接在select标签中添加data-*属性来初始化下拉框组件。

1、JS组件封装代码

(function ($) {
 //1.定义jQuery的扩展方法combobox
 $.fn.combobox = function (options, param) {
 if (typeof options == 'string') {
  return $.fn.combobox.methods[options](this, param);
 }
 //2.将调用时传递的参数和默认参数合并
 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());
 });
 });

بشكل واضح، بعد إكمال إعداد الصفحة، يتم إعداد العنصر من خلال ميزة اختيار النمط. تم استخدام each، إذا كان هناك عدة نماط .combobox، يتم إعداد كل منها بشكل متتابع. يتم استدعاء دالة call باستخدام $.fn.combobox.call($combobox, $combobox.data()); لتشغيل إعداد combobox، حيث يتناسب كلاً من المعاملين في دالة call:

1）الجويب الحالي للتشغيل

2）参数列表. هنا يتم الحصول على جميع خصائص data-* في html من خلال $combobox.data(). يتم إدخال جميع خصائص data-* كمعلمات يتم تقديمها إلى طريقة تشغيل combobox.

2、html里面通过data-*初始化

<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-*. من المعروف أن التشغيل هنا يتم من خلال مبدأ الاختيار .combobox لتشغيل العنصر، لذا يجب أن يكون هناك class="combobox" إذا أردت استخدام data-* لتشغيل العنصر، حتى يتمكن الجانب الخلفي من الحصول على العلامات التي يجب تشغيلها.

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; }
 }

كود الاختبار، لا شيء يمكن قوله.

التحقق من النتيجة

حصلت على النتيجة

بهذا تكون قد اكتملت عملية تحديث المكونات باستخدام data-*.

النتيجة

تم عرض استخدام jQuery data() method مع خاصية html5 data-* ببساطة. يمكن أن يحقق احتياجات blogger بشكل أساسي: لا تحتاج إلى كتابة سطر جافا سكريبت إضافي للتحقق من التسميات. يمكنك استخدام ملفات jquery.js وjquery.extension.js عند الاستخدام. ولكن نعلم أن هذا هو ميزة html5، لذا يجب أن يكون هناك متطلب معين على المتصفح. بالطبع، هذه الطريقة ليست متقدمة بشكل كبير، ولكنها كافية للتحقق من مكونات بسيطة.

إذا كان هناك أي شيء غير مفهوم في النص، فلا تتردد في إبداء الرأي، سيكون blogger ممتنًا جدًا.

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعد في تعلمكم، ونأمل أن تدعموا تعليمات呐喊 بشكل أكبر.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويتمتع المالك الأصلي بحقوق النشر، ويتم جمع المحتوى من قبل المستخدمين عبر الإنترنت بشكل تلقائي، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا اكتشفت أي محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وتقديم الدليل، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فوراً.