Teknik Refactoring JavaScript: Khusus untuk Kod Generik

Takeaways utama:

Refactoring JavaScript meningkatkan kebolehbacaan kod, kebolehkawalan, prestasi, dan kebolehgunaan semula, membantu pengesanan pepijat dan pembetulan. Teknik biasa melibatkan mengurangkan kelebihan menggunakan pembolehubah, meningkatkan pengendalian acara, dan pengurusan kelas penapisan untuk kod yang lebih fleksibel dan mudah disesuaikan. Ujian unit menyeluruh sebelum dan selepas refactoring adalah penting untuk mencegah akibat yang tidak diingini. Walaupun keuntungan prestasi adalah mungkin, mengutamakan kebolehbacaan dan kebolehkerjaan adalah yang paling penting. Refactoring mestilah proses berulang yang disatukan ke dalam kitaran hayat pembangunan.

Artikel ini telah dikaji semula oleh Dan Prince. Terima kasih kepada pengulas rakan sebaya SitePoint atas sumbangan mereka!

Thread Forum SitePoint mempamerkan kod dropdown yang mengawal penglihatan. Walaupun berfungsi, kod itu tidak mempunyai keteguhan dan kebolehsuaian. Artikel ini menunjukkan teknik refactoring untuk kebolehgunaan semula dan proofing masa depan.

asal CSS:

#second { display: none; }
#second.show { display: block; }

JavaScript asal:

document.getElementById("location").onchange = function () {
  if (this[this.selectedIndex].value === "loc5") {
    document.getElementById("second").className = "show";
  } else {
    document.getElementById("second").className = "";
  }
};

Artikel ini Refactors Kod JavaScript ini untuk mengekalkan dan kebolehgunaan semula yang lebih baik.

memilih laluan refactoring yang betul:

JavaScript menawarkan pelbagai penyelesaian; Matlamatnya adalah untuk meningkatkan kod untuk mengelakkan kerja semula masa depan. Mengeluarkan redundansi adalah titik permulaan, maju ke arah kod yang lebih generik dan mudah disesuaikan. Kod khusus sering rapuh, manakala kod generik mengendalikan pelbagai situasi yang lebih luas. Keseimbangan terletak pada mencapai keluasan tanpa mengorbankan kebolehbacaan.

refactoring: spesifik untuk generik:

Pembangunan yang didorong oleh ujian (TDD) menyoroti prinsip penting: sebagai ujian menjadi lebih spesifik, kod menjadi lebih generik. Ini meningkatkan keupayaan kod untuk mengendalikan pelbagai senario. Untuk kod contoh, penambahbaikan termasuk:

menggunakan pembolehubah untuk menyimpan rentetan, memusatkan pengurusan.
menggantikan
• dengan onchange untuk pengendalian acara yang lebih baik dan mencegah penindasan. addEventListener
menggunakan
• bukan classList untuk menguruskan nama kelas tanpa menimpa kelas sedia ada. className

Perubahan ini meningkatkan daya tahan terhadap pengubahsuaian masa depan dan memudahkan kemas kini.

Menggunakan pembolehubah untuk mengelakkan pertindihan:

Menyimpan ID elemen dan mencetuskan nilai dalam pembolehubah meningkatkan kebolehkerjaan. Daripada pelbagai rujukan kepada elemen yang sama, rujukan pembolehubah tunggal digunakan, memudahkan pengubahsuaian masa depan.

kod yang lebih baik (dengan penggunaan berubah -ubah):

var source = document.getElementById("location");
var target = document.getElementById("second");
var triggerValue = "loc5";

source.onchange = function () {
  var selectedValue = this[this.selectedIndex].value;
  if (selectedValue === triggerValue) {
    target.className = "show";
  } else {
    target.className = "";
  }
};

Refactoring ini memusatkan pengurusan pengenal.

Meningkatkan pengendalian acara:

Pengendali acara tradisional boleh ditimpa. addEventListener membolehkan beberapa pengendali untuk acara yang sama, menghalang penindasan yang tidak disengajakan.

kod yang lebih baik (dengan addEventListener):

#second { display: none; }
#second.show { display: block; }

Ini memastikan kegigihan pengendali acara.

Meningkatkan pengendalian kelas:

menggunakan classList.add() dan classList.remove() menghalang kelas menimpa kelas yang sedia ada, mengekalkan gaya asal elemen.

Kod Refactored Akhir:

document.getElementById("location").onchange = function () {
  if (this[this.selectedIndex].value === "loc5") {
    document.getElementById("second").className = "show";
  } else {
    document.getElementById("second").className = "";
  }
};

Kod ini lebih mantap dan boleh disesuaikan.

Kesimpulan:

Refactoring adalah proses yang mudah. Prinsip "khusus untuk generik", selalunya hasil sampingan TDD, meningkatkan fleksibiliti kod. Teknik -teknik ini mengurangkan keperluan untuk membetulkan kod berulang, menghasilkan lebih banyak javascript yang boleh dipelihara dan boleh diguna semula.

Soalan -soalan yang sering ditanya (Soalan Lazim) mengenai Teknik Refactoring JavaScript: (Bahagian ini masih tidak berubah dari input, kerana ia memberikan maklumat yang berharga dan tidak memerlukan penulisan semula yang signifikan untuk tujuan pengapungan.)

Apakah manfaat utama kod refactoring JavaScript?

Kod JavaScript Refactoring menawarkan banyak kelebihan: kebolehbacaan dan kebolehkerjaan yang lebih baik, peningkatan prestasi melalui pengoptimuman kod, pengesanan dan pembetulan pepijat yang lebih mudah, dan peningkatan semula kod.

bagaimana saya boleh mengenal pasti kod yang memerlukan refactoring?

Tanda -tanda kod yang memerlukan refactoring termasuk duplikasi kod, kaedah atau fungsi yang berlebihan, kelas terlalu besar, kerumitan yang tinggi, dan prestasi yang buruk. Alat analisis kod dapat membantu mengenal pasti kawasan yang bermasalah.

Apakah beberapa teknik refactoring JavaScript biasa?

Teknik refactoring JavaScript biasa merangkumi kaedah pengekstrakan, menamakan semula pembolehubah atau fungsi, mengeluarkan kod mati, memudahkan ekspresi bersyarat, dan menggantikan pembolehubah sementara dengan pertanyaan langsung.

bagaimana saya dapat memastikan bahawa refactoring tidak memperkenalkan pepijat baru dalam kod?

Ujian unit komprehensif adalah penting. Jalankan ujian sebelum dan selepas refactoring untuk mengesahkan fungsi masih tidak terjejas.

Bolehkah refactoring meningkatkan prestasi kod JavaScript?

Ya, refactoring dapat meningkatkan prestasi dengan menghapuskan kod yang tidak perlu, mengoptimumkan fungsi, dan memudahkan ekspresi kompleks. Walau bagaimanapun, kebolehbacaan dan penyelenggaraan harus kekal sebagai objektif utama.

adakah perlu untuk refactor keseluruhan kod sekaligus?

Tidak, refactoring tambahan, yang memberi tumpuan kepada bidang atau fungsi tertentu, biasanya disyorkan untuk pengurusan yang lebih baik dan risiko yang dikurangkan.

bagaimana saya boleh mengetahui lebih lanjut mengenai teknik refactoring JavaScript?

Banyak sumber dalam talian boleh didapati, termasuk tutorial, blog, buku, dan kursus video. Pengalaman praktikal dapat diperoleh melalui cabaran pengekodan dan projek sumber terbuka.

alat apa yang boleh saya gunakan untuk kod javascript refactoring?

ides seperti WebStorm dan Visual Studio Code menawarkan ciri refactoring terbina dalam. Alat analisis kod seperti Eslint dan JSHint membantu mengenal pasti bahagian kod yang bermasalah.

Bolehkah refactoring membantu mengurangkan saiz kod JavaScript?

Ya, refactoring boleh membawa kepada lebih banyak kod ringkas, mengurangkan saiznya dan berpotensi meningkatkan masa beban laman web.

adakah refactoring proses satu kali?

Tidak, refactoring adalah proses berterusan yang disatukan ke dalam kitaran hayat pembangunan untuk mengekalkan kualiti dan kecekapan kod.

Atas ialah kandungan terperinci Teknik Refactoring JavaScript: Khusus untuk Kod Generik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!