1. Analisis pembukaan
Hai, semuanya! Apakah Anda masih ingat artikel sebelumnya ----- awal dari seri ini (tutorial pengembangan plug-in JavaScript 1). Ini terutama menceritakan kisah "Cara Mengembangkan Plug-In di JQuery",
Jadi hari ini kami akan melanjutkan perjalanan pengembangan plug-in kami dengan pertanyaan kemarin. Pertanyaan sebelumnya adalah sebagai berikut:
(1) Jika pemilihan teknologi proyek dan penggantian plug-in ini, ia bergantung pada mekanisme "jQuery", plug-in yang kami tulis sebelumnya tidak akan digunakan (dengan asumsi bahwa jQuery tidak digunakan), bagaimana cara refactor?
(2) Memperbaiki logika kunci plug-in, bagaimana kita mengaturnya?
Oke, mari kita pelajari artikel hari ini dengan pertanyaan.
Pertama-tama, saya tidak menyangkal "metode plug-in jQuery", dan kedua, kita perlu menganalisis masalah dari berbagai perspektif, seperti "jQuery plug-in memiliki keunggulan berikut":
(1) Masukkan semua kode di penutupan (fungsi eksekusi instan). Pada saat ini, penutupan setara dengan ruang lingkup pribadi. Eksternal tidak dapat mengakses informasi internal, dan tidak akan ada polusi variabel global.
(2), a) Hindari ketergantungan global; b) Hindari kerusakan pihak ketiga; c) Kompatibel dengan operator jQuery '$' dan 'jQuery'.
Jadi dengan cara apa kita akan mengatur kode, yang merupakan ide berorientasi objek (OOP)? Atau haruskah kita melanjutkan ke ide berbasis proses? Atau kombinasi keduanya? Hahaha, teruslah menonton. . . . . .
2. Rekonstruksi contoh kemarin
Berikut ini adalah bagian kode sumber dari bagian JS kemarin:
Salinan kode adalah sebagai berikut:
(function ($) {
$ .fn.bigbear = fungsi (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
kembalikan this.each (function () {
var elem = $ (ini);
elem.find ("span"). Teks (opts ["title"]);
$ .get (opts ["url"], function (data) {
elem.find ("div"). Teks (data ["teks"]);
});
});
};
$ .fn.bigbear.defaults = {
Judul: "Ini adalah tes sederhana",
URL: "data.json"
};
}) (jQuery);
Mari menganalisisnya langkah demi langkah:
Pertama, tentukan fungsi plugin ini
(1), tampilkan informasi teks judul yang kami atur.
(2) Secara dinamis mendapatkan informasi konten melalui cara asinkron.
Baiklah! Sangat mudah untuk membahasnya jika persyaratannya jelas. Tidak sulit untuk melihat dari kode di atas bahwa logikanya longgar dan pemikiran berbasis prosesnya jelas, jadi langkah pertama adalah memasukkan persyaratan fungsional kami
Mengatur secara efektif dengan cara kelas. Lihatlah kode refactored sebagai berikut:
Salinan kode adalah sebagai berikut:
$ (function () {
$ ("#bb"). Bigbear ();
});
(function ($) {
$ .fn.bigbear = fungsi (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
kembalikan this.each (function () {
var elem = $ (ini);
var bb = Bigbear baru (elem, opts);
bb.getelem (). pemicu ("data");
});
};
$ .fn.bigbear.defaults = {
Judul: "Ini adalah tes sederhana",
URL: "data.json"
};
}) (jQuery);
fungsi Bigbear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
kembalikan ini.elem;
};
bbproto.getopts = function () {
kembalikan ini.
};
bbproto.init = function () {
var itu = ini;
this.getelem (). on ("data", function () {
that._settitle (that.getopts () ["title"]);
$ .get (that.getOpts () ["url"], function (hasil) {
that.getelem (). find ("div"). Teks (hasil ["teks"]);
});
});
};
bbproto._settitle = function (teks) {
this.getelem (). find ("span"). text (teks);
};
Hahaha, apakah ada lebih banyak kode? Bahkan, metode ini adalah untuk melihat masalah dari perspektif yang berorientasi objek, pertama-tama menganalisis persyaratan fungsional, dan kemudian merancang kelas kami. Meskipun tidak mungkin bagi kita untuk mendesainnya dengan sangat baik sekaligus.
Namun, perspektif masalah telah berubah, kode kami menjadi lebih mudah dibaca, dan kami dapat mempertahankannya dengan lebih baik, sehingga tujuan kami dapat dicapai.
Berikut ini adalah implementasi kode sumber yang relevan yang dikutip dari bagian "Bootstrap" JS, seperti yang ditunjukkan di bawah ini:
Tidak sulit untuk melihat bahwa ada juga metode implementasi yang serupa, yang mempertahankan logika utama plug-in kami melalui kelas.
(Iii), tambahkan fungsi baru dan perkenalkan kelas tambahan
Sekarang permintaan telah meningkat, dan perlu ada beberapa perubahan dalam pengalaman, dan ada efek "memuat" saat memuat data.
Ide implementasi bisa seperti ini: Atur teks ke kata "Load Data ..." di area konten asli, dan kemudian memperkenalkan kelas baru, sebagai berikut:
Salinan kode adalah sebagai berikut:
fungsi overlay () {
};
var olproto = overlay.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// Saya tidak akan menuliskan implementasi spesifik
Oke, lapisan topeng sudah ada, bagaimana kita bisa mengintegrasikannya sekarang? Kami mengaksesnya dalam kombinasi, sebagai berikut:
Salinan kode adalah sebagai berikut:
fungsi Bigbear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.overLay = overlay baru ();
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
kembalikan ini.elem;
};
bbproto.getopts = function () {
kembalikan ini.
};
bbproto.init = function () {
var itu = ini;
var loadingText = "Data Loading ....";
this.getelem (). on ("data", function () {
that._settitle (that.getopts () ["title"]);
that.overlay.show ();
that.getelem (). find ("div"). text (loadingText);
$ .get (that.getOpts () ["url"], function (hasil) {
that.overlay.hide ();
that.getelem (). find ("div"). Teks (hasil ["teks"]);
});
});
};
bbproto._settitle = function (teks) {
this.getelem (). find ("span"). text (teks);
};
Ini hanya untuk akhir fungsi kami. Saya percaya bahwa plug-in yang ditulis dengan cara ini jauh lebih baik daripada versi pertama. Tentu saja, ini bukan implementasi yang optimal dan perlu terus-menerus direfaktor dari detail, tetapi metode ini adalah cara opsional untuk mengembangkan plug-in.
Ini kode lengkapnya:
Salinan kode adalah sebagai berikut:
$ (function () {
$ ("#bb"). Bigbear ();
});
(function ($) {
$ .fn.bigbear = fungsi (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
kembalikan this.each (function () {
var elem = $ (ini);
var bb = Bigbear baru (elem, opts);
bb.getelem (). pemicu ("data");
});
};
$ .fn.bigbear.defaults = {
Judul: "Ini adalah tes sederhana",
URL: "data.json"
};
}) (jQuery);
fungsi Bigbear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.overLay = overlay baru ();
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
kembalikan ini.elem;
};
bbproto.getopts = function () {
kembalikan ini.
};
bbproto.init = function () {
var itu = ini;
var loadingText = "Data Loading ....";
this.getelem (). on ("data", function () {
that._settitle (that.getopts () ["title"]);
that.overlay.show ();
that.getelem (). find ("div"). text (loadingText);
$ .get (that.getOpts () ["url"], function (hasil) {
that.overlay.hide ();
that.getelem (). find ("div"). Teks (hasil ["teks"]);
});
});
};
bbproto._settitle = function (teks) {
this.getelem (). find ("span"). text (teks);
};
fungsi overlay () {
};
var olproto = overlay.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// Saya tidak akan menuliskan implementasi spesifik
Artikel ini sudah berakhir untuk saat ini. Apakah Anda mendapat pemahaman baru tentang pengembangan plug-in JavaScript?