Résumé des scripts JavaScript couramment utilisés (1)_compétences Javascript-js tutoriel-php.cn

Cet article présente principalement le premier article de la série de résumés des scripts JavaScript courants. Ce que je vais partager avec vous, c'est que jquery restreint la zone de texte à la saisie uniquement de nombres, encapsule l'événement DOMContentLoaded, utilise JS natif pour encapsuler simplement AJAX. , et les requêtes inter-domaines, JSONP, millième formatage, les amis dans le besoin peuvent s'y référer.

jquery restreint la zone de texte à la saisie uniquement des nombres

jquery restreint la zone de texte à la saisie uniquement des nombres, compatible avec IE, Chrome et FF (les effets de performances sont différents ), exemple de code comme suit :

$("input").keyup(function(){ //traitement des événements keyup
$(this).val($(this).val(). replace(/D| ^0/g,''));
}).bind("paste",function(){ //Traitement des événements CTR V
$(this).val($(this .val() .replace(/D|^0/g,''));
}).css("ime-mode", "disabled"); //La méthode de saisie des paramètres CSS n'est pas disponible

La fonction du code ci-dessus est la suivante : seuls les entiers positifs supérieurs à 0 peuvent être saisis.

$("#rnumber").keyup(function(){
$(this).val($(this).val().replace(/[^0-9.]/ g,''));
}).bind("paste",function(){ //Traitement des événements CTR V
$(this).val($(this).val().replace( /[^0-9.]/g,''));
}).css("ime-mode", "disabled"); //La méthode de saisie des paramètres CSS n'est pas disponible

La fonction du code ci-dessus est la suivante : seuls les chiffres de 0 à 9 et les points décimaux peuvent être saisis.

Encapsuler l'événement DOMContentLoaded

//Enregistrez la file d'attente des événements de domReady
eventQueue = [];
//Juge si le DOM est chargé
isReady = false;
//Juge si le DOMReady est lié
isBind = false;
/*Execute domReady()
*
*@param {function}
*@execute Poussez le gestionnaire d'événements dans la file d'attente des événements et liez DOMContentLoaded
* * If le DOM est chargé est terminé, exécutez-le immédiatement >                                                                                                  *@param null *@execute Les navigateurs modernes lient DOMContentLoaded via addEvListener, y compris ie9
ie6-8 détermine si le DOM est chargé en jugeant doScroll
*@ appelant 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 détermine si le DOM de ie6-8 est chargé Completed
*
*@param null
*@execute doScroll pour déterminer si le DOM est chargé
*@caller bindReady( )
*/
function doScroll(){
try try {
                                                                                                                                                                                                                                                                                              . execFn();
/*Exécuter la file d'attente des événements
*
* @param null
*@execute Boucle le gestionnaire d'événements dans la file d'attente d'exécution
*@caller bindReady()
*/
function execFn(){
if (!isReady) {
isReady = true;
for (var i = 0; i < eventQueue.length; i ) {
eventQueue [i].call(window);
        };
                 eventQueue = [] ;                                                    });
//fichier js 2
domReady(function(){
});
//Remarque : s'il est chargé de manière asynchrone, ne liez pas le dom Méthode prête, sinon la fonction Il ne sera pas exécuté,
//Parce que DOMContentLoaded a été déclenché avant le téléchargement du js chargé de manière asynchrone, addEventListener ne peut plus être surveillé lorsqu'il est exécuté

Utiliser JS natif pour encapsuler simplement AJAX

Tout d'abord, nous avons besoin de l'objet xhr. Ce n'est pas difficile pour nous, encapsulez-le dans une fonction

/**
* Ajout de la gestion des échecs de requête. Bien que cette fonction ne soit pas très utile, elle étudie les différences de scripts dans différents navigateurs
* 1, IE6/7/8 prend en charge l'événement onreadystatechange du script
* 2. IE9/10 prend en charge les événements onload et onreadystatechange du script
* 3. Firefox/Safari/Chrome/Opera prend en charge l'événement onload du script
* 4. IE6/7/8/Opera ne prend pas en charge l'événement onerror de script ; IE9/10/Firefox/Safari/Chrome prend en charge
* 5. Bien qu'Opera ne prenne pas en charge l'événement onreadystatechange, il possède l'attribut readyState
* 6. Utilisez IE9 et IETester pour tester IE6/. 7/8, son readyState est toujours en cours de chargement, chargé. Complete n'est jamais apparu.
*
* L'idée finale d'implémentation :
* 1. IE9/Firefox/Safari/Chrome utilise l'événement onload pour les rappels réussis et utilise l'événement onerror pour les rappels d'erreur
* 2. Opera également utilise l'événement onload pour les rappels réussis (il ne prend pas du tout en charge onreadystatechange). Puisqu'il ne prend pas en charge onerror, un traitement retardé est utilisé ici.
* Autrement dit, en attendant et en cas de rappel réussi, le bit d'indicateur terminé est défini sur vrai après le succès. L'échec ne sera pas exécuté, sinon il sera exécuté.
* La valeur du temps de retard ici est très délicate. Elle était auparavant réglée à 2 secondes, et cela ne posait aucun problème lors des tests en entreprise. Cependant, après avoir utilisé le réseau sans fil 3G à la maison, j'ai découvert que même si le fichier js référencé existait, en raison de
* la vitesse du réseau était trop lente, l'échec était exécuté en premier et le succès était exécuté plus tard. Il est donc plus raisonnable de prendre 5 secondes ici. Bien sûr, ce n'est pas absolu.
* 3, IE6/7/8 Le rappel de réussite utilise l'événement onreadystatechange, et le rappel d'erreur est presque difficile à implémenter. C'est aussi le plus technique.
* Reportez-vous à //m.sbmmt.com/
* Utilisez nextSibling et constatez qu'il ne peut pas être implémenté.
*Ce qui est dégoûtant, c'est que même le fichier de ressources demandé n'existe pas. Son readyState passera également par l'état "chargé". De cette façon, vous ne pouvez pas savoir si la requête a réussi ou échoué.
* J'en avais peur, alors j'ai finalement utilisé le mécanisme de coordination front-end et back-end pour résoudre le dernier problème. Laissez-le appeler callback(true) si la demande réussit ou échoue.
* À l'heure actuelle, la logique permettant de distinguer le succès et l'échec a été placée dans le rappel. Si jsonp n'est pas renvoyé en arrière-plan, l'échec est appelé, sinon le succès est appelé.
*
*
* Interface
* Sjax.load(url, {
* data ) // Paramètres de requête (chaîne de paire clé-valeur ou objet js)
* succès / / Fonction de rappel de réussite de la demande
* échec // Fonction de rappel d'échec de la demande
* portée // Contexte d'exécution de la fonction de rappel
* horodatage // Faut-il ajouter un horodatage
* });
*
*/
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 = [], clé, val;
        for(clé dans obj){
            val = obj[clé];
            if(val.constructor == Array){
                 for(var i=0 ,len=val.length;i                    a.push(key '=' encodeURIComponent(val[i]));
                }
            }else{
                a.push (key '=' encodeURIComponent(val));
            }
        }
        return a.join('&');
    }
    function request(url,opt){
function fn(){}
        var opt = opt || {},
        data = opt.data,
        success = opt.success || fn,
        échec = opt.failure || fn,
        scope = opt.scope || gagner,
timestamp = opt.timestamp;
If(data && typeof data == 'object'){
data = _serialize(data);
} }
var script = doc.createElement('script' ) ;
function callback(isSucc){
if(isSucc){
🎜>              done = true
                                                //alert('avertissement : jsonp n'est pas revenu.' );
}
}else{
échec.call(scope);
}
                            🎜>                script.onload = script.onerror = script.onreadystatechange = null;
jsonp = undefined;
si ( head && script.parentNode){
head.removeChild(script); 🎜> function fixOnerror(){
setTimeout(function(){
if(!done){
callback();
}
}, délai d'attente );
}
if(ie678){
script.onReadyStateChange = Function () {
var ReadyState = this.readyState;
IF ( ! Terminé && (ReadyState == 'Loadeded' || ReadyState == { callback (true );
}
}
//fixOnerror();
}else{
Script.onload = function(){
           callback(true);
                                                 > script.onerror = function(){
callback();
ante > si(opéra){
fixOnerror();
}
}
        if(data){
            url = '?' data;
        }
        if(horodatage){
            if(data){
                url = '&ts=';
            }else{
                url = '?ts='
> return {load:request};
}(this);

调用方式如下：

Sjax.load('jsonp66.js', {
        succès : function(){alert(jsonp.name)},
        échec : function(){alert('error');}