Jika anda tidak mentakrifkan pemalam JQuery, jangan katakan anda tahu JQuery

1. Pengenalan

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

2. Mempopularkan pengetahuan JQuery

Pengetahuan 1: Apabila menulis pemalam dengan JQuery, dua kaedah teras adalah seperti berikut:

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

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

Takrifan dan panggilan asas:

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

Salin selepas log masuk

Pengetahuan 2: Perbezaan antara jQuery(fungsi () { }); dan (fungsi ($) { })(jQuery);:

jQuery(function () { });
//相当于
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);

Salin selepas log masuk

jQuery(function () { }); ialah kod dalam kaedah pelaksanaan selepas elemen DOM dimuatkan.

(fungsi ($) { })(jQuery); mentakrifkan fungsi tanpa nama, dengan jQuery mewakili parameter sebenar fungsi tanpa nama ini. Biasanya digunakan dalam pembangunan pemalam JQuery, ia memainkan peranan untuk menentukan domain peribadi pemalam.

3. Bangunkan struktur standard pemalam JQuery

1. Tentukan skop: Untuk menentukan pemalam JQuery, anda mesti meletakkan kod pemalam di tempat yang bebas daripada gangguan luaran. Untuk meletakkannya dalam istilah yang lebih profesional, anda perlu menentukan skop peribadi untuk pemalam ini. Kod luaran tidak boleh mengakses terus kod di dalam pemalam. Kod di dalam pemalam tidak mencemarkan pembolehubah global. Pada tahap tertentu, ia memisahkan pergantungan antara pemalam dan persekitaran yang sedang berjalan. Setelah mengatakan semua itu, bagaimana anda menentukan skop peribadi pemalam?

//step01 定义JQuery的作用域
(function ($) {

})(jQuery);

Salin selepas log masuk

Jangan memandang rendah skop ini, ia sama pentingnya dengan kata kunci kelas dalam menentukan kelas dalam C#.

2. Lanjutkan pemalam untuk JQuery: Selepas mentakrifkan skop JQuery, teras dan langkah paling mendesak ialah menambah kaedah sambungan pada contoh JQuery ini. Pertama, kami menamakan kaedah untuk pemalam Jqury ini, dipanggil easySlider Apabila memanggil pemalam ini, kami boleh menghantar beberapa parameter kepada pemalam ini melalui pilihan. Untuk kaedah definisi khusus, lihat kod berikut:

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

Salin selepas log masuk

Sehingga kini, salah satu pemalam JQuery yang paling mudah telah disiapkan. Apabila memanggil, anda boleh ("#domName").easySlider({}), atau ("#domName").easySlider({}), atau (".domName").easySlider({}) atau lebih banyak cara untuk dilakukan ia Panggil pemalam ini.

3. Tetapkan nilai lalai: Tentukan pemalam JQuery, sama seperti mentakrifkan kawalan .net. Pemalam yang sempurna harus mempunyai sifat yang agak fleksibel. Mari lihat kod ini: . Kawalan TextBox mempunyai sifat Width dan Height Apabila menggunakan TextBox, pengguna boleh menetapkan Ketinggian dan Lebar kawalan secara bebas, atau tidak menetapkan nilai, kerana kawalan itu sendiri mempunyai nilai lalai. Apabila bersedia untuk membangunkan pemalam JQuery, apabila pengguna tidak menentukan atribut, perlu ada nilai lalai Dalam JQuery, definisi sedemikian boleh dilaksanakan dalam dua langkah, lihat kod berikut step03-a, step03-b. .

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

Salin selepas log masuk

Pengaturcara suka berinovasi, seperti menukar nama pembolehubah, menukar baris, dsb. Apabila saya melihat var defaults = {} digunakan untuk mewakili atribut lalai, saya berfikir tentang menjadi berbeza apabila saya menulis pemalam JQuery, jadi saya menggunakan var default01 ={} dan var default02 ={} untuk mewakili atribut lalai. Kemudian nama atribut lalai adalah semua jenis dan semakin teruk. Oleh itu, adalah disyorkan bahawa semasa menulis pemalam JQuery, apabila mentakrifkan sifat lalai, gunakan pembolehubah lalai untuk mewakili sifat lalai tersebut lebih mudah dibaca.

Seseorang melihat baris kod ini: var options = $.extend(lalai, pilihan) dan berkerut dahi, menyatakan kekeliruan. Kemudian mari lihat kod berikut dahulu:

var obj01 = { name: "英文名：Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: "中文名：XiaoJian", girlfriend: { name: "YY"} };

var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);

Salin selepas log masuk

Salin kod ke persekitaran pembangunan, lihat nilai a, b, c dan d masing-masing, dan anda akan memahami maksud var options = $.extend(defaults, options). 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: Pemilih JQuery ialah ciri yang sangat baik bagi JQuery Jika pemalam kami ditulis untuk tidak menyokong pemilih JQuery, ia sememangnya satu penyesalan yang besar. Untuk menjadikan pemalam JQuery kami menyokong berbilang pemilih, kod kami hendaklah ditakrifkan seperti ini:

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

  });
 }
})(jQuery);

Salin selepas log masuk

5. Sokong panggilan pautan JQuery: Kod di atas kelihatan sempurna, tetapi sebenarnya ia tidak begitu sempurna. Panggilan pautan tidak disokong setakat ini. Untuk mencapai kesan panggilan pautan, setiap elemen gelung mesti dikembalikan

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

  });
 }
})(jQuery);

Salin selepas log masuk

这样的定义才能支持链接调用。比如支持这样的调用：$(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color": "red", "border-bottom-style": "dotted" });

6、插件里的方法：往往实现一个插件的功能需要大量的代码，有可能上百行，上千行，甚至上万行。我们把这代码结构化，还得借助function。在第一点已经说了，在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。现在就尝试着怎么样在插件里定义一些方法：

//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);

Salin selepas log masuk

步骤step06-a：在插件里定义了一个方法叫showLink(); 这个方法在插件外是不能直接调用的，有点像C#类里的一个私有方法，只能满足插件内部的使用。步骤step06-b演示了怎样调用插件内部的方法。

四、总结

开发只要形成了标准，然后再去阅读别人的代码就没有那么吃力了。