Javascript menjadi semakin populer. Ini telah menjadi pilihan pertama untuk pengembangan front-end. Dengan nodej berdasarkan bahasa JavaScript, kami juga dapat mengembangkan layanan back-end berkinerja tinggi. Saya bahkan telah melihat JavaScript muncul di bidang pemrograman perangkat keras. Javascript secara bertahap berkembang menjadi bahasa pengembangan serba.
Tapi tidak mudah untuk menggunakan JavaScript dengan baik. Selain menguasai sintaksisnya dan mengetahui cara menulis kode berkualitas tinggi, Anda juga perlu memahami cara menyelesaikan skenario kebutuhan yang akan ditemui di hampir setiap proyek, seperti: menilai tanggal, menyoroti teks, membatasi jumlah karakter, dll. Ada banyak perpustakaan yang akan membuat masalah ini, tetapi perpustakaan ini tidak dapat diciptakan untuk diselesaikan, ada banyak masalah, tetapi perpustakaan ini tidak dapat diselesaikan, tetapi tidak ada masalah, tetapi perpustakaan ini tidak dapat diselesaikan, tetapi tidak ada masalah, tetapi perpustakaan ini tidak dapat diciptakan untuk diselesaikan, ada masalah ini, tetapi perpustakaan ini tidak dapat diciptakan untuk diselesaikan, ada masalah yang tidak akan diselesaikan, tetapi perpustakaan ini tidak dapat diciptakan untuk diselesaikan, ada masalah untuk masalah ini, tetapi perpustakaan ini tidak dapat diciptakan untuk menjadi masalah, tetapi perpustakaan ini tidak dapat diselesaikan,. Sistem membengkak dan juga akan mempengaruhi kinerja sistem. Pendekatan saya adalah mengumpulkan dan menggunakan cuplikan JavaScript umum dan menggunakannya terlebih dahulu kapan pun diperlukan. Di bawah ini adalah 10 potong kode javascript praktis yang telah saya kumpulkan. Berdasarkan mereka, Anda juga dapat membuat plug-in JS yang lebih kuat atau fungsi fungsional.
1. Tentukan apakah tanggal tersebut valid
Fungsi tanggal yang termasuk dalam JavaScript masih terlalu sederhana, dan sulit untuk memenuhi kebutuhan parsing dan menilai format tanggal yang berbeda dalam proyek nyata. JQuery juga memiliki perpustakaan pihak ketiga untuk membuat pemrosesan terkait tanggal menjadi sederhana, tetapi kadang-kadang Anda mungkin hanya membutuhkan fungsi yang sangat sederhana tanpa memperkenalkan perpustakaan pihak ketiga yang besar. Pada saat ini, Anda dapat menggunakan kode verifikasi tanggal berikut, yang memungkinkan Anda untuk menyesuaikan format tanggal dan memverifikasi validitas tanggal tersebut.
function isValIddate (value, userFormat) {// atur format default jika format tidak disediakan userFormat = UserFormat || 'mm/dd/yyyy'; // Temukan pembatas kustom dengan mengecualikan // Bulan, Hari dan Tahun Karakter var Delimiter = /ht^mdy media/.exec(UserFormat)); // Buat array dengan bulan, hari dan tahun // jadi kita tahu urutan format dengan indeks var format = userformat.split (pembatas); // Buat array dari tanggal pengguna var thedate = value.split (pembatas); fungsi isDate (tanggal, format) {var m, d, y, i = 0, len = format.length, f; untuk (i; i <len; i ++) {f = format [i]; if (/m/.test(f)) m = tanggal [i]; if (/d/.test(f)) d = tanggal [i]; if (/y/.test(f)) y = tanggal [i]; } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // Periksa apakah ini hari yang valid di bulan d <= (tanggal baru (y, m, 0)). getDate ()); } return iSdate (Thedate, theFormat);}Bagaimana menggunakan:
Panggilan berikut mengembalikan False karena tidak ada 31 hari di bulan November
isValiddate ('dd-mm-yyyy', '31/11/2012 ')
2. Dapatkan lebar maksimum atau ketinggian satu set elemen
Fungsi berikut sangat berguna bagi pengembang yang perlu melakukan tata letak dinamis.
var getmaxHeight = function ($ elms) {var maxheight = 0; $ elms.each (function () {// Dalam beberapa kasus Anda mungkin ingin menggunakan outerHeight () sebagai gantinya var height = $ (this) .height (); if (height> maxheight) {maxheight = height;}}); return maxheight;};Bagaimana menggunakan:
$ (elemen) .height (getmaxheight ($ (elemen)));
3. Teks Sorot
Ada banyak perpustakaan pihak ketiga dari jQuery yang dapat mengimplementasikan fungsi menyoroti teks, tetapi saya lebih suka menggunakan sepotong kecil kode JavaScript berikut untuk mengimplementasikan fungsi ini. Ini sangat singkat dan dapat dimodifikasi secara fleksibel sesuai dengan kebutuhan saya, dan Anda dapat mendefinisikan gaya highlight sendiri. Dua fungsi berikut dapat membantu Anda membuat plugin penyorotan teks Anda sendiri.
sorotan fungsi (teks, kata, tag) {// tag default jika tidak ada tag disediakan tag = tag || 'menjangkau'; var i, len = words.length, re; untuk (i = 0; i <len; i ++) {// global regex untuk menyoroti semua kecocokan re = regexp baru (kata [i], 'g'); if (re.test (text)) {text = text.replace (re, '<' + tag + '> $ & </' + tag + '>'); }} mengembalikan teks;}Anda juga perlu fungsi yang tidak dicerminkan:
fungsi unhighlight (teks, tag) {// tag default jika tidak ada tag disediakan tag = tag || 'menjangkau'; var re = regexp baru ('(<'+tag+'.+?> | <//'+tag+'>)', 'g'); return text.replace (re, '');}Bagaimana menggunakan:
$ ('p'). html (sorot ($ ('p'). html (), // teks ['foo', 'bar', 'baz', 'halo dunia'], // daftar kata atau frasa untuk menyorot 'kuat' // tag khusus));4. Efek Gerakan Teks
Terkadang Anda ingin menambahkan gerakan ke paragraf teks Anda sehingga setiap kata dapat bergerak. Anda dapat menggunakan kode plug-in jQuery berikut untuk mencapai efek ini. Tentu saja Anda perlu menggabungkan gaya transisi CSS3 untuk mencapai hasil yang lebih baik.
$ .fn.animateText = function (delay, klass) {var text = this.text (); var letters = text.split (''); kembalikan this.each (function () {var $ this = $ (this); $ this.html (text.replace (/./ g, '<span> $ & </span>'); $ this.find ('span.leTter'). masing -masing (function (i, el) {setTimeout (function () {$). });Bagaimana menggunakan:
$ ('p'). animateText (15, 'foo');
5. Sembunyikan elemen satu per satu
Plug-in jQuery berikut dapat menyembunyikan sekelompok elemen satu per satu sesuai dengan panjang langkah (waktu interval) yang Anda atur. Digunakan dalam elemen daftar ulang dapat mencapai hasil yang baik.
$ .fn.fadeall = function (ops) {var o = $ .extend ({delay: 500, // Delay antara elemen kecepatan: 500, // kecepatan animasi kemudahan: 'swing' // lainnya memerlukan pelonggaran plugin}, ops); var $ el = ini; untuk (var i = 0, d = 0, l = $ el.length; i <l; i ++, d+= o.delay) {$ el.eq (i) .delay (d) .fadein (o.speed, o.ease); } return $ el;}Bagaimana menggunakan:
$ (elemen) .fadeall ({delay: 300, speed: 300});
6. Batasi jumlah kata dalam teks
Skrip di bawah ini memungkinkan Anda untuk mencegat teks sesuai dengan panjang karakter yang diberikan. Jika teks dicegat, secara otomatis akan diikuti oleh elipsis.
Function excerpt (str, nwords) {var words = str.split (''); words.splice (nwords, words.length-1); return words.join ('') + (words.length! == str.split ('') .length? '...': '');}7. Tentukan kemampuan beradaptasi saat ini dalam tata letak yang sesuai
Banyak desain telah mengadopsi tata letak responsif untuk beradaptasi dengan tampilan situs web atau aplikasi pada perangkat yang berbeda. Anda sering perlu menentukan adaptasi layar mana yang saat ini berada dalam kode.
function isBreakPoint (bp) {// breakpoint yang Anda atur di css var bps = [320, 480, 768, 1024]; var w = $ (window) .width (); Var Min, Max; untuk (var i = 0, l = bps.length; i <l; i ++) {if (bps [i] === bp) {min = bps [i-1] || 0; max = bps [i]; merusak; }} return w> min && w <= max;}Bagaimana menggunakan:
if (isBreakPoint (320)) {// breakpoint pada 320 atau kurang} if (isBreakPoint (480)) {// breakpoint antara 320 dan 480}…8. Hitungan Global
Dalam beberapa skenario permainan atau iklan, Anda perlu merekam berapa kali pengguna mengklik tombol pada halaman saat ini. Saat ini, Anda dapat menggunakan fungsi .data () jQuery untuk menanganinya:
$ (elemen) .data ('counter', 0) // Mulai penghitung di nol .click (function () {var counter = $ (this) .data ('counter'); // dapatkan $ (ini) .data ('counter', counter + 1); // set // lakukan sesuatu yang lain ...});9. Embed Youku Video
Function ebedoUaku (link, ops) {var o = $ .Extend ({width: 480, Height: 320, params: ''}, ops); var id = //?v/=(/w+)/.exec(link)1]; return '<embed aplefullscreen = "true" id = "embedId" kualitas = "tinggi" align = "tengah" memungkinkancriptaccess = "selalu" type = "application/x-shockwave-flash" src = "'+id+'?'+o.ops '";Bagaimana menggunakan:
EMBUDYOUKU ('http://static.youku.com/v/swf/qplayer.swf', {'wintype = adshow & videoids = xmte3nzq0ntky & isautoplay = false & isshowrelatedvideo = false'});10. Buat menu dinamis atau daftar tarik-turun
Dalam banyak skenario, kita perlu membuat menu, daftar drop-down, atau daftar item secara dinamis. Berikut ini adalah bagian dari kode paling dasar untuk mengimplementasikan fungsi -fungsi di atas, dan Anda dapat memperluasnya sesuai dengan kebutuhan aktual.
fungsi makeMenu (item, tag) {tag = tag || ['ul', 'li']; // tag default var parents = tag [0]; var anak = tag [1]; var item, value = ''; untuk (var i = 0, l = items.length; i <l; i ++) {item = item [i]; // terpisah item dan nilai jika nilai ada jika (/:/.test(item)) {item = item [i] .split (':') [0]; nilai = item [i] .split (':') [1]; } // Bungkus item dalam item tag [i] = '<'+child+''+(value && 'value = "'+value+'"')+'>'+// tambahkan nilai jika item hadir+'</'+anak+'>'; } return '<' + Parent + '>' + items.join ('') + '</' + Parent + '>';}Bagaimana menggunakan:
// dropdown Pilih Bulan Makemenu (['Januari: Jan', 'Februari: Feb', 'March: Mar'], // Item: Value ['Pilih', 'Opsi']); // Daftar GroceriesMakeMenu (['Wortel', 'Lettuce', 'Tomatos', 'Susu'], ['ol', 'Li');
Di atas hanyalah sebagian kecil dari cuplikan kode JavaScript praktis. Saya juga menyarankan Anda memperhatikan mengumpulkan atau menulis potongan kode dasar seperti itu sendiri. Mereka dapat digunakan dalam banyak proyek atau menyediakan fungsi yang lebih lengkap melalui beberapa modifikasi. Menggunakan cuplikan kode ini akan menghemat banyak waktu pengembangan.