JS 컴포넌트 시리즈 - HTML 태그의 data 속성을 사용하여 JS 컴포넌트 초기화

서론: 최근 bootstrap 구성 요소를 사용하는 동안 사용성 문제를 발견했습니다. 많은 간단한 구성 요소 초기화는 JS에서 많은 초기화 코드를 작성해야 합니다. 예를 들어, 간단한 select 태그는 옵션에 데이터를 채우기 위해 백엔드에서 데이터를 가져오는 것만 필요하지만, 백엔드에서 데이터를 가져오는 것은 JS 초기화가 필요하므로, 페이지 초기화 시 JS 초기화 코드에 많은 중복 코드가 발생하여 눈에 띄게 됩니다. 그래서 bootstrap table의 data 속성을 생각해 봤습니다. html에서 직접 사용할 수 있다면...-*이 방식으로 간단한 컴포넌트를 초기화할 수 있다면 얼마나 편리할까요. 먼저 bootstrap table의 문서를 보겠습니다：

보면 bootstrap table에서 거의 모든 속성과 이벤트가 data-*이렇게 하면 꽤 괜찮아 보입니다. 그래서 블로그 주인은 연구를 시작합니다. data-*이게 어디서 왔나요?

1. jquery data() 탐구

웹에서 찾아보니, data-*의 출처를 알아보겠습니다. 이건 Jquery와 html5의, 좋은 거예요. 정말 좋은 거예요! 저는 이제 jquery의 API

원래 사용법은 다음과 같습니다：

작용은 매우 명확합니다. 요소에 특정 속성과 데이터를 추가하거나 값을 가져오는 것입니다.

다음에 data() 메서드와 html5 data-*속성의 결합 사용

하하, 이거 좋아요. html5 의 data-*설정된 값은 jquery의 data() 메서드를 통해 가져올 수 있습니다. 이 규칙은 다음과 같습니다：

1）모든 data 속성은 'data-”로 시작합니다.

2）속성은 '-”로 구분합니다.

3）jquery에서 속성을 가져올 때 'data'를 제거하고-”만으로도 됩니다.

이 기본을 바탕으로, 태그에 속성을 설정하고, js에서 해당 속성을 가져올 수 있는 방법을 알게 됩니다. 아래에서는 이전에 포장한 combobox 예제와 함께 설명하겠습니다.

2. jquery data() 구현-*컴포넌트 초기화

이전에 JS 컴포넌트 시리즈——자신의 JS 컴포넌트를 포장했던 기억나요? 이 글에서도 간단한 combobox를 포장했고, URL을 통해 백엔드에서 데이터를 가져올 수 있습니다. 그렇다면 아래에서도 이 컴포넌트를 기반으로 수정하여 select 태그에 data를 추가하는 방법을 보여드리겠습니다.-*속성을 사용하여 드롭다운 컴포넌트를 초기화합니다.

1js 컴포넌트 포장 코드

(function ($) {
 //1combobox 확장 메서드를 정의합니다.
 $.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());
 })
 });

很明显，就是在页面初始化完成之后通过样式选择器去初始化组件。使用了each，如果有多个.combobox样式，依次去初始化每一个。通过$.fn.combobox.call($combobox, $combobox.data());调用call方法去调用combobox的初始化，call方法里面两个参数分别对应：

1） 현재 초기화되는 jQuery 객체}}

2） 매개변수 목록. 여기서 $combobox.data()를 통해 얻는 것은 모든 HTML 내부의 data-*속성. 모든 data-*속성을 파라미터로 combobox 초기화 메서드에 전달합니다.

2HTML 내부에서 data-*초기화

<select id="Search_"
  name="Search_province"
  class="form-컨트롤 컴보박스
  data-url="/Home/GetProvince
  data-param='{"type":"0"}'
  data-text-field="Name"
  data-value-field="Id">
 </select>

지정 data-*속성. 위에서 알 수 있듯이 이곳의 초기화는 스타일 선택자 .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. 요약

위에서 제이쿼리 data() 메서드와 html을 결합하여 간단히 표시했습니다.5 data-*속성 사용. 일반적으로博主의 요구를 충족할 수 있습니다: js 코드를 추가하지 않고 레이블을 직접 초기화할 수 있습니다. 사용할 때는 jquery.js와 jquery.extension.js 파일을 직접 참조하면 됩니다. 하지만 우리는 html5그 내에서의 특성이 있다면, 브라우저에 대해 일정한 요구가 필요합니다. 물론, 이 사용 방법의 기능은 기본적인 것으로, 간단한 컴포넌트의 초기화에 충분합니다.

문서에서 이해가 잘못된 부분이 있다면, 지적해 주시면 감사하겠습니다.

이것이 본 문서의 모든 내용입니다. 많은 도움이 되었기를 바랍니다. 또한, 나락 튜토리얼에 많은 지지를 부탁드립니다.

선언: 본 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 본 사이트가 소유하지 않으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 본 사이트는 저작권 관련 법적 책임을 부담하지 않습니다. 저작권 위반 내용을 발견하셨다면, notice#w로 이메일을 보내 주세요.3codebox.com에 대한 신고를 위해 이메일을 보내시면 됩니다. (#을 @으로 변경해 주세요.), 관련 증거를 제공하시면, 해당 내용이 실제로 위반된 경우, 사이트는 즉시 해당 내용을 삭제합니다.