Ringkasan skrip JavaScript (1)_javascript yang biasa digunakan-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Ringkasan skrip JavaScript (1)_javascript yang biasa digunakan

May 16, 2016 pm 04:11 PM

javascript

Artikel ini terutamanya memperkenalkan artikel pertama dalam siri ringkasan skrip JavaScript biasa Apa yang saya akan kongsikan dengan anda ialah jquery mengehadkan kotak teks kepada nombor input sahaja, merangkum acara DOMContentLoaded, menggunakan JS asli untuk merangkum AJAX sahaja. , dan permintaan merentas domain JSONP, pemformatan keseribu, rakan yang memerlukan boleh merujuknya.

jquery mengehadkan kotak teks kepada nombor input sahaja

jquery mengehadkan kotak teks kepada nombor input sahaja, serasi dengan IE, chrome dan FF (kesan prestasi berbeza ), contoh kod Seperti berikut:

$("input").keyup(function(){ //keyup event processing
$(this).val($(this).val(). ganti(/D| ^0/g,''));
}).bind("tampal",fungsi(){ //CTR V pemprosesan acara
$(this).val($(this ).val() .replace(/D|^0/g,''));
}).css("ime-mode", "disabled"); //Kaedah input tetapan CSS tidak tersedia

Fungsi kod di atas ialah: hanya integer positif yang lebih besar daripada 0 boleh dimasukkan.

$("#rnumber").keyup(function(){
$(this).val($(this).val().replace(/[^0-9.]/ g,''));
}).bind("paste",function(){ //CTR V event processing
$(this).val($(this).val().replace( /[^0-9.]/g,''));
}).css("ime-mode", "disabled"); //kaedah input tetapan CSS tidak tersedia

Fungsi kod di atas ialah: hanya nombor dari 0-9 dan titik perpuluhan boleh dimasukkan.

Encapsulate DOMContentLoaded acara

//Simpan baris gilir acara domReady
eventQueue = [];
//Hakim sama ada DOM dimuatkan
isReady = false;
//Hakim sama ada DOMReady terikat
isBind = false;
/*Laksanakan domReady()
*
*@param {function}
*@execute Tolak pengendali acara ke dalam baris gilir acara dan ikat DOMContentLoaded
* * Jika DOM dimuatkan telah selesai, laksanakan serta-merta >                                                                                                                                                                                                                        🎜> *@execute Penyemak imbas moden mengikat DOMContentLoaded melalui addEvListener, termasuk ie9
ie6-8 menentukan sama ada DOM dimuatkan dengan menilai doScroll
*@ pemanggil domReady()
*/
fungsi bindReady (){
if (isReady) return;
if (isBind) return;
isBind = true;
if (window.addEventListener ) {
document.addEventListener('DOMContentLoaded' ,execFn , false);
}
else if (window.attachEvent) {
doScroll();
};
};
/*doScroll menentukan sama ada DOM ie6-8 dimuatkan Selesai
*
*@param null
*@execute doScroll untuk menentukan sama ada DOM dimuatkan
*@caller bindReady( )
*/
fungsi doScroll(){
cuba cuba {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     > *
* @param null
*@execute Gelung pengendali acara dalam baris gilir pelaksanaan
*@caller bindReady()
*/
function execFn(){
if (!isReady) {
isReady = true;
for (var i = 0; i < eventQueue.length; i ) {
eventQueue [i].call(window);
        };
                eventQueue = [] ;                                                             🎜> });
//fail js 2
dom sedia(fungsi(){}>
jika tidak dimuatkan tidak mengikat kaedah domReady, jika tidak fungsi Ia tidak akan dilaksanakan,
//Oleh kerana DOMContentLoaded telah dicetuskan sebelum js yang dimuatkan secara tak segerak dimuat turun, addEventListener tidak lagi boleh dipantau apabila ia dilaksanakan

Gunakan JS asli untuk hanya merangkum AJAX

Pertama, kita memerlukan objek xhr. Ini tidak sukar bagi kami, rangkumkan ia menjadi fungsi

/**
* Menambah pengendalian kegagalan permintaan Walaupun fungsi ini tidak begitu berguna, ia mengkaji perbezaan skrip dalam pelbagai pelayar
* 1, IE6/7/8 menyokong acara onreadystatechange skrip
* 2. IE9/10 menyokong acara onload dan onreadystatechange skrip
* 3. Firefox/Safari/Chrome/Opera menyokong acara onload skrip
* 4. IE6/7/8/Opera tidak menyokong acara onerror bagi skrip; IE9/10/Firefox/Safari/Chrome menyokong
* 5. Walaupun Opera tidak menyokong acara onreadystatechange, ia mempunyai atribut readyState
* 6. Gunakan IE9 dan IETester untuk menguji IE6/. 7/8 , readyState sentiasa dimuatkan, dimuatkan. Lengkap tidak pernah muncul.
*
* Idea pelaksanaan terakhir:
* 1. IE9/Firefox/Safari/Chrome menggunakan acara onload untuk panggilan balik yang berjaya dan menggunakan acara onerror untuk panggilan balik ralat
* 2. Opera juga menggunakan acara onload untuk panggilan balik yang berjaya (Ia sama sekali tidak menyokong onreadystatechange Memandangkan ia tidak menyokong onerror, pemprosesan tertunda digunakan di sini.
* Iaitu, menunggu dan kejayaan panggil balik kejayaan, bit bendera yang dilakukan ditetapkan kepada benar selepas kejayaan. Kegagalan tidak akan dilaksanakan, jika tidak, ia akan dilaksanakan.
* Nilai masa tunda di sini adalah sangat rumit Ia sebelum ini ditetapkan kepada 2 saat, dan ia tiada masalah apabila diuji di syarikat. Walau bagaimanapun, selepas menggunakan rangkaian wayarles 3G di rumah, saya mendapati bahawa walaupun fail js yang dirujuk wujud, disebabkan
* kelajuan rangkaian terlalu perlahan, kegagalan dilaksanakan dahulu dan kejayaan dilaksanakan kemudian. Jadi adalah lebih munasabah untuk mengambil masa 5 saat di sini. Sudah tentu ia tidak mutlak.
* 3, IE6/7/8 Panggilan balik kejayaan menggunakan acara onreadystatechange dan ralat panggil balik hampir sukar untuk dilaksanakan. Ia juga yang paling teknikal.
* Rujuk http://www.php.cn/
* Gunakan nextSibling dan mendapati ia tidak boleh dilaksanakan.
* Apa yang menjijikkan ialah fail sumber yang diminta pun tidak wujud. ReadStatenya juga akan melalui keadaan "dimuatkan". Dengan cara ini anda tidak dapat mengetahui sama ada permintaan itu berjaya atau gagal.
* Saya takut, jadi saya akhirnya menggunakan mekanisme penyelarasan bahagian depan dan belakang untuk menyelesaikan masalah terakhir. Biarkan ia memanggil panggilan balik(true) sama ada permintaan itu berjaya atau gagal.
* Pada masa ini, logik untuk membezakan kejayaan dan kegagalan telah diletakkan dalam panggilan balik Jika jsonp tidak dikembalikan di latar belakang, kegagalan dipanggil, jika tidak kejayaan dipanggil.
*
*
* Antara Muka
* Sjax.load(url, {
* data ) // Permintaan parameter (rentetan pasangan nilai kunci atau objek js)
* kejayaan / / Minta fungsi panggil balik kejayaan
* kegagalan // Minta fungsi panggil balik kegagalan
* skop // Konteks pelaksanaan fungsi panggil balik
* cap masa // Sama ada untuk menambah cap masa
* });
*
*/
Sjax =
fungsi(menang){
    var ie678 = !-[1,],
        opera = win.opera,
        doc = win.document,
        head = doc.getElementsByTagName('head')[0],
        tamat masa = 3000,
        done = false;
   ( fungsi _serialize = [], kunci, val;
        untuk (kunci masuk obj){
            val = obj[kunci];
            if(val.constructor == Array){
       ( var ){
       ,len=val.length;i<len;i ){
                    a.push(key '=' encodeURIComponent(val[i]));
                }<🎜                                                                                                            a.tolak (kunci '=' encodeURIComponent(val));
            }
         }
        return a.join('&');
    }
    permintaan fungsi (url,opt)>(url,opt) fungsi fn(){}
        var opt = opt || {},
        data = opt.data,
        kejayaan = opt.success || fn,
        kegagalan = opt.failure || fn,
        skop = opt.skop || menang,
cap waktu = opt.timestamp;
Jika(data && jenis data == 'objek'){
data = _serialize(data);
} }
skrip var = doc.createElement('skrip' ) ;
fungsi panggil balik(isSucc){
if(isSucc){
🎜>              selesai = benar; jsonp tidak kembali.' );
}
}lain{
kegagalan.panggilan(skop);
}
                              🎜>               skrip.onload = skrip tidak dibaca = 🎜 ;
jika ( head && script.parentNode){
head.removeChild(script); 🎜> function fixOnerror(){
setTimeout(function(){
if(!done){
callback();
}
}, tamat masa );
}
if(ie678){
script.onReadyStateChange = Function () {
var ReadyState = this.readyState; ! Selesai && (ReadyState == 'Dimuatkan' || ReadyState == { panggil balik (benar );
}
}
//fixOnerror();
}else{
Script.onload = function(){
           panggil balik(true);
                                                                              skrip.
                   skrip 🎜> jika(opera){
fixOnerror();
}
}
        jika(data){
            url = '?' data;
        }
         jika(cap masa){
            jika (data){
                url = '&ts=';<🎜                                                               url = '?ts='
            }
            url = (Tarikh baharu).getTime();
        }
        skrip.src = url;
                         skrip. 🎜> pulangkan {load:request};
}(this);

调用方式如下：

Sjax.load('jsonp66.js', {

kejayaan function(){alert(jsonp.name)},

failure : function(){alert('error');}

});

千分位格式化

fungsi kepadaRibuan(bilangan) { var num = (bilangan || 0).toString(), hasil = ''; manakala (bilangan panjang > 3) {

hasil = ',' num.slice(-3) hasil;

        num = num.slice(0, num.length - 3 );
    }
    jika (bilangan) { hasil = bilangan hasil; }
    pulangan hasil;
}

以上就是本文给大家分享的javascript常用脚本了，希望大墳。

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn