perkenalan:
Bab ini tidak menjelaskan beberapa prinsip mendasar JS secara mendalam, seperti pointer, ruang lingkup, dan prototipe ini. Ini melibatkan beberapa dari mereka yang kondusif untuk menyederhanakan kode dan meningkatkan efisiensi eksekusi selama pengembangan, atau mereka dapat digunakan sebagai metode empiris. Panjangnya tidak panjang, dan langkah -langkah kecil memungkinkan Anda untuk membaca seluruh artikel dan mengalami kegembiraan pemrograman.
Dapatkan nomor acak dalam dua interval
Salinan kode adalah sebagai berikut:
fungsi getRandomnum (min, max) {// Dapatkan angka acak dalam dua interval
// @南南南南南南 menunjukkan bahwa parameter pertama lebih besar dari parameter kedua, jadi menambahkan penilaian lebih dapat diandalkan
if (min> max)
Max = [min, min = max] [0]; // dengan cepat menukar dua nilai variabel
var range = max - min + 1;
var rand = math.random ();
return min + math.floor (rand * range);
};
Mengembalikan parameter positif/negatif secara acak
Salinan kode adalah sebagai berikut:
fungsi getRandomXy (num) {// mengembalikan parameter positif/negatif acak
num = nomor baru (num);
if (math.random () <= 0,5)
num = -num;
Return Num;
}
SetInterval () atau setTimeout () Parameter Pass Fungsi Timer
Salinan kode adalah sebagai berikut:
var s = 'Saya parameter';
fungsi fn (args) {
console.log (args);
}
var a = setInterval (fn (s), 100); // kesalahan xxxxx xxxxxx
var b = setInterval (function () {// Benar, panggil fungsi waktunya dengan fungsi anonim
fn (s);
}, 100);
setInterval () atau setTimeout () Timer secara rekursif dipanggil
Salinan kode adalah sebagai berikut:
var s = true;
fungsi fn2 (a, b) {// langkah 3
if (s) {
ClearInterval (A);
ClearInterval (B);
}
};
function fn (a) {// Langkah 2
var b = setInterval (function () {
fn2 (a, b) // lulus dalam dua timer
}, 200)
};
var a = setInterval (function () {// Langkah 1
fn (a); // B mewakili timer itu sendiri, yang dapat diteruskan pada parameter kursi
}, 100);
Konversi string ke nomor
Salinan kode adalah sebagai berikut:
// Tidak perlu nomor baru (string) atau angka (string) Cukup kurangi nol dari string
var str = '100'; // str: string
var num = str - 0; // num: angka
Penilaian nilai nol
Salinan kode adalah sebagai berikut:
var s = ''; // string kosong
If (! S) // string kosong dikonversi menjadi boolean false secara default, dan dapat ditulis langsung dalam pernyataan penilaian
if (s! = null) // tapi string kosong! = null
if (s! = tidak terdefinisi) // string kosong juga! = Tidak ditentukan
Yaitu metode browser parseint ()
Salinan kode adalah sebagai berikut:
// Konversi berikut adalah 0 di IE, dan browser lainnya adalah 1. Ini terkait dengan penjelasan browser IE tentang angka.
var inum = parseInt (01);
// Jadi, tulisan yang kompatibel adalah
var num = parseInt (nomor baru (01));
Firebug dengan mudah men -debug kode JS
Salinan kode adalah sebagai berikut:
// Firebug memiliki objek konsol bawaan, menyediakan metode bawaan untuk menampilkan informasi
/**
* 1: console.log (), yang dapat digunakan sebagai pengganti peringatan () atau document.write (), mendukung output placeholder, karakter (%s), bilangan bulat (%d atau%i), angka titik mengambang (%f) dan objek (%o). Misalnya: Console.log (" %d tahun %d bulan %d hari", 2011, 3, 26)
* 2: Jika ada terlalu banyak informasi, Anda dapat menampilkannya dalam grup. Metode yang digunakan adalah console.group () dan console.groupend ()
* 3: console.dir () dapat menampilkan semua properti dan metode suatu objek
* 4: console.dirxml () digunakan untuk menampilkan kode HTML/XML yang terkandung dalam node halaman web
* 5: Console.assert () Assert, digunakan untuk menentukan apakah suatu ekspresi atau variabel itu benar
* 6: console.trace () digunakan untuk melacak trek panggilan fungsi
* 7: console.time () dan console.timeEnd () digunakan untuk menampilkan waktu berjalan kode
* 8: Analisis Kinerja (Profiler) adalah untuk menganalisis waktu berjalan dari setiap bagian dari program untuk mengetahui bottleneck. Metode yang digunakan adalah console.profile () .... fn .... console.profileEnd ()
*/
Dengan cepat mengambil milidetik saat ini
Salinan kode adalah sebagai berikut:
// t == Sistem saat ini nilai milidetik, alasan: operator tanda + akan dipanggil, dan nilai metode tanggal () akan dipanggil.
var t = +tanggal baru ();
Cepat ambil bit integer desimal
Salinan kode adalah sebagai berikut:
// x == 2, nilai x berikut adalah 2, dan angka negatif juga dapat dikonversi
var x = 2.00023 | 0;
// x = '2.00023' | 0;
Dua nilai variabel pertukaran (tidak ada jumlah menengah)
Salinan kode adalah sebagai berikut:
var a = 1;
var b = 2;
a = [b, b = a] [0]
Peringatan (A+'_'+B) // Nilai Hasil 2_1, A dan B telah ditukar.
Logis atau '||' operator
Salinan kode adalah sebagai berikut:
// B bukan nol: a = b, b adalah nol: a = 1.
var a = b || 1;
// Penggunaan yang paling umum adalah lulus parameter untuk metode plug-in dan dapatkan elemen target acara: event = event || window.event
// IE memiliki objek Window.event, tetapi FF tidak.
Hanya objek metode yang memiliki properti prototipe
Salinan kode adalah sebagai berikut:
// Metode ini memiliki properti prototipe prototipe objek, sedangkan data asli tidak memiliki properti ini, seperti var a = 1, a tidak memiliki properti prototipe
function person () {} // Human Constructor
Person.prototype.run = function () {alert ('run ...'); } // Metode Jalankan Prototipe
Orang.run (); // kesalahan
var p1 = orang baru (); // Metode Prototipe Run akan ditugaskan ke P1 hanya ketika operator baru digunakan.
p1.run (); // berlari...
Cepat dapatkan hari dalam seminggu
Salinan kode adalah sebagai berikut:
// Waktu saat ini dari sistem perhitungan adalah minggu
var minggu = "Hari ini adalah: minggu" + "hari pertama, dua, tiga, empat, lima, enam" .charat (tanggal baru (). getDay ());
Bias penutupan
Salinan kode adalah sebagai berikut:
/**
* Penutupan: Badan metode JS apa pun dapat disebut penutupan, tidak hanya terjadi jika fungsi inline mengacu pada parameter atau properti tertentu dari fungsi eksternal.
* Ini memiliki ruang lingkup independen, di mana beberapa subscop dapat ada (mis. Metode metode bersarang), dan akhirnya ruang lingkup penutupan adalah ruang lingkup metode terluar.
* Ini berisi parameter metode dari dirinya sendiri dan parameter metode dari semua fungsi tertanam. Oleh karena itu, ketika fungsi tertanam memiliki referensi secara eksternal, ruang lingkup referensi adalah lingkup metode (tingkat atas) di mana fungsi referensi berada.
*/
fungsi a (x) {
fungsi b () {
peringatan (x); // referensi parameter fungsi eksternal
}
kembali b;
}
var run = a ('run ...');
// Karena perluasan ruang lingkup, variabel fungsi eksternal A dapat direferensikan dan ditampilkan
berlari(); // alert (): jalankan ..
Dapatkan string parameter alamat dan penyegaran waktunya
Salinan kode adalah sebagai berikut:
// Dapatkan tanda tanya? Konten berikut termasuk tanda tanya
var x = window.location.search
// Dapatkan konten di belakang nomor alarm #, termasuk nomor #
var y = window.location.hash
// Refresh halaman web otomatis dapat dicapai dengan timer
window.location.reload ();
Nol dan tidak terdefinisi
Salinan kode adalah sebagai berikut:
/**
* Tipe yang tidak ditentukan hanya memiliki satu nilai, yaitu, tidak terdefinisi. Ketika variabel yang dinyatakan belum diinisialisasi, nilai default variabel tidak ditentukan.
* Jenis nol juga hanya memiliki satu nilai, yaitu nol. NULL digunakan untuk mewakili objek yang belum ada, dan sering digunakan untuk mewakili fungsi yang mencoba mengembalikan objek yang tidak ada.
* Ecmascript percaya bahwa tidak terdefinisi berasal dari nol, sehingga mereka didefinisikan sebagai sama.
* Tetapi, jika dalam beberapa kasus kita harus membedakan antara kedua nilai ini, apa yang harus kita lakukan? Dua metode berikut dapat digunakan
* Saat membuat penilaian, yang terbaik adalah menggunakan '===' Jenis penilaian yang kuat ketika menilai apakah objek tersebut memiliki nilai sesuai dengan kebutuhan.
*/
var a;
peringatan (a === null); // false, karena a bukan objek kosong
peringatan (a === tidak ditentukan); // Benar, karena A tidak diinisialisasi, nilainya tidak ditentukan
// Memperkenalkan
peringatan (null == tidak ditentukan); // Benar, karena operator '==' akan melakukan konversi tipe,
// Demikian pula
peringatan (1 == '1'); // BENAR
waspada (0 == false); // Benar, False Konversi ke Angka Jenis 0
Tambahkan parameter secara dinamis ke metode
Salinan kode adalah sebagai berikut:
// Metode A memiliki satu parameter lagi 2
fungsi a (x) {
var arg = array.prototype.push.call (argumen, 2);
peringatan (argumen [0]+'__'+argumen [1]);
}
Kustomisasi Gaya Perbatasan Pilih
Salinan kode adalah sebagai berikut:
<!-Salin ke halaman untuk mencoba efeknya, Anda dapat menyesuaikan gaya sesuka hati->
<span style = "Border: 1px solid red; posisi: absolute; overflow: tersembunyi;" >
<Pilih style = "margin: -2px;">
<pection> Kustom Pilih Gaya Perbatasan </tiption>
<pection> 222 </pection>
<pection> 333 </pection>
</pilih>
</span>
Palet warna termudah
Salinan kode adalah sebagai berikut:
<!-js untuk mengekstrak nilai nilainya dan mengatur warna apa pun ke objek apa pun->
<Input Type = Color />
Fungsi, objek adalah array?
Salinan kode adalah sebagai berikut:
var anobject = {}; // Objek
anobject.aproperty = "properti objek"; // Properti objek
anobject.amethod = function () {alert ("Metode objek")}; // metode objek
// Fokus pada yang berikut:
waspada (anobject ["aproperty"]); // Anda dapat mengakses atribut sebagai array dengan nama atribut sebagai subskrip
anobject ["amethod"] (); // Anda dapat memanggil metode sebagai array dengan nama metode sebagai subskrip
untuk (var s in anObject) // Transfer semua properti dan metode objek untuk pemrosesan iteratif
peringatan (s + "adalah" + typeof (anObject [s]));
// Ini sama untuk objek tipe fungsi:
var afunction = function () {}; // suatu fungsi
afunction.aproperty = "properti fungsi"; // properti fungsi
afunction.amethod = function () {alert ("Metode fungsi")}; // Metode fungsi
// Fokus pada yang berikut:
waspada (afunction ["aproperty"]); // Anda dapat mengakses properti sebagai array dengan nama atribut sebagai subskrip
afunction ["amethod"] (); // Anda dapat memanggil metode menggunakan nama metode sebagai subskrip saat fungsi digunakan sebagai subskrip untuk array
untuk (var s in afunction) // mengulangi semua sifat dan metode fungsi traversal untuk pemrosesan berulang
alert (s + "adalah" + typeof (afunction [s]));
Salinan kode adalah sebagai berikut:
/**
* Ya, objek dan fungsi dapat diakses dan diproses seperti array, menggunakan nama atribut atau nama metode sebagai subskrip.
* Jadi, haruskah itu dianggap sebagai array atau objek? Kita tahu bahwa array harus dianggap sebagai struktur data linier. Struktur data linier umumnya memiliki aturan tertentu, yang cocok untuk operasi iterasi batch terpadu, dll., Yang sedikit seperti gelombang.
* Objek adalah struktur data diskrit yang cocok untuk menggambarkan hal -hal yang tersebar dan dipersonalisasi, sedikit seperti partikel.
* Oleh karena itu, kita juga dapat bertanya: Apakah objek dalam gelombang atau partikel JavaScript? Jika ada teori kuantum objek, maka jawabannya harus: dualitas gelombang-partikel!
* Oleh karena itu, fungsi dan objek dalam JavaScript memiliki karakteristik objek dan array. Array di sini disebut "kamus", kumpulan pasangan nilai nama yang dapat diregangkan secara sewenang-wenang dan kental. Faktanya, implementasi internal objek dan fungsi adalah struktur kamus, tetapi struktur kamus ini menunjukkan penampilan yang kaya melalui tata bahasa yang ketat dan indah. Sama seperti mekanika kuantum menggunakan partikel untuk menjelaskan dan menangani masalah di beberapa tempat, sementara gelombang untuk menjelaskan dan menangani masalah pada orang lain. Anda juga dapat dengan bebas memilih untuk menggunakan objek atau array untuk menjelaskan dan menangani masalah saat dibutuhkan. Selama Anda pandai memahami fitur -fitur indah JavaScript ini, Anda dapat menulis banyak kode ringkas dan kuat.
*/
Mengklik area kosong dapat memicu elemen untuk menutup/menyembunyikan
Salinan kode adalah sebagai berikut:
/**
* Terkadang halaman memiliki menu tarik-turun atau sesuatu, yang mengharuskan pengguna untuk menyembunyikannya saat mengklik kosong atau mengklik elemen lain.
* Acara klik dokumen global dapat dipicu
* @param {objek} "objek target"
*/
$ (dokumen) .click (function (e) {
$ ("Objek Target"). Sembunyikan ();
});
/**
* Tapi satu kerugian adalah bahwa saat Anda mengklik elemen dan ingin menampilkannya
* Jika Anda tidak mencegah peristiwa dari menggelembung ke objek dokumen global yang mengklik tepat waktu, metode di atas akan dijalankan
*/
$ ("Objek Target"). Klik (Function (Event) {
event = event || window.event;
event.stoppropagation (); // Saat mengklik objek target, cegah peristiwa dari gelembung tepat waktu
$ ("Objek Target"). Toggle ();
});
Di atas adalah beberapa metode JavaScript yang umum digunakan yang dirangkum oleh saya. Saya harap Anda menyukainya.