7 fonctions JavaScript que les programmeurs Web doivent avoir

Il y a quelques années, tant que nous écrivons JavaScript, nous devons utiliser plusieurs fonctions couramment utilisées, telles qu'AdveventListener et attachEvent, qui ne sont pas pour les technologies et les fonctions avancées, mais juste quelques tâches de base, et la raison est causée par les différences entre divers navigateurs. Au fil du temps, la technologie s'améliore constamment, il existe encore des fonctions JavaScript qui sont essentielles pour presque tous les programmeurs Web, que ce soit pour les performances ou pour les fonctionnalités.

Déboucher la fonction qui empêche les appels à haute fréquence

Cette fonction de débouchement est une fonction de renforcement des performances essentielles pour ceux qui effectuent des tâches motivées par des événements. Si vous n'utilisez pas la fonction de réduction d'échelle lorsque vous utilisez un défilement, un redimensionnement, une clé * et d'autres événements pour déclencher des tâches, vous ferez une erreur majeure. La fonction de déboucage de la fréquence descendante suivante peut rendre votre code efficace:

 // Renvoie une fonction, que, tant qu'elle continue d'être invoquée, ne sera pas déclenchée. La fonction sera appelée une fois qu'elle a cessé d'être appelé pour // n millisecondes. Si «immédiat» est passé, déclenchez la fonction à la pointe //, au lieu de la fin. return function () {var context = this, args = arguments; var ultérieurement = fonction () {timeout = null; si (! immédiat) func.Apply (contexte, args); }; var callnow = immédiat &&! timeout; ClearTimeout (temps mort); timeout = setTimeout (plus tard, attendez); if (callnow) func.Apply (contexte, args); };}; // usageVar myEfficientFn = Debounce (function () {// toutes les choses taxantes que vous faites}, 250); window.addeventListener ('redimensi', myEfficientFn);

La fonction Débounce permet uniquement à la fonction de rappel que vous fournissez d'exécuter une fois dans un intervalle de temps donné, réduisant ainsi sa fréquence d'exécution. Ces restrictions sont particulièrement importantes lorsque des événements déclenchés à haute fréquence sont rencontrés.

Définir la fonction de détection du cycle de temps / de fréquence

La fonction de débouchement susmentionnée est déclenchée par l'aide d'un événement. Mais parfois, il n'y a pas un tel événement disponible, nous ne pouvons donc écrire une fonction nous-mêmes pour le vérifier de temps en temps.

 Poll de fonction (fn, rappel, err, timeout, interval) {var startTime = (new Date ()). getTime (); var pi = window.setinterval (function () {if (math.floor (((new Date) .getTime () - startTime) / 1000) <= timeout) {if (fn ()) {callback ();}} else {window.clearInterval (pi); err ();}}, interval)}

Une fois la fonction qui interdit les appels répétés et ne permet une exécution qu'une seule fois

Plusieurs fois, nous ne voulons pas que des actions ne soient exécutées qu'une seule fois, tout comme nous utilisons Onload pour la limiter à l'exécution d'une seule fois lorsque la charge est terminée. La fonction suivante permettra d'exécuter votre opération une fois et ne sera pas exécutée à plusieurs reprises.

 fonction une fois (fn, contexte) {var result; return function () {if (fn) {result = fn.Apply (contexte || this, arguments); fn = null; } Retour Résultat; };} // usagevar canonlyfireonce = une fois (function () {console.log ('tired!');}); CanonlyfireOnce (); // "Licencié!" canonlyfireonce (); // nada

Cette fonction une fois peut garantir que la fonction que vous fournissez n'est exécutée qu'une seule fois et empêcher l'exécution répétée.

Obtenez l'adresse absolue d'un lien getabsoluluteurl

Obtenir l'adresse absolue du lien n'est pas aussi simple que vous le pensez. Ce qui suit est une fonction très pratique qui peut obtenir l'adresse absolue en fonction de l'adresse relative que vous avez saisie:

 var getabsoluluteUrl = (function () {var a; return function (url) {if (! a) a = document.createelement ('a'); a.href = url; return a.href;};}) (); // usageGetAbsoluluteUrl ('/ quelque chose');

Ici, nous utilisons la tag href pour générer une URL absolue complète, qui est très fiable.

Déterminez si une fonction JavaScript est une fonction native du système est natable

De nombreux scripts JS tiers introduiront de nouvelles fonctions dans les variables globales, et certains écraseront même les fonctions natives du système. La méthode suivante consiste à vérifier s'il s'agit d'une fonction native:

 ; (function () {// utilisé pour résoudre le `[[class]]` de valeurs interne = objet.prototype.tostring; // utilisé pour résoudre la source décompilée de fonctions var fntostring = function.prototype.tostring; // utilisé pour détecter les constructeurs de l'hôte (safari> 4; vraiment typique +? Constructeur /] $ /; .replace (/ [. * +? ^ $ {} () | [/] ////] / g, '// $ &') // Remplacez les mentions de `toString` par`. *? `pour garder le modèle générique. .replace (/ toString | (fonction). *? (? = /// () | pour. +? (? = ///]) / g, '$ 1 *?') + '$'); Renative.Test (fntoString.call (valeur) // se replient à une vérification d'objet hôte parce que certains environnements représentent // des choses comme les matrices de DOM qui peuvent ne pas être conformes au modèle natif normal. isNative;} ()); // usageisnative (alert);

Bien que cette méthode ne soit pas si concise, elle peut toujours terminer la tâche!

Créer de nouvelles règles CSS avec JavaScript Insertrule

Parfois, nous utilisons un sélecteur CSS (tel que document.QuerySelectorall) pour obtenir un nodelist, puis modifier les styles à chacun d'eux à leur tour. En fait, ce n'est pas une approche efficace. Il s'agit d'une approche efficace pour créer une nouvelle règle de style CSS à l'aide de JavaScript:

 // Créer une meilleure feuille de feuille Feuille d'objet = (function () {// build style var style = document.CreateElement ('style'); style.setAttribute ('media', 'écran'); style.appendChild (document.CreateExtNode ('')); document.head.APPEndChild (style); // Build and Return une fonction de retour de fonction (règle) {Style.Sheet.Insertrule (Retour, une fonction de retour de fonction (règle) {Style. style.sheet.cssrules.length);};}) (); // appelle ensuite un FunctionSheet (". Stats {position: relative; top: 0px}");

Ces pratiques sont très efficaces. Dans certains scénarios, comme lorsque vous utilisez AJAX pour charger un nouveau HTML, vous n'avez pas besoin de faire fonctionner le contenu HTML nouvellement chargé.

Déterminez si les éléments de la page Web ont certains attributs et styles MatchSeSesector

 Fonction MatchSeSelector (El, sélecteur) {var p = élément.prototype; var f = p.matches || P.WebkitMatchSselector || P.MozMatchSselector || p.msmatchesselector || fonction (s) {return [] .Indexof.call (document.QuerySelectorAll (S), this)! == -1; }; return f.call (el, sélecteur);} // usageMatchSselector (document.getElementByid ('myDiv'), 'div.someselect

Ces 7 fonctions JavaScript sont tout ce que chaque programmeur Web doit savoir comment les utiliser.

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.