JavaScript yang tidak menyakitkan menggunakan prototaip

Jika anda berada di rel, anda tidak perlu memuat turun prototaip: ia termasuk dalam pengedaran. Anda boleh memasukkannya ke dalam pandangan anda dengan memasukkannya ke dalam

halaman anda:

<%= javascript_include_tag 'prototype' %>

Sekarang, mari masuk ke dalamnya!

Pembantu kecil prototaip

Salah satu perkara yang sangat baik tentang menggunakan prototaip adalah fungsi penolong mudah yang mematikan yang disediakan untuk tugas skrip yang sangat biasa. Fungsi $ telah mendapat perhatian. Beri satu atau lebih elemen ID, dan ia akan mengembalikan rujukan kepada mereka:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

3

Satu lagi fungsi yang sangat berguna ialah Document.getElementsByClassname, yang melakukan apa yang dikatakan pada timah: Ia memerlukan nama kelas CSS dan mengembalikan senarai semua elemen dengan kelas itu:

Juga, kerana artikel ini ditulis, versi prototaip 1.5.0_rc0 memperoleh fungsi $$ yang kuat, yang membolehkan anda memilih elemen menggunakan sintaks pemilih CSS standard:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Sila ambil perhatian bahawa, pada masa penulisan, melainkan jika anda memuat turun versi prototaip yang sangat terkini dari subversi, fungsi ini tidak akan tersedia untuk anda.

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

$F takes an ID and returns the value of any form field, for instance, a select box like this:

Membuat JavaScript Suck Less

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

oops, saya telah mencuri satu lagi garis tag perpustakaan JavaScript. Pemaju Perpustakaan JavaScript hanya tidak sepatutnya daripada cuba membuat JavaScript menjadi seperti bahasa lain. Orang -orang Mochikit mahu JavaScript menjadi Python, pengaturcara yang banyak telah cuba membuat JavaScript seperti Java, dan prototaip cuba menjadikannya seperti Ruby. Prototaip membuat sambungan ke teras JavaScript yang boleh (jika anda memilih untuk menggunakannya) mempunyai kesan dramatik pada pendekatan anda untuk pengekodan JavaScript. Bergantung pada latar belakang anda dan cara otak anda berfungsi, ini mungkin atau mungkin tidak membantu anda.

oo ruby ​​(ish) cara: class.create dan object.extend

Kaedah kelas.Create membolehkan anda menentukan kelas dengan cara yang lebih ruby, walaupun ini semata-mata estetika kerana ia pada dasarnya hanya memanggil kaedah inisialisasi yang anda tentukan sebagai pembina, dan bukannya mengambil pendekatan JavaScript tradisional untuk mewujudkan objek dengan fungsi pembina.

Walau bagaimanapun, lebih berkuasa adalah kaedah objek yang mudah tetapi berkesan. Meningkatkan kaedah. Apa yang dilakukan adalah menyalin sifat dan kaedah objek ke objek lain, tetapi kegunaannya banyak. Berikut adalah penyepit cepat:

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

Ia paling biasa digunakan untuk "menggabungkan" kaedah dari satu objek dengan yang lain. Sebagai contoh, anda boleh membuat satu set fungsi yang menjadikan elemen DOM tertentu boleh disusun:

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

maka, jika kita mahu membuat domtable kita dari atas Sortable, kita boleh mencampur dalam kaedah ini ke objek domtable:

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

<%= javascript_include_tag 'prototype' %>

sekarang kita boleh menghubungi kaedah tersebut di atas meja:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

mengikat fungsi

Prototaip juga menambah objek fungsi dua kaedah yang sangat berguna: mengikat dan bindaseventlistener. Ini digunakan terutamanya untuk mengikat fungsi ke objek tertentu supaya kata kunci ini menunjuk kepada objek tersebut. Ini sangat berguna apabila anda menetapkan fungsi pengendali acara. Bayangkan anda mencuba sesuatu seperti ini:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Secara tradisinya, anda akan mendapat kesilapan kerana, apabila peristiwa itu mencetuskan fungsi pengendali, ini merujuk kepada elemen MyDiv, bukan myObject, jadi ini.Message tidak ditentukan. Anda boleh menyelesaikan masalah ini menggunakan kaedah pengikat seperti:

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

Sekarang semuanya berfungsi dengan baik, kerana kata kunci ini terikat kepada myObject. Selanjutnya, BindaseVentListener melakukan perkara yang sama, walaupun ia melewati objek acara melalui fungsi anda dengan cara yang serasi dengan penyemak imbas, sehingga anda tidak lagi perlu bimbang tentang Window.Event dalam IE. Cuba ini:

$F takes an ID and returns the value of any form field, for instance, a select box like this:

Sekarang fungsi EventHandler kami mempunyai akses ke objek acara. Lebih terperinci mengenai kedua -dua kaedah ini boleh didapati di laman pencipta mereka.

Kaedah rentetan dan nombor baru

Prototaip telah menambahkan sejumlah besar kaedah berguna kepada objek rentetan yang dibina. Mari kita lihat dengan cepat beberapa yang terbaik.

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

Prototaip menambah kaedah yang hebat untuk nombor juga. Ucapkan selamat tinggal kepada anda untuk gelung!

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

di sini, kaedah Times mengambil fungsi yang akan dipanggil beberapa kali, dan berlalu dalam nombor lelaran semasa sebagai hujah. Penggunaan fungsi iterator ini adalah perkara biasa apabila menggunakan boleh dibincangkan, yang akan dibincangkan seterusnya.

Melangkah Jalan Ruby: Hash dan Hash

Salah satu permata tersembunyi prototaip adalah campuran yang boleh dibaca dan objek hash, yang telah direbus dari Ruby. Jika anda tidak biasa dengan Ruby, jangan risau. Saya akan menerangkan semuanya di sini.

kita akan bermula dengan enuman. Ringkasnya, apabila kita menambah boleh dibaca ke objek menggunakan objek.extend, ia memberikan objek yang dipersoalkan banyak fungsi yang sangat berguna untuk bekerja dengan sifatnya. Boleh dikatakan telah ditambah kepada prototaip Array, jadi array mempunyai kaedah baru ini. Berikut adalah beberapa contoh apa yang boleh anda lakukan dengan array "disenaraikan" yang baru:

var myTable = new DOMTable("table-id"); <br>
Object.extend(myTable, Sortable);

// sort the table using the given function <br>
myTable.sortBy(function (itemA, itemB) { ... });

var myObject = new Object();  <br>
myObject.message = "Hello!";  <br>
myObject.eventHandler = function() {  <br>
  alert(this.message);  <br>
}  <br>
  <br>
$("mydiv").onmouseover = myObject.eventHandler;

$("mydiv").onmouseover = myObject.eventHandler.bind(myObject);

myObject.eventHandler = function(event) {  <br>
  alert(event.srcElement.nodeName);  <br>
}  <br>
  <br>
$("mydiv").onmouseover = myObject.eventHandler.bindAsEventListener(myObject);

// "backgroundColor"  <br>
"background-color".camelize()

camelize turns hyphenated strings to camel case strings that you can use to work with CSS properties.

// "I am a piece of HTML"  <br>
"I am a piece of <strong>HTML</strong>".striptTags()  <br>
  <br>
// {a : 10, b: "thing"}  <br>
"a=10&b=thing".toQueryParams()

Untuk membuat hash, hubungi fungsi sihir $ h pada sebarang objek. Ini mengubah semua sifat objek ke dalam satu set pasangan nilai utama dengan dicampur dengan dicampur. Mari kita ambil hash untuk putaran:

<%= javascript_include_tag 'prototype' %>

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Pada mulanya, jika anda bukan seorang Rubyist, boleh dibaca dan Hash mungkin kelihatan sedikit kerumitan tetapi saya dapat memberi jaminan kepada anda, sebaik sahaja anda mula menggunakannya, anda akan tertanya -tanya mengapa anda pernah mengganggu RSI menulis semua untuk gelung! Apabila anda menggunakan satu atau lebih daripada mereka bersama -sama, anda akan menyedari kuasa besar kaedah baru ini. Anda boleh "> Baca tentang Hash dan Hash dengan lebih terperinci di Encyte Media.

Objek acara membantu memberikan apa yang, kepada banyak, adalah Holy Grail of JavaScript: Mudah, pengendalian acara penyemak imbas:

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

Dengan cara yang agak menyenangkan, prototaip cuba untuk mengelakkan kebocoran memori yang menjengkelkan di IE dengan secara automatik mengeluarkan setiap pemerhati apabila halaman memunggah.

Walau bagaimanapun, pada pendapat saya, ini adalah penyelesaian pengendalian acara yang agak kurang maju pada masa ini, jadi mungkin patut dipertimbangkan menggunakan sesuatu yang lebih kaya seperti addevent Dean Edwards untuk masa ini.

Borang pengendalian

Objek Bentuk dan Medan menyediakan beberapa fungsi mudah tetapi mudah untuk bekerja dengan bentuk dan medan input, serta kod yang menyokong pelaksanaan Ajax Prototaip.

Objek Borang

Secara amnya, kaedah objek borang mengambil sama ada ID atau objek merujuk kepada elemen:

Objek medan

$F takes an ID and returns the value of any form field, for instance, a select box like this:

Objek medan berkaitan dengan elemen bentuk individu, dan kaedahnya biasanya mengambil ID atau rujukan objek ke elemen dengan cara yang sama dengan objek bentuk:

Serialization Form

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

Dalam istilah prototaip, bersiri bentuk bermaksud membaca semua elemen bentuk dan menjadikannya menjadi rentetan url yang dikodkan (hampir) sama dengan yang akan dihantar jika anda menyerahkan borang tersebut. Sebagai contoh, pertimbangkan bentuk ini:

Notis bahawa bentuk. Serialize Cleverly melicinkan ke atas perbezaan antara cara -cara di mana unsur -unsur bentuk yang berbeza diakses, supaya input, memilih, kotak semak dan butang radio ditangani dengan betul. Form.Serialize berguna untuk beberapa tugas, tetapi datang sendiri ketika kami bekerja dengan Ajax, seperti yang akan kita lihat tidak lama lagi.

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

pemerhati ini memeriksa setiap saat sama ada data telah berubah dan, jika ada, akan memanggil mycallbackfunction.

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

Jenis kedua pemerhati adalah berasaskan acara dan hanya akan melakukan cek apabila perubahan atau klik acara dihasilkan untuk unsur-unsur. Anda boleh menggunakannya seperti ini:

var myTable = new DOMTable("table-id"); <br>
Object.extend(myTable, Sortable);

Jika semua bidang dalam bentuk anda memerhatikan menyokong pengendali acara, ini adalah cara yang lebih efisien untuk memerhatikan borang. Walau bagaimanapun, jika anda ingin melihat perubahan dalam unsur -unsur yang tidak menyokong peristiwa ini, gunakan pemerhati berkala.

bekerja dom

Prototaip mempunyai 4 objek (elemen, penyisipan, pemerhati, dan kedudukan) yang membolehkan pelbagai bentuk manipulasi DOM dan melicinkan banyak perbezaan penyemak imbas yang membuat berurusan dengan DOM supaya skrin-smashingly menyebalkan. Daripada membuang komputer anda keluar dari tingkap, lihat melalui bahagian ini.

Objek elemen

Objek Elemen berfungsi dengan cara yang anda mungkin dapat dijangkakan oleh titik ini: kebanyakan kaedah elemen hanya mengambil ID atau rujukan objek ke elemen yang anda ingin memanipulasi. Berikut adalah mengintip beberapa kaedah yang paling berguna:

<%= javascript_include_tag 'prototype' %>

Lihat senarai penuh di laman Sergio Pereira.

Objek penyisipan

Saya tahu apa yang anda fikirkan: ini agak pelik, bukan? Nah, objek penyisipan menambah potongan HTML di dalam dan di sekitar elemen. Terdapat 4 jenis penyisipan: sebelum, selepas, atas dan bawah. Begini cara anda menambah beberapa HTML sebelum elemen dengan id "myelement":

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

rajah ini menunjukkan di mana setiap jenis penyisipan akan menggugurkan kandungan HTML anda berhubung dengan elemen yang diberikan.

Objek kedudukan

Objek Kedudukan menawarkan beban kaedah yang dapat memberitahu anda tentang lokasi tertentu di skrin, dan memberikan maklumat tentang lokasi itu berbanding dengan unsur-unsur lain, dengan cara yang serasi dengan penyiaran. Ini sepatutnya mengambil banyak fiddliness daripada menulis animasi, kesan dan kod drag-and-drop. Lihatlah rujukan kedudukan untuk maklumat lanjut.

Dapatkan web anda 2.0 pada

"Akhirnya!" Anda berfikir, "Dia mendapat apa yang kita ingin tahu." Ya, saya telah meninggalkannya hingga akhir untuk masuk ke dalam pembantu Ajax Prototaip, kerana mereka dibina di atas semua perkara lain yang telah kami lalui, dan ia membantu memahami siri siri, pemerhati dan penyisipan prototaip ketika kita bercakap tentang Ajax.

Ajax, sekiranya anda telah dikebumikan dalam lubang yang sangat mendalam selama beberapa tahun yang lalu, merujuk kepada menggunakan objek XMLHTTPREQUEST (atau setaraf) penyemak imbas untuk berkomunikasi dengan pelayan tanpa memuatkan semula halaman. Prototaip melicinkan ke atas kebanyakan perincian, tetapi masih bagus untuk mendapatkan sedikit latar belakang pada XMLHTTPREQUEST, yang akan anda dapati dalam artikel ini oleh Cameron Adams.

Jadi, sekarang anda semua dipam untuk mendapatkan tindakan Web 2.0, mari kita lihat permintaan Ajax yang sangat mudah:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Pembina Ajax.Request mengambil URL dan objek pilihan. Dalam kes ini, kami menghantar parameter (nama) ke hello.php, dan memberi maklum balas (atau memberi amaran kepada ralat jika tidak berfungsi). Perlu mengambil masa untuk mengenali pilihan apa yang tersedia; Berikut adalah gambaran keseluruhan pilihan, bersama -sama dengan lalai mereka:

Prototaip menambah header HTTP tersuai kepada semua permintaan AJAXnya supaya aplikasi pelayan anda dapat mengesan bahawa ia adalah panggilan AJAX, bukannya panggilan biasa. Header adalah:

<%= javascript_include_tag 'prototype' %>

Berikut adalah contoh fungsi PHP yang digunakan untuk mengesan panggilan AJAX:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

Menggunakan pendekatan ini, anda boleh menulis aplikasi Ajax yang berfungsi walaupun pengguna menggunakan pelayar lama atau mempunyai JavaScript dilumpuhkan, tetapi itu adalah artikel lain ...

menggunakan form.serialize untuk lulus data ke ajax.request

Seperti yang telah kita lihat di atas, pilihan parameter digunakan untuk lulus rentetan pembolehubah yang dikodkan URL. Jika data yang anda perlu hantar ditetapkan dengan borang, kerana ia adalah dengan kebanyakan aplikasi Ajax, anda hanya boleh menggunakan form.Serialize untuk menghasilkan rentetan yang dikodkan URL dari semua bidang borang anda dan lulus ke dalam pilihan parameter seperti:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

menulis pengendali acara Ajax

Dalam contoh di atas, onsuccess dan onfailure adalah dua contoh pengendali acara Ajax. Fungsi pengendali acara yang diberikan dalam objek pilihan panggilan Ajax.request diberikan satu hujah, iaitu objek XMLHTTPREQUEST untuk panggilan AJAX itu. Saya biasanya memanggil respons hujah ini atau resp. Anda boleh menggunakan hujah ini untuk mendapatkan respons dari pelayan seperti:

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

ingat, walaupun, resp hanya objek XMLHTTPREQUEST, jadi semua sifat tersebut boleh didapati.

Anda boleh menghantar data sebagai JSON dari pelayan anda dengan menambahkan data JSON ke header Response X-JSON. Ini kemudiannya akan dinilai secara automatik oleh prototaip, dan dihantar sebagai hujah kedua.

ajax.updater dan ajax.periodicalupdater

Banyak operasi AJAX hanya melibatkan mengemas kini beberapa HTML pada halaman anda dengan HTML dikembalikan dari pelayan. Objek Ajax.updater membungkus Ajax.request dan memudahkan kes penggunaan biasa ini untuk kami. Berikut adalah contoh mudah:

$F takes an ID and returns the value of any form field, for instance, a select box like this:

coretan di atas hanya akan menggantikan kandungan elemen yang IDnya adalah "mydiv" dengan apa sahaja kandungan yang dikembalikan dari pelayan. Ajax.periodicalupdater adalah serupa, tetapi membuat panggilan Ajax berulang kali pada selang waktu yang anda tetapkan:

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

Pilihan Decay membolehkan anda memberikan pelayan anda sedikit rehat jika ia mengembalikan banyak respons yang sama. Pada asasnya, setiap kali berkala untuk membuat permintaan, ia membandingkan hasil dengan apa yang dikembalikan oleh pelayan kali terakhir. Jika nilai adalah sama, ia melipatgandakan selang dengan nilai kerosakan. Oleh itu, untuk contoh di atas, ia akan membuat permintaan seterusnya dua saat kemudian, kemudian empat saat kemudian, dan sebagainya, sehingga ia menerima hasil yang berbeza dari pelayan. Pada ketika itu, selang akan ditetapkan semula kepada satu saat.

ajax dengan responden

AJAX Responders membolehkan anda mendaftarkan pengendali acara global yang dicetuskan untuk setiap permintaan AJAX yang berlaku pada halaman. Mereka sangat berguna untuk menguruskan aplikasi dengan banyak aktiviti Ajax. Sebagai contoh, anda boleh menggunakannya untuk menunjukkan animasi pemuatan standard setiap kali permintaan Ajax berlaku:

<%= javascript_include_tag 'prototype' %>

Jika anda mencari beberapa contoh kerja Ajax dengan prototaip, cuba artikel ini.

di mana ke seterusnya?

Seperti yang kita lihat melalui artikel ini, prototaip bukan sahaja berguna sendiri, tetapi menyediakan titik permulaan yang sangat baik untuk menulis perpustakaan lain yang lebih khusus. Itulah yang semakin meningkat jumlah orang.

script.aculo.us dan moo.fx

Thomas Fuchs 'script.aculo.us mendapat banyak perhatian pada masa ini untuk kesannya dan widget UI yang bijak. Ia pada asalnya adalah sebahagian daripada Perpustakaan Prototaip Teras, tetapi tidak lama lagi berkembang dari kawalan dan memecahkan ibu bapanya.

Menggunakan prototaip sebagai asas, script.aculo.us mengkhususkan diri dalam menyediakan pengalaman pengguna yang kaya melalui kesan animasi, mudah menggunakan fungsi seret dan drop, dan komponen UI yang kuat. Terdapat wiki yang bagus di laman web ini, dengan dokumentasi berkualiti yang pesat berkembang untuk membantu anda memulakan, dan contoh -contoh halaman untuk mendapatkan jus kreatif anda mengalir. Sebagai script.aculo.us semakin besar dalam saiz fail, ia telah dibahagikan kepada beberapa fail, jadi pengguna anda tidak perlu memuat turun seluruh perpustakaan supaya anda boleh menggunakan beberapa kesan slaid. Walau bagaimanapun, walaupun fail individu agak besar.

Jika anda selepas beberapa kesan mudah, saya benar -benar mengesyorkan MOO.FX. Ia hanya bersaiz 3k, dan memberi anda beberapa slaid toggling dan kesan pudar yang, selalunya, semua yang diperlukan dalam aplikasi Ajax yang mudah. Ia juga merupakan titik permulaan yang hebat jika anda ingin menulis kesan anda sendiri. Lihatlah kod untuk melihat contoh hebat pengaturcaraan menggunakan objek Prototaip. Masukkan untuk memberikan warisan yang mudah. Valerio jelas sangat tertumpu pada mengekalkan saiz fail skripnya, jadi dia juga mempunyai versi prototaip 'lite' (dicincang ke sekitar 10k), dan versi tanpa lemak Ajax.request, yang saya dapati saya menggunakan lebih kerap daripada perpustakaan prototaip penuh. Ia pasti patut dilihat.

tingkah laku

tingkah laku adalah tambahan hebat kepada toolkit Dom Scripting anda yang membolehkan anda menggunakan pemilih CSS untuk menambah tingkah laku ke dokumen anda. Berikut adalah contoh apa yang membolehkan anda lakukan:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

Baca lebih lanjut mengenai perkara ini di tapak tingkah laku. Ia kini mungkin untuk mencapai jenis perkara yang sama menggunakan fungsi $$ baru yang dibincangkan sebelum ini, jadi ini akhirnya boleh menjadi berlebihan.

jQuery

JQuery adalah perpustakaan kecil yang padat yang bermain dengan baik dengan prototaip dan mencipta versi superhero fungsi $ yang boleh mengambil pemilih XPath dan CSS 3. Ia pasangan yang keupayaan dengan beberapa pendekatan chaining kaedah yang sangat bijak yang menjadikan kod yang sangat ringkas. Berhati -hati untuk yang ini.

Bungkus

Prototaip adalah sekeping kit yang kuat ketika datang untuk menambahkan beberapa rempah skrip DOM ke aplikasi web anda. Malangnya, keupayaan dan alatnya telah berkembang pada kadar yang lebih cepat daripada dokumentasinya! Kami telah berjaya menutup setiap sudut prototaip dalam artikel ini, tetapi tidak setiap kaedah. Saya harap, anda sekarang tahu ke mana hendak pergi untuk mendapatkan maklumat tambahan yang anda perlukan.

Jika anda ingin mengetahui lebih lanjut cuba prototypedoc.com Ronnie Roller, sumber yang terus berkembang dengan dokumentasi prototaip yang semakin meningkat. Bersenang -senang!

Soalan Lazim (Soalan Lazim) Mengenai Prototaip JavaScript yang tidak menyakitkan

Apakah prototaip JavaScript yang tidak menyakitkan? Ia adalah cetak biru dari mana objek lain boleh dibuat. Ciri ini amat berguna apabila anda ingin membuat pelbagai objek dengan sifat dan kaedah yang sama. Ia menggalakkan kebolehbasa dan kecekapan kod.

Bagaimana prototaip JavaScript yang tidak menyakitkan berbeza daripada ciri -ciri JavaScript yang lain? Ini bermakna anda boleh membuat pelbagai objek dari prototaip yang sama, masing -masing dengan sifat dan kaedah tersendiri. Ini berbeza dengan ciri -ciri JavaScript lain yang hanya membolehkan penciptaan objek tunggal. Berikut adalah contoh mudah:

kereta fungsi (membuat, model, tahun) { this.make = membuat;

this.model = model;

this.year = year; Prototaip, dan 'MyCar' adalah objek baru yang dibuat dari prototaip 'CAR'. Ini dilakukan menggunakan harta 'Prototaip'. Berikut adalah contoh:

car.prototype.color = 'hitam';

Dalam contoh ini, harta 'warna' ditambah kepada prototaip 'CAR'.

Bolehkah saya menambah kaedah ke prototaip JavaScript yang tidak menyakitkan? Ini dilakukan dengan cara yang sama seperti menambah sifat, menggunakan harta 'prototaip'. Berikut adalah contoh:

car.prototype.start = function () { console.log ('car bermula'); Menggunakan prototaip JavaScript yang tidak menyakitkan adalah kebolehgunaan semula kod dan kecekapan. Dengan membuat prototaip, anda boleh membuat pelbagai objek dengan sifat dan kaedah yang sama tanpa perlu mentakrifkan semula sifat dan kaedah untuk setiap objek. Ini boleh menjimatkan banyak masa dan menjadikan kod anda lebih cekap.

Adakah terdapat kelemahan untuk menggunakan prototaip JavaScript yang tidak menyakitkan? Walau bagaimanapun, sebaik sahaja anda memahami bagaimana ia berfungsi, ia boleh menjadi alat yang sangat kuat. Malah, ia sering digunakan bersamaan dengan ciri -ciri lain untuk membuat aplikasi yang lebih kompleks dan berkuasa. Walau bagaimanapun, ia adalah idea yang baik untuk memeriksa sokongan penyemak imbas tertentu untuk mana -mana ciri JavaScript yang anda gunakan. Beberapa tempat yang baik untuk memulakan termasuk Rangkaian Pemaju Mozilla (MDN) dan pelbagai tutorial dan kursus JavaScript yang terdapat di laman web seperti Codecademy dan Udemy.

Atas ialah kandungan terperinci JavaScript yang tidak menyakitkan menggunakan prototaip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!