Saya telah mengeluh baru -baru ini. Semua orang tahu bahwa front-end web telah menjadi sangat berat dibandingkan dengan beberapa tahun yang lalu. Berbagai kerangka kerja JS, berbagai objek, dan banyak proyek, modul publik akan diekstraksi.
Tampilan UI dari modul -modul ini sama, dan perbedaannya adalah logika latar belakang. Misalnya, ketika kami melakukan bisnis dalam perjalanan perusahaan, kami biasanya memiliki modul publik JS dari pusat biaya. Pelanggan mengisi pusat biaya ini saat memesan tiket pesawat. Pusat biaya ini didistribusikan pada tujuan reservasi seperti online, offline dan aplikasi, yang juga nyaman untuk penyelesaian bulanan dengan perusahaan pelanggan pada tahap selanjutnya.
Kita juga tahu bahwa setelah proyek menjadi lebih besar, rumit, dan SOA, banyak masalah muncul. Sama seperti teori di web, semua data front-end tidak dapat dipercaya, jadi data antarmuka tim lain tidak sama. Ketika proyek masih muda, itu tidak terlalu tidak percaya diri, dan itu hanya akan merekam log ketika kesalahan logika. Proses bisnis normal umumnya jarang dicatat. Bagaimanapun, log info terlihat tidak sedap dipandang, dan juga mengkonsumsi bandwidth server dan juga menyeret kinerja web.
Tapi proyeknya besar. Ketika Anda menemukan bug aneh dalam proyek suatu hari, Anda mengandalkan log yang tidak lengkap dan akhirnya melacak antarmuka baris demi baris dengan mata telanjang. Namun, ada terlalu banyak parameter dan tidak mungkin untuk secara akurat mengembalikan data parameter antarmuka. Namun, Anda 100% yakin bahwa itu pasti masalah pengembalian antarmuka, tetapi Anda tidak bisa mendapatkan pesan lengkap. Saat ini, Anda tidak dapat menemukan penyedia antarmuka. Saya tidak berdaya saat itu. Akan lebih bagus jika Anda berpikir bahwa akan lebih baik memiliki log di setiap baris.
Setelah mempelajari pelajaran, tren log proses perekaman menjadi semakin populer, dan akhirnya menjadi peristiwa besar pada awal tahun juga disebabkan. Saya mengatakan banyak hal yang membingungkan bahwa backend web seperti ini, jadi bukan juga kita perlu merekam log di front-end saat ini? Kita tahu bahwa karena ini adalah modul JS publik, modul ini pasti telah merangkum beberapa metode dengan sendirinya, dan benar-benar tidak mungkin untuk membiarkan program pihak ketiga mengoperasikan node teks mereka sendiri, seperti yang berikut:
Salinan kode adalah sebagai berikut:
<!-Modul Ketiga->
Perusahaan: <input type = "text" id = "company" value = "xxx Co., Ltd." />
Nama Karyawan: <input type = "text" id = "username" value = "zhang san" />
<!-->
<type skrip = "Teks/JavaScript">
// Pusat Biaya
var costcenter = (function () {
var company = (document.geteLementById ("company") || "") && document.geteLementById ("perusahaan"). nilai;
var username = (document.geteLementById ("username") || "") && document.getElementById ("nama pengguna"). nilai;
var result = {
getInfo: function () {
return {company: perusahaan, nama pengguna: nama pengguna};
},
Validasi: function () {
return boolean (perusahaan && nama pengguna);
}
};
hasil pengembalian;
}) ();
</script>
Untuk menyederhanakan operasi, UI pihak ketiga menyediakan node UI untuk nama perusahaan dan nama karyawan, dan merangkum kelas CostCenter untuk memberikan metode membaca. Dapat dilihat bahwa program terjadwal saya hanya perlu membaca costcenter.getInfo, yang juga berperan dalam enkapsulasi.
Tapi masalahnya terjadi di sini. Dalam proyek aktual, nilainya tidak dapat diperoleh di CostCenter karena berbagai alasan. Tentu saja, itu juga mungkin bug yang sama UI.
Tetapi pada saat itu Anda tidak yakin apakah nilainya benar -benar diperoleh, tetapi secara logis bahkan jika nilainya tidak diperoleh, pada prinsipnya Anda tidak dapat mencegah pengiriman pesanan. Jadi untuk melacak bug secara menyeluruh, Anda menulis kelas LogCenter Singleton untuk merekam log. Biasanya ada cara ini untuk menggunakan JS untuk merekam log.
<1> Ajax
Metode ini mudah dipikirkan, tetapi jika Anda menggunakan xmlhttpRequest asli, Anda perlu mempertimbangkan kompatibilitas browser. Namun, jika Anda tidak membutuhkan penduduk asli, Anda perlu mengandalkan kerangka kerja pihak ketiga, seperti jQuery. Namun, bagaimanapun, masih ada banyak perusahaan yang tidak menggunakan jQuery, jadi ini perlu digunakan sesuai dengan kebutuhan aktual.
Salinan kode adalah sebagai berikut:
// Log Center
var logCenter = (function () {
var result = {
info: function (judul, pesan) {
// Operasi Ajax
$ .get ("http://xxx.com", {"title": title, "message": message}, function () {
}, "pos");
}
};
hasil pengembalian;
}) ();
<2> gambar
Ada objek yang disebut gambar di DOM kami, sehingga kami dapat secara dinamis menetapkan SRC -nya dengan tujuan meminta URL latar belakang, dan pada saat yang sama, kami perlu meneruskan informasi judul dan pesan ke dalam URL. Cara dinamis untuk gambar.src ini tidak perlu mempertimbangkan masalah kompatibilitas browser, yang sangat bagus.
Salinan kode adalah sebagai berikut:
// Log Center
var logCenter = (function () {
var result = {
info: function (judul, pesan) {
// Operasi Ajax
$ .get ("http://xxx.com", {"title": title, "message": message}, function () {
}, "pos");
},
info_image: function (judul, pesan) {
//gambar
var img = gambar baru ();
img.src = "http://www.baidu.com?title=" + title + "& message =" + pesan + "& temp =" + (math.random () * 100000);
}
};
hasil pengembalian;
}) ();
Di atas adalah konten utama dari artikel ini, dan kami akan terus membahasnya secara mendalam di masa depan