Fungsi teras JavaScript sentiasa diperbaiki, dan banyak kelas dan fungsi baru telah ditambah untuk membantu kerja pengaturcara. Walau bagaimanapun, beberapa fungsi praktikal asas masih hilang dan perlu dilaksanakan dengan perpustakaan seperti jQuery, prototaip, dan mootool. Walaupun alat ini hebat, dalam beberapa kes, menggunakannya kelihatan agak rumit. Artikel ini akan memperkenalkan lima fungsi praktikal yang saya fikir JavaScript harus dibina.

Mata utama:

• JavaScript tidak mempunyai beberapa fungsi praktikal asas, yang biasanya perlu dilaksanakan dengan perpustakaan seperti jQuery, prototaip, dan mootools. Walau bagaimanapun, untuk beberapa keperluan, menggunakan perpustakaan ini terlalu rumit.
Fungsi tidak disokong oleh semua versi Internet Explorer, tetapi fungsi pembalut boleh digunakan untuk bersesuaian dengan versi lama. Fungsi ini menggunakan nama kelas untuk mendapatkan unsur -unsur, yang merupakan ciri yang HTML5 tidak pernah ada sebelum ini.
• Fungsi getElementsByClassName()
digunakan untuk menggabungkan dua atau lebih objek, yang sering diperlukan semasa menulis plugin. Fungsi ini bukan fungsi JavaScript asli, tetapi boleh dibina dengan mudah.
• Fungsi extend()
tidak berasal dari JavaScript, tetapi anda boleh menulis fungsi ini untuk menguji sama ada nilai dalam array. Fungsi ini boleh dipertingkatkan menggunakan fungsi
• untuk mendapatkan perlawanan apabila dua objek mempunyai sifat dan nilai yang sama. inArray() Fungsi equals()
digunakan untuk menambah atau memadam nama kelas elemen berdasarkan sama ada nama kelas wujud.
• toggleClass()

getElementsByClassName ()

JavaScript membolehkan penggunaan fungsi untuk mendapatkan unsur -unsur oleh ID mereka, tetapi sebelum HTML5, tidak ada fungsi asli yang boleh menggunakan nama kelas untuk mendapatkan satu atau lebih elemen. Fungsi baru dipanggil

, yang boleh didapati di Firefox 3, Opera 9.5, Safari 3.1, dan semua versi Google Chrome. Malangnya, ia tidak disokong oleh semua versi Internet Explorer, penyemak imbas musuh nombor satu untuk pereka web. Hanya Internet Explorer 9 menyokong

, jadi untuk versi lama, fungsi pembalut diperlukan. Fungsi terbaik yang saya dapati ditulis oleh Robert Nyman. Pelaksanaannya dikeluarkan di bawah lesen MIT dan telah disyorkan oleh WHATWG. Ia menggunakan kaedah getElementById() asli dalam pelayar yang menyokongnya, dan kemudian kembali ke kaedah getElementsByClassName() yang kurang dikenali, yang tertakluk kepada versi lama Firefox (sekurang-kurangnya dari versi 1.5) dan opera (sekurang-kurangnya dari versi 9.27) Mula) Sokongan. Sekiranya semua kaedah gagal, skrip itu kembali kepada traversal rekursif DOM dan mengumpul unsur -unsur yang sepadan dengan nama kelas yang diberikan. Kodnya adalah seperti berikut: getElementsByClassName() getElementsByClassName() document.evaluate()

extend ()

var getElementsByClassName = function (className, tag, elm){
  // ... (代碼與原文相同) ...
};

Jika anda pernah menulis plugin, anda hampir pasti mengalami masalah menggabungkan dua atau lebih objek. Ini sering berlaku apabila anda mempunyai beberapa tetapan lalai dan mahu pengguna dapat menggantikan beberapa nilai lalai. Jika anda menggunakan jQuery, anda boleh menggunakan extend(), tetapi kerana kita bercakap tentang JavaScript asli, berita buruk adalah bahawa tidak ada fungsi asli. Nasib baik, anda boleh dengan mudah membinanya sendiri. Contoh berikut akan menunjukkan kepada anda cara membuat kod dengan fungsi yang sama seperti kaedah jQuery. Saya menambah kaedah extend() kami ke prototaip Object supaya semua objek dapat berkongsi kaedah yang sama.

var getElementsByClassName = function (className, tag, elm){
  // ... (代碼與原文相同) ...
};

sama dengan ()

Perbandingan objek adalah operasi yang sangat biasa. Walaupun ujian ini boleh dilakukan menggunakan pengendali kesamaan yang ketat (===), kadang -kadang anda tidak mahu menguji sama ada dua pembolehubah merujuk kepada objek yang sama dalam ingatan. Sebaliknya, anda ingin tahu sama ada dua objek mempunyai sifat yang sama dan nilai yang sama. Inilah yang dilakukan oleh kod berikut. Perhatikan bahawa kod berikut tidak ditulis oleh saya; Sekali lagi, equals() telah ditambah kepada Object.prototype.

Object.prototype.extend = function() {
  // ... (代碼與原文相同) ...
};

inArray ()

JavaScript Tidak ada kaedah asli untuk menguji sama ada nilai dalam array. Kami akan menulis fungsi yang mengembalikan benar jika nilai itu wujud, jika tidak palsu. Fungsi ini hanya membandingkan nilai yang diberikan kepada setiap elemen array. Seperti dua contoh terdahulu, inArray() ditambah kepada sifat prototaip kelas Array.

Object.prototype.equals = function(x) {
  // ... (代碼與原文相同) ...
};

Fungsi ini tidak berfungsi seperti yang diharapkan kerana kesederhanaannya. Walaupun ia berfungsi untuk jenis primitif seperti rentetan dan nombor, jika anda membandingkan objek, ia hanya akan kembali benar jika fungsi mendapati objek yang sama. Untuk lebih memahami bagaimana ia berfungsi, mari kita lihat contoh berikut.

Array.prototype.inArray = function (value) {
  // ... (代碼與原文相同) ...
};

fungsi inArray() yang lebih baik adalah seperti berikut:

// ... (代碼與原文相同) ...

toggleclass ()

Fungsi lain yang sering digunakan dalam jQuery ialah toggleClass(). Ia menambah atau memadam nama kelas elemen berdasarkan sama ada nama kelas wujud. Versi toggleClass() mudah ditunjukkan di bawah.

Array.prototype.inArray = function (value) {
  // ... (代碼與原文相同) ...
};

fungsi toggleClass() yang lebih baik adalah seperti berikut:

function toggleClass(id, className) {
  // ... (代碼與原文相同) ...
}

Kesimpulan

Artikel ini memberi tumpuan kepada beberapa fungsi yang paling penting yang saya fikir hilang dalam JavaScript. Sudah tentu, JavaScript kehilangan sesuatu yang lain, yang akan kita lihat dalam beberapa minggu akan datang. Tetapi, sekarang, saya ingin menunjukkan perkara berikut:

• rangka kerja seperti jQuery mempunyai banyak fungsi berguna, tetapi mereka meningkatkan overhead. Oleh itu, jika anda hanya memerlukan beberapa fungsi, gunakan JavaScript asli dan kumpulan fungsi yang anda perlukan ke dalam fail luaran.
• Jika anda menggunakan fungsi yang diperkenalkan dalam versi JavaScript baru, jangan padamkannya. Balut dengan pernyataan bersyarat untuk menguji jika ia disokong, dan jika ia tidak disokong, gunakan kod lama anda seperti yang ditunjukkan dalam getElementsByClassName(). Dengan cara ini, anda akan terus menyokong penyemak imbas lama anda.
• Tambah fungsi ke prototaip objek sebanyak mungkin, seperti yang ditunjukkan dalam extend(). Semua keadaan akan berkongsi kaedah yang sama dan melakukan lebih baik.
• Gunakan semula kod anda sebanyak mungkin, seperti yang ditunjukkan dalam versi kedua toggleClass().

Gambar tetap menjadi format asal dan kedudukan tidak berubah.

Atas ialah kandungan terperinci Lima fungsi berguna yang hilang dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!