jQuery mentakrifkan kaedah pemalam_jquery

Sesetengah pembangun WEB akan merujuk perpustakaan kelas JQuery, dan kemudian menulis $("#"), $(".") pada halaman web Selepas menulis selama beberapa tahun, mereka akan memberitahu orang lain bahawa mereka sangat biasa dengan JQuery. Saya pernah menjadi orang seperti itu, tetapi tidak sampai pertukaran teknikal dalam syarikat saya mengubah pandangan saya terhadap diri saya sendiri.

Apabila memanjangkan jquery. Kaedah teras adalah dua berikut:

$.extend(objek) boleh difahami sebagai menambah kaedah statik pada jquery

$.fn.extend(objek) boleh difahami sebagai menambah kaedah pada contoh jquery

$.lanjutkan(objek)

Contoh:

/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun: function () { alert("执行方法一"); } });//定义
$.fun();//调用
$.fn.extentd(object)
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun: function () { alert("执行方法"); } });
$(this).fun();
//等同于
$.fn.fun = function () { alert("执行方法三"); }
$(this).fun();

Tentukan struktur asas pemalam jquery

1． Tentukan skop:

Tentukan skop peribadi untuk pemalam. Kod luaran tidak boleh mengakses terus bahagian dalam pemalam. Kod dalaman pemalam tidak tertakluk kepada gangguan luaran, dan ia juga tidak mencemarkan pembolehubah global.

  //step 定义JQuery的作用域
(function ($) {
})(jQuery);

2. Tambahkan kaedah sambungan pada pemalam:

//step01 定义JQuery的作用域
(function ($) {
  //step02 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    
  }
})(jQuery);

3. Tetapkan nilai lalai:

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
  }
})(jQuery);

Antaranya: var options = $.extend(defaults, options) means. Menunjukkan bahawa pilihan mengatasi nilai lalai dan memberikan nilai kepada pilihan.
Dalam persekitaran pemalam, ini bermakna nilai yang ditetapkan oleh pengguna mengatasi nilai lalai pemalam jika pengguna tidak menetapkan atribut dengan nilai lalai, nilai lalai pemalam masih dikekalkan .

4. Sokong pemilih jquery:

 //step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
    //step 支持JQuery选择器
    this.each(function () {
    });
  }
})(jQuery);

5. Sokong panggilan pautan JQuery:

Untuk mencapai kesan panggilan pautan, setiap elemen gelung mesti dikembalikan

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
    //step 支持JQuery选择器
    //step 支持链式调用
    return this.each(function () {
    });
  }
})(jQuery);

6 Kaedah dalam pemalam:

Kaedah yang ditakrifkan dalam pemalam tidak boleh dipanggil secara langsung oleh dunia luar Kaedah yang saya takrifkan dalam pemalam tidak mencemarkan persekitaran luaran.

//step01 定义JQuery的作用域
(function ($) {
  //step03-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step06-a 在插件里定义方法
  var showLink = function (obj) {
    $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
  }
  //step02 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step03-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
    //step4 支持JQuery选择器
    //step5 支持链式调用
    return this.each(function () {
      //step06-b 在插件里定义方法
      showLink(this);
    });
  }
})(jQuery);

Kandungan di atas memperkenalkan anda kepada kaedah mentakrifkan pemalam dengan jQuery.