Saya telah menulis kode javascript untuk waktu yang lama dan tidak dapat mengingat era apa yang dimulai. Saya sangat senang dengan pencapaian JavaScript dalam beberapa tahun terakhir; Saya sangat beruntung menjadi penerima manfaat dari pencapaian ini. Saya telah menulis banyak artikel, bab, dan buku yang didedikasikan untuk itu, tetapi saya masih dapat menemukan beberapa pengetahuan baru tentang bahasa ini sekarang. Berikut ini menggambarkan keterampilan pemrograman yang membuat saya menghela nafas "ah!" di masa lalu. Anda harus mencoba keterampilan ini sekarang, daripada menunggu secara tidak sengaja menemukan mereka di masa depan.
Menulis ringkas
Salah satu hal favorit saya di JavaScript adalah metode singkatan dari menghasilkan objek dan array. Di masa lalu, jika Anda ingin membuat objek, Anda perlu melakukan ini:
var mobil = objek baru (); car.colour = 'merah'; car.wheels = 4; car.hubcaps = 'spinning'; car.age = 4;
Metode penulisan berikut dapat mencapai efek yang sama:
var car = {warna: 'merah', roda: 4, hubcaps: 'spinning', usia: 4}Ini jauh lebih sederhana, Anda tidak perlu menggunakan nama objek ini berulang kali. Dengan cara ini, mobil didefinisikan. Mungkin Anda akan menghadapi masalah InvaliduserInsession, yang hanya ditemui saat Anda menggunakan IE. Ingatlah satu hal dan jangan menulis koma sebelum kawat gigi penutup, dan Anda tidak akan mengalami masalah.
Singkatan lainnya yang sangat nyaman adalah untuk array. Cara tradisional untuk mendefinisikan array adalah sebagai berikut:
var moviesthatneedBetterwriters = array baru ('transformers', 'transformers2', 'avatar', 'Indianajones 4');Versi singkatan seperti ini:
var moviesthatneedBetterwriters = ['transformers', 'transformers2', 'avatar', 'Indianajones 4'];
Untuk array, ada masalah di sini, tetapi sebenarnya tidak ada fungsi grafik grup. Tetapi Anda akan sering menemukan bahwa seseorang mendefinisikan mobil di atas seperti ini, seperti ini
var mobil = array baru (); mobil ['color'] = 'red'; mobil ['roda'] = 4; mobil ['hubcaps'] = 'spinning'; mobil ['usia'] = 4;
Array tidak mahakuasa; Jika mereka ditulis secara tidak benar, mereka akan membingungkan. Grafik grup sebenarnya adalah fungsi dari objek, dan orang -orang telah membingungkan kedua konsep ini.
Metode singkatan lainnya yang sangat keren adalah menggunakan simbol bersyarat terner. Anda tidak perlu menulisnya seperti di bawah ...
arah var; if (x <200) {arah = 1; } else {Direction = -1; }…Anda dapat menyederhanakannya dengan notasi bersyarat terner:
VAR Direction = x <200? 1: -1;
Ketika kondisinya benar, nilai setelah tanda tanya diambil, jika tidak nilai setelah usus besar diambil.
Menyimpan data di json
Sebelum saya menemukan JSON, saya menggunakan berbagai metode gila untuk menyimpan data dalam tipe data bawaan Javascript, seperti array, string, mesin terbang yang mudah dibagi dan hal -hal yang mengganggu lainnya. Setelah Douglas Crockford menemukan JSON, semuanya berubah. Menggunakan JSON, Anda dapat menggunakan fungsi JavaScript sendiri untuk menyimpan data ke dalam format yang kompleks, dan tidak perlu melakukan konversi tambahan lainnya, dan Anda dapat langsung mengaksesnya. JSON adalah singkatan dari "notasi objek JavaScript", yang menggunakan dua metode singkatan yang disebutkan di atas. Jadi, jika Anda ingin menggambarkan band, Anda mungkin menulis seperti ini:
var band = {"name": "The Red Hot Chili Peppers", "Anggota": [{"Name": "Anthony Kiedis", "Role": "Lead Vocals"}, {"Name": "Michael 'Flea' Balzary", "Role": "Bass Guitar, Trumpet, Backing Vocals" {"," PERAN ":" PERAN "," PERAN "," PERAN "," REPION "," REPION "," ROMEON "," REPION "," REPION "," REPION "," ROMEON "," ROMEON "," }, {"name": "John Frusciante", "Role": "Lead Guitar"}], "Year": "2009"}Anda dapat menggunakan JSON secara langsung di JavaScript, merangkumnya dalam fungsi, atau bahkan menggunakannya sebagai bentuk nilai pengembalian API. Kami menyebutnya JSON-P, dan banyak API menggunakan formulir ini.
Anda dapat menghubungi sumber penawaran data dan secara langsung mengembalikan data JSON-P dalam kode skrip:
<div id = "delicious"> </div> <script> function delicious (o) {var out = '<ul>'; untuk (var i = 0; i <o.length; i ++) {out + = '<li> <a href = "' + o [i] .u + '">' + o [i] .d + '</a> </li>'; } out += '</ul>'; document.geteLementById ('lezat'). bitnertml = out; } </script> <script src = "http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=Delicious"> </cript>Ini memanggil fitur layanan web yang disediakan oleh situs web yang lezat untuk mendapatkan daftar bookmark yang tidak dipesan terbaru dalam format JSON.
Pada dasarnya, JSON adalah cara paling ringan untuk menggambarkan struktur data yang kompleks, dan dapat berjalan di browser. Anda bahkan dapat menjalankannya di PHP dengan fungsi JSON_DECODE (). Satu hal yang mengejutkan saya tentang fungsi JavaScript sendiri (matematika, array dan string) adalah bahwa setelah saya mempelajari fungsi matematika dan string di JavaScript, saya menemukan bahwa mereka dapat sangat menyederhanakan pekerjaan pemrograman saya. Menggunakannya, Anda dapat menyimpan pemrosesan loop yang kompleks dan penilaian bersyarat. Misalnya, ketika saya perlu menerapkan fungsi untuk menemukan angka terbesar di array angka, saya biasa menulis loop ini seperti ini:
var angka = [3.342,23,22,124]; var max = 0; untuk (var i = 0; i <number.length; i ++) {if (angka [i]> max) {max = angka [i]; }} peringatan (maks);Kita bisa melakukannya tanpa perulangan:
var angka = [3.342,23,22,124]; numbers.sort (function (a, b) {return b - a}); peringatan (angka [0]);Perlu dicatat bahwa Anda tidak dapat mengurutkan () array karakter numerik, karena dalam hal ini hanya akan mengurutkan dalam urutan abjad. Jika Anda ingin tahu lebih banyak tentang penggunaannya, Anda dapat membaca artikel bagus ini tentang Sort ().
Fungsi lain yang menarik adalah Math.max (). Fungsi ini mengembalikan angka terbesar dalam parameter:
Math.max (12.123,3,2,433,4); // Mengembalikan 433
Karena fungsi ini dapat memverifikasi angka dan mengembalikan yang terbesar, Anda dapat menggunakannya untuk menguji dukungan browser untuk suatu fitur:
var scrolltop = math.max (doc.documentelement.scrolltop, doc.body.scrolltop);
Ini digunakan untuk menyelesaikan masalah IE. Anda bisa mendapatkan nilai scrolltop dari halaman saat ini, tetapi tergantung pada doctype pada halaman, hanya satu dari dua properti di atas yang akan menyimpan nilai ini, dan properti lainnya tidak akan ditentukan, sehingga Anda bisa mendapatkan nomor ini dengan menggunakan math.max (). Baca artikel ini dan Anda akan mendapatkan lebih banyak pengetahuan tentang penggunaan fungsi matematika untuk menyederhanakan JavaScript.
Ada juga sepasang fungsi yang sangat berguna yang mengoperasikan string dibagi () dan gabung (). Saya pikir contoh yang paling representatif adalah menulis fungsi untuk melampirkan gaya CSS ke elemen halaman.
Ini seperti ini. Saat Anda menambahkan kelas CSS ke elemen halaman, baik itu adalah kelas CSS pertama dari elemen ini, atau sudah memiliki beberapa kelas. Anda perlu menambahkan ruang setelah kelas yang ada dan kemudian mengikuti kelas. Dan ketika Anda ingin menghapus kelas ini, Anda juga perlu menghapus ruang di depan kelas ini (ini sangat penting di masa lalu karena beberapa browser lama tidak mengenali kelas diikuti oleh ruang).
Jadi, tulisan aslinya akan terlihat seperti ini:
fungsi addClass (elm, newclass) {var c = elm.classname; elm.classname = (c === '')? NewClass: C+''+NewClass; }Anda dapat menggunakan fungsi split () dan gabung () untuk secara otomatis menyelesaikan tugas ini:
fungsi addClass (elm, newclass) {var class = elm.classname.split (''); class.push (newclass); elm.classname = class.join (''); }Ini akan memastikan bahwa semua kelas dipisahkan oleh ruang dan bahwa kelas yang ingin Anda tambahkan ditempatkan tepat yang terakhir.
Delegasi Acara
Aplikasi web semuanya didorong oleh acara. Saya suka penanganan acara, terutama saya suka mendefinisikan acara sendiri. Itu membuat produk Anda terukur tanpa mengubah kode inti. Ada masalah besar (juga manifestasi yang kuat) tentang penghapusan peristiwa pada halaman. Anda dapat menginstal pendengar acara pada elemen dan pendengar acara mulai bekerja. Tetapi tidak ada indikasi pada halaman bahwa ada pendengar. Karena masalah yang tidak dapat diprediksi ini (yang sangat merepotkan bagi beberapa pemula), dan berbagai masalah memori yang "browser" seperti IE6 menggunakan terlalu banyak acara mendengarkan, Anda harus mengakui bahwa adalah bijaksana untuk mencoba menggunakan pemrograman acara sesedikit mungkin.
Jadi komisi insiden itu terjadi.
Ketika suatu peristiwa pada suatu elemen pada halaman dipicu, dan dalam hubungan warisan DOM, semua anak dari elemen ini juga dapat menerima acara ini. Pada saat ini, Anda dapat menggunakan event handler pada elemen induk untuk menanganinya, daripada menggunakan pendengar acara pada sekelompok elemen anak untuk menanganinya. Apa sebenarnya artinya? Mari kita begini, ada banyak hyperlink di halaman. Anda tidak ingin menggunakan tautan ini secara langsung. Anda ingin memanggil tautan ini melalui suatu fungsi. Kode HTML seperti ini:
<h2> Sumber Daya Web yang Hebat </h2> <ul id = "Resources"> <li> <a href = "http://opera.com/wsc"> Kurikulum Web Opera </a> </li> <li> <a href = "http://sitepoint.com"> sitepoint </a> </http://sitepoint.com "> sitepoint </a> </Li> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> <a> li> li> li> lia> <a> li> li> li> href = "http://alistapart.com"> Daftar terpisah </a> </li> <li> <a href = "http://yuiblog.com"> blog yui </a> </li> <a href = "http:/blameitonthevoices.com" href = "http://oddlyspecific.com"> anehnya spesifik </a> </li> </ul>
Ini adalah praktik umum untuk mengulangi tautan ini dan melampirkan event handler ke setiap tautan:
// Contoh Penanganan Acara Khas (function () {var Resources = document.getElementById ('Resources'); var links = Resources.getElementsbyTagname ('a'); var all = links.length; for (var i = 0; i <all; i ++) {// lampirkan pendengar ke setiap tautan tautan [i]. var = e.target; // Dapatkan tautan yang diklik (x)Kami juga dapat menyelesaikan tugas ini dengan prosesor acara:
(function () {var Resources = document.getElementById ('Resources'); Resources.addeventListener ('klik', handler, false); function handler (e) {var x = e.target; // Dapatkan tautan tHA if (x.nodename.tolowercase () === 'a') {warny (x.nodename. }) ();Karena peristiwa klik terjadi di elemen halaman ini, yang harus Anda lakukan adalah membandingkan nodename mereka dan mencari tahu elemen mana yang harus menanggapi acara tersebut.
Penafian: Dua contoh tentang peristiwa yang disebutkan di atas dapat berjalan di semua browser. Kecuali untuk IE6, Anda perlu menggunakan model acara di IE6, daripada implementasi standar W3C sederhana. Inilah sebabnya kami merekomendasikan menggunakan beberapa toolkit.
Manfaat dari pendekatan ini tidak terbatas untuk mengurangi beberapa prosesor peristiwa menjadi satu. Pikirkan tentang hal ini, misalnya, Anda perlu secara dinamis menambahkan lebih banyak tautan ke tabel tautan ini. Setelah menggunakan delegasi acara, Anda tidak perlu melakukan perubahan lain; Kalau tidak, Anda perlu meletakkan ulang tabel tautan ini dan menginstal event handler untuk setiap tautan lagi.
Fungsi dan modularitas anonim
Hal yang paling menjengkelkan dalam JavaScript adalah bahwa variabel tidak memiliki ruang lingkup untuk digunakan. Variabel, fungsi, array, objek apa pun, asalkan tidak ada di dalam fungsi, dianggap global, yang berarti bahwa skrip lain di halaman ini juga dapat mengaksesnya dan mengesampingkannya.
Solusinya adalah menempatkan variabel Anda di dalam fungsi anonim dan memanggilnya segera setelah didefinisikan. Misalnya, metode penulisan berikut akan menghasilkan tiga variabel global dan dua fungsi global:
var name = 'chris'; var usia = '34'; var status = 'single'; function createMember () {// [...]} fungsi getMemberDetails () {// [...]}Jika ada variabel yang disebut status dalam skrip lain di halaman ini, masalah akan terjadi. Jika kita merangkumnya dalam aplikasi my, masalah ini akan diselesaikan:
var myApplication = function () {var name = 'chris'; var usia = '34'; var status = 'single'; function createMember () {// [...]} fungsi getMemberDetails () {// [...]}} ();Namun, dengan cara ini, tidak ada fungsi di luar fungsi. Jika ini yang Anda butuhkan, tidak apa -apa. Anda juga dapat menghilangkan nama fungsinya:
(function () {var name = 'chris'; var age = '34'; var status = 'single'; function createMember () {// [...]} function getMemberDetails () {// [...]}}) ();Jika Anda ingin menggunakan bagian dalam fungsi, Anda perlu membuat beberapa modifikasi. Untuk mengakses CreateMember () atau GetMemberDetails (), Anda perlu mengubahnya menjadi MyApplication Properties untuk mengeksposnya ke dunia eksternal:
var myApplication = function () {var name = 'chris'; var usia = '34'; var status = 'single'; return {createMember: function () {// [...]}, getMemberDetails: function () {// [...]}}} (); //myApplication.createMember () dan //myApplication.getMemberDetails () dapat digunakan.Ini disebut Mode Modul atau Singleton. Douglas Crockford telah membicarakan hal ini berkali -kali, dan banyak digunakan di Perpustakaan Antarmuka Pengguna Yahoo Yui. Tetapi yang membuat saya tidak nyaman adalah bahwa saya perlu mengubah struktur kalimat sehingga fungsi dan variabel dapat diakses oleh dunia luar. Terlebih lagi, saya perlu menambahkan awalan aplikasi my saat menelepon. Jadi, saya tidak suka melakukan ini, saya lebih suka hanya mengekspor pointer ke elemen yang perlu diakses oleh dunia luar. Setelah melakukan ini, penulisan panggilan eksternal disederhanakan:
var myApplication = function () {var name = 'chris'; var usia = '34'; var status = 'single'; function createMember () {// [...]} Fungsi getMsMsDetails () {// [...]} return {create: createMember, get: getMsMseDetails}} (); // Sekarang tulis sebagai myApplication.get () dan myApplication.create ().Saya menyebutnya "pola modul yang mengungkapkan."
Dapat dikonfigurasi
Setelah saya menerbitkan kode JavaScript yang saya tulis ke dunia ini, seseorang ingin mengubahnya, biasanya orang ingin menyelesaikan tugas bahwa itu tidak dapat menyelesaikan dirinya sendiri - tetapi biasanya program yang saya tulis tidak cukup fleksibel dan tidak memberikan fungsi yang ditentukan pengguna. Solusinya adalah menambahkan objek item konfigurasi ke skrip Anda. Saya pernah menulis artikel yang memperkenalkan objek item konfigurasi JavaScript secara mendalam. Inilah poin utama:
---- Dalam skrip Anda, tambahkan objek yang disebut konfigurasi.
---- Objek ini menyimpan semua hal yang sering diubah orang saat menggunakan skrip ini:
** ID CSS dan nama kelas;
** Nama tombol, kata label, dll.;
** Nilai seperti "jumlah gambar yang ditampilkan per halaman" dan "ukuran gambar yang ditampilkan";
** Lokasi, lokasi, dan pengaturan bahasa.
--- Kembalikan objek ini ke pengguna sebagai properti umum sehingga pengguna dapat memodifikasi dan menimpanya.
Ini biasanya yang perlu Anda lakukan pada langkah terakhir dalam proses pemrograman Anda. Saya memusatkan ini dalam satu contoh: "Lima hal yang harus dilakukan pada skrip sebelum menyerahkannya kepada pengembang berikutnya."
Bahkan, Anda juga ingin kode Anda digunakan dengan cara yang sangat baik dan membuat beberapa perubahan sesuai dengan kebutuhan masing -masing. Jika Anda menerapkan fitur ini, Anda akan menerima email yang kurang membingungkan dari orang -orang yang mengeluh tentang skrip Anda, yang akan memberi tahu Anda bahwa seseorang telah memodifikasi skrip Anda dan itu sangat berguna.
Berinteraksi dengan latar belakang
Salah satu hal penting yang telah saya pelajari selama bertahun -tahun pengalaman pemrograman adalah bahwa JavaScript adalah bahasa yang sangat baik untuk mengembangkan interaksi antarmuka, tetapi jika digunakan untuk memproses angka atau mengakses sumber data, itu agak tidak memuaskan.
Awalnya, saya belajar JavaScript untuk menggantikan Perl karena saya benci harus menyalin kode ke folder CGI-Bin untuk membuat Perl dijalankan. Kemudian, saya menyadari bahwa saya harus menggunakan bahasa kerja backend untuk memproses data utama, dan saya tidak dapat membiarkan JavaScript melakukan segalanya. Lebih penting lagi, kita perlu mempertimbangkan karakteristik keamanan dan bahasa.
Jika saya mengakses layanan web, saya bisa mendapatkan data dalam format JSON-P. Di browser klien, saya melakukan berbagai konversi data, tetapi ketika saya memiliki server, saya memiliki lebih banyak cara untuk mengonversi data. Saya dapat menghasilkan data format JSON atau HTML di sisi server dan mengembalikannya ke klien, serta data cache, dll. Jika Anda memahami dan menyiapkannya terlebih dahulu, Anda akan membuat keuntungan jangka panjang dan menyimpan banyak sakit kepala. Program penulisan yang cocok untuk berbagai browser adalah buang -buang waktu, gunakan toolkit!
Ketika saya pertama kali memulai pengembangan web, saya berjuang keras untuk waktu yang lama tentang apakah akan menggunakan document.all atau dokumen. Lapis saat mengakses halaman. Saya memilih dokumen. Pola layer akhirnya gagal, jadi saya mulai menggunakan Document.all. Saya sangat senang ketika Netscape 6 mengumumkan bahwa itu hanya mendukung model W3C DOM, tetapi sebenarnya pengguna tidak peduli tentang hal ini. Pengguna hanya melihat bahwa browser semacam itu tidak dapat menampilkan hal -hal yang sebagian besar browser dapat ditampilkan secara normal - ini adalah masalah dengan pengkodean kami. Kami menulis kode berpandangan pendek yang hanya dapat dijalankan di lingkungan saat ini, tetapi sayangnya, lingkungan operasi kami terus berubah.
Saya sudah membuang terlalu banyak waktu berurusan dengan kompatibilitas dengan berbagai browser dan berbagai versi. Menjadi pandai berurusan dengan masalah semacam ini memberi saya kesempatan kerja yang baik. Tapi sekarang kita tidak harus menanggung rasa sakit ini.
Beberapa toolkit, seperti Yui, JQuery dan Dojo, dapat membantu kita menangani masalah semacam ini. Mereka memecahkan berbagai masalah browser dengan mengabstraksi berbagai implementasi antarmuka, seperti ketidakcocokan versi, kekurangan desain, dll., Yang menyelamatkan kita dari rasa sakit kita. Kecuali jika Anda ingin menguji browser beta tertentu, jangan tambahkan kode ke program Anda sendiri untuk memperbaiki cacat browser, karena Anda cenderung lupa menghapus kode Anda ketika browser telah memodifikasi masalah ini.
Di sisi lain, mengandalkan sepenuhnya pada toolkit juga merupakan perilaku berpandangan pendek. Toolkit dapat membantu Anda berkembang dengan cepat, tetapi jika Anda tidak memiliki pemahaman yang mendalam tentang JavaScript, Anda juga akan melakukan sesuatu yang salah.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.