Zusammenfassung häufig verwendeter JavaScript-Skripte (1)_Javascript-Kenntnisse

Dieser Artikel stellt hauptsächlich den ersten Artikel in der Reihe der Zusammenfassungen gängiger JavaScript-Skripte vor. Was ich mit Ihnen teilen werde, ist, dass JQuery das Textfeld nur auf die Eingabe von Zahlen beschränkt, das DOMContentLoaded-Ereignis kapselt und natives JS verwendet, um einfach AJAX zu kapseln , und domänenübergreifende Anfragen, tausendste Formatierung, Freunde in Not können sich darauf beziehen.

jquery beschränkt das Textfeld nur auf die Eingabe von Zahlen

jquery beschränkt das Textfeld nur auf die Eingabe von Zahlen, kompatibel mit IE, Chrome und FF (die Auswirkungen auf die Leistung sind unterschiedlich). ), Beispielcode wie folgt:

$("input").keyup(function(){ //keyup-Ereignisverarbeitung
$(this).val($(this).val(). replace(/D| ^0/g,''));
}).bind("paste",function(){ //CTR V-Ereignisverarbeitung
$(this).val($(this ).val() .replace(/D|^0/g,''));
}).css("ime-mode", "disabled"); //CSS-Eingabemethode ist nicht verfügbar

Die Funktion des obigen Codes ist: Es können nur positive ganze Zahlen größer als 0 eingegeben werden.

$("#rnumber").keyup(function(){
$(this).val($(this).val().replace(/[^0-9.]/ g,''));
}).bind("paste",function(){ //CTR V-Ereignisverarbeitung
$(this).val($(this).val().replace( /[^0-9.]/g,'')); 
 }).css("ime-mode", "disabled"); //CSS-Eingabemethode ist nicht verfügbar

Die Funktion des obigen Codes ist: Es können nur Zahlen von 0-9 und Dezimalstellen eingegeben werden.

DOMContentLoaded-Ereignis einkapseln

//Speichern Sie die Ereigniswarteschlange von domReady
eventQueue = [];
//Beurteilen Sie, ob das DOM geladen ist
isReady = false;
//Beurteilen Sie, ob das DOMReady gebunden ist
isBind = false;
/*Execute domReady()
*
*@param {function}
*@execute Schieben Sie den Ereignishandler in die Ereigniswarteschlange und binden Sie DOMContentLoaded
* * If Das geladene DOM wurde abgeschlossen. Sofort ausführen >                                                                                                     *@param null
*@execute Moderne Browser binden DOMContentLoaded über addEvListener, einschließlich ie9
ie6-8 bestimmt, ob das DOM geladen ist, indem es doScroll beurteilt
*@ Aufrufer domReady()
*/
function bindReady (){
if (isReady) return;
if (isBind) return;
isBind = true;
if (window.addEventListener ) {
document.addEventListener('DOMContentLoaded' ,execFn , false);
}
else if (window.attachEvent) {
doScroll();
};
};
/*doScroll ermittelt, ob das DOM von ie6-8 geladen ist. Abgeschlossen
*
*@param null
*@execute doScroll, um festzustellen, ob das DOM geladen ist
*@caller bindReady( )
*/
function doScroll(){
try try {
                                                                                                                                                                                                                                        . execFn();
};
/*Ereigniswarteschlange ausführen
*
* @param null
*@execute Schleife des Ereignishandlers in der Ausführungswarteschlange
*@caller bindReady()
*/
function execFn(){
if (!isReady) {
isReady = true;
for (var i = 0; i < eventQueue.length; i ) {
eventQueue [i].call(window);
        };
                eventQueue = [] ;                           Fertige Methode, andernfalls die Funktion Es wird nicht ausgeführt,
//Da DOMContentLoaded ausgelöst wurde, bevor das asynchron geladene js heruntergeladen wurde, kann addEventListener bei seiner Ausführung nicht mehr überwacht werden



Verwenden natives JS, um AJAX einfach zu kapseln


Zuerst benötigen wir das xhr-Objekt. Das ist für uns nicht schwer, kapseln Sie es in eine Funktion

var createAjax = function() {
var xhr = null;
try {
} Catch (e1) {
Try {
// Nicht-IE-Browser
xhr = new xmlhttprequest ();
} Catch (e2) {
Window.alert („Ihr Browser unterstützt Ajax nicht, bitte ändern!“);
}
}
return xhr;
};


Dann schreiben wir die Kernfunktion.

var ajax = function(conf) {
// Initialisierung
//Typparameter, optional
var type = conf.type;
//URL-Parameter, erforderlich
var url = conf.url;
//Datenparameter ist optional, nur in Post-Anfrage erforderlich
var data = conf.data;
//Datentypparameter ist optional
var dataType = conf dataType;
//Die Rückruffunktion ist optional
var success = conf.success;
if (type == null){
//Der Typparameter ist optional, der Standardwert ist get
type = "get";
}
if (dataType == null){
Ajax-Engine-Objekt erstellen
var xhr = createAjax();
// Öffnen
xhr.open(type , url, true);
// Senden
if (type == "GET " || type == "get") {
                                                ("content-type",
"application/x -www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status = = 200) {
if(dataType == "text"||dataType=="TEXT") {
if (success != null){
                                                                                                                                     ==="XML") {
!=. null){
                                                                            (dataType=="json"||dataType=="J SON") {
               if (success != null){
                                                                                                                                                                                                                                   > };
};
url:"test.jsp",
data:"name=dipoo&info=good",
dataType:"json",
success:function(data) {
warning(data. name);
}
});



JSONP für domänenübergreifende Anfragen

/**
* Behandlung von Anforderungsfehlern hinzugefügt, obwohl diese Funktion nicht sehr nützlich ist, untersucht sie die Unterschiede von Skripten in verschiedenen Browsern
* 1, IE6/7/8 unterstützt das onreadystatechange-Ereignis von Skripten
* 2. IE9/10 unterstützt die Ereignisse onload und onreadystatechange von script
* 3. Firefox/Safari/Chrome/Opera unterstützt das Ereignis onload von script
* 4. IE6/7/8/Opera unterstützt das Ereignis onerror von nicht Skript; IE9/10/Firefox/Safari/Chrome unterstützt
* 5. Obwohl Opera das Ereignis onreadystatechange nicht unterstützt, verfügt es über das Attribut readyState. Das ist erstaunlich
* 6. Verwenden Sie IE9 und IETester, um IE6/ zu testen. 7/8, sein readyState wird immer geladen, geladen. Komplett erschien nie.
*
* Die endgültige Implementierungsidee:
* 1. IE9/Firefox/Safari/Chrome verwendet das onload-Ereignis für erfolgreiche Rückrufe und das onerror-Ereignis für Fehlerrückrufe
* 2. Opera auch verwendet das Onload-Ereignis für erfolgreiche Rückrufe (es unterstützt überhaupt nicht onreadystatechange, da es onerror nicht unterstützt, wird hier eine verzögerte Verarbeitung verwendet).
* Das heißt, beim Warten auf Erfolg und Erfolg des Rückrufs wird das Flag-Bit „Fertig“ nach Erfolg auf „True“ gesetzt. Fehler wird nicht ausgeführt, andernfalls wird es ausgeführt.
* Der Wert der Verzögerungszeit ist hier sehr heikel. Sie war bisher auf 2 Sekunden eingestellt und stellte beim Test im Unternehmen kein Problem dar. Nachdem ich jedoch das drahtlose 3G-Netzwerk zu Hause verwendet hatte, stellte ich fest, dass, obwohl die referenzierte js-Datei vorhanden war, aufgrund der zu langsamen Netzwerkgeschwindigkeit
* zuerst ein Fehler und später ein Erfolg ausgeführt wurde. Deshalb ist es hier sinnvoller, sich 5 Sekunden Zeit zu nehmen. Natürlich ist es nicht absolut.
* 3, IE6/7/8 Der Erfolgsrückruf verwendet das Ereignis onreadystatechange, und der Fehlerrückruf ist fast schwer zu implementieren. Es ist auch das technischste.
* Siehe http://www.php.cn/
* Verwenden Sie nextSibling und stellen Sie fest, dass es nicht implementiert werden kann.
* Das Ekelhafte ist, dass nicht einmal die angeforderte Ressourcendatei existiert. Sein readyState durchläuft auch den „geladenen“ Zustand. Auf diese Weise können Sie nicht erkennen, ob die Anfrage erfolgreich war oder fehlgeschlagen ist.
* Ich hatte Angst davor und habe schließlich den Front-End- und Back-End-Koordinationsmechanismus verwendet, um das letzte Problem zu lösen. Lassen Sie es callback(true) aufrufen, unabhängig davon, ob die Anfrage erfolgreich ist oder fehlschlägt.
* Zu diesem Zeitpunkt wurde die Logik zur Unterscheidung von Erfolg und Misserfolg in den Rückruf eingefügt. Wenn JSONP nicht im Hintergrund zurückgegeben wird, wird ein Fehler aufgerufen, andernfalls wird ein Erfolg aufgerufen.
*
*
* Schnittstelle
* Sjax.load(url, {
* data ) // Parameter anfordern (Schlüssel-Wert-Paarzeichenfolge oder JS-Objekt)
* Erfolg / / Rückruffunktion bei Erfolg anfordern
* Fehler // Rückruffunktion bei Fehler bei Anforderung
* Bereich // Ausführungskontext der Rückruffunktion
* Zeitstempel // Ob Zeitstempel hinzugefügt werden soll
* });
*
*/
Sjax =
function(win){
    var ie678 = !-[1,],
        opera = win.opera,
        doc = win.document,
        head = doc.getElementsByTagName('head')[0],
        timeout = 3000,
        done = false;
    function _serialize(obj){
        var a = [], key, val;
        for(key in obj){
            val = obj[key];
            if(val.constructor == Array){
                for(var i=0 ,len=val.length;i                   a.push(key '=' encodeURIComponent(val[i]));
               }
           . }else{
               a.push (key '=' encodeURIComponent(val));
                    var opt = opt || {},
        data = opt.data,
        success = opt.success || fn,
        failed = opt.failure || fn,
        Scope = opt.scope || gewinnen,
timestamp = opt.timestamp;
If(data && typeof data == 'object'){
data = _serialize(data);
} }
var script = doc.createElement('script' ). : jsonp ist nicht zurückgekehrt.' );
}
}else{
fail.call(scope);
}
                             🎜> wenn ( head && script.parentNode){
head.removeChild(script); 🎜> function fixOnerror(){
setTimeout(function(){
if(!done){
callback();
}
}, timeout );
}
if(ie678){
script.onReadyStateChange = Function () {
var ReadyState = this.readyState; ! Fertig && (ReadyState == 'Loaded' || ReadyState == { callback (true );
}
}
//fixOnerror();
}else{
Script.onload = function(){
           callback(true);
                                      > script.onerror = function(){
callback();
if(Oper){
fixOnerror();
}
}
        if(data){
            url = '?' data;
        }
        if(timestamp){
            if(data){
               url = '&ts=';
           . }else{
                url = '?ts='
}
url = (neues Datum) .getTime ();
}
script.src = url; return {load:request};
}(this);


调用方式如下：

 Sjax.load('jsonp66.js', {

        success : function(){alert(jsonp.name)},

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

  }); 



千分位格式化

function toThousands(num) {    var num = (num || 0).toString(), Ergebnis = '';

    while (num.length > 3) {

        result = ',' num.slice(-3) result;
        num = num.slice(0, num.length - 3 );
    }
    if (num) { result = num result; }
Rückgabeergebnis;
}


以上就是本文给大家分享的 JavaScript 常用脚本了 ， 希望大家能够喜欢。