Maison > interface Web > js tutoriel > Explication détaillée du rôle de l'ajout de symboles avant les fonctions js

Explication détaillée du rôle de l'ajout de symboles avant les fonctions js

韦小宝
Libérer: 2018-03-12 10:03:47
original
2356 Les gens l'ont consulté

Lorsque vous regardez certains plug-ins jquery, vous pouvez souvent voir des points-virgules, des points d'exclamation, etc. ajoutés avant les fonctions js. Je pense que de nombreux étudiants ne comprennent pas la fonction d'ajouter ce symbole. pour l'ajouter ? Eh bien, parlons en détail aujourd'hui du rôle de l'ajout de symboles avant les fonctions js !

Le rôle de l'ajout de points-virgules et de points d'exclamation avant les fonctions js

Que signifie le symbole avant la fonction js ? A quoi ça sert ?

Généralement, l'écriture dans le plug-in JQuery est comme ça

(function($) {         
  //...  
})(jQuery);
Copier après la connexion
Copier après la connexion

Aujourd'hui, j'ai vu le composant javascript de bootstrap s'écrit comme ça

!function( $ ){
  //...
}( window.jQuery );
Copier après la connexion

Pourquoi faut-il ajouter un "!" devant ?

Nous savons tous qu'il existe deux façons de déclarer des fonctions

function fnA(){alert('msg');}//声明式定义函数
var fnB = function(){alert('msg');}//函数赋值表达式定义函数
Copier après la connexion

Les deux fonctions qui sont apparues dans la question de l'éditeur sont toutes deux fonctions anonymes. Normalement, la façon dont nous appelons une méthode est FunctionName()

Cependant, si nous essayons d'ajouter () à la fin d'une "define function", l'analyseur ne peut pas la comprendre.

function msg(){
  alert('message');
}();//解析器是无法理解的
Copier après la connexion

La méthode d'appel de la fonction définie doit être msg();

Si vous enveloppez le corps de la fonction avec (), elle peut s'exécuter et l'analyseur ne signalera pas d'erreur, tels que :

(function($) {         
  //...  
})(jQuery);
Copier après la connexion
Copier après la connexion

Alors pourquoi est-il acceptable d'envelopper le corps de la fonction avec () ?

Il s'avère que si vous utilisez des parenthèses pour envelopper le corps de la fonction définie, l'analyseur appellera la fonction définie sous la forme d'expression de fonction. En d’autres termes, toute méthode capable de transformer une fonction en expression de fonction peut permettre à l’analyseur d’appeler correctement la fonction définie.

Et ! en fait partie, et + - || ont tous de telles fonctions.

De plus, l'utilisation de ! peut être davantage une question d'habitude. Différents opérateurs ont des performances différentes.

consiste simplement à omettre un caractère...

// 这么写会报错,因为这是一个函数定义:
function() {}()
// 常见的(多了一对括号),调用匿名函数:
(function() {})()
// 但在前面加上一个布尔运算符(只多了一个感叹号),就是表达式了,将执行后面的代码,也就合法实现调用
!function() {}()
Copier après la connexion

peut également être précédé d'un opérateur unaire tel que ~+-. . En fait, il existe plusieurs conformités qui peuvent garantir que la fonction anonyme sera exécutée immédiatement après sa déclaration

var hi = function(){
 alert("hi") 
};
hi();
Copier après la connexion

est égale à...

(function(){
 alert("hi")
 })
();
Copier après la connexion

. !, + et () sont les mêmes. L'effet peut être modifié en

!function(){
 alert("hi")
}
();
Copier après la connexion

Il enregistre un caractère que (), ou il est meilleur que ()

Nous savons tous que le point-virgule doit être au début Séparez le code, js peut utiliser des sauts de ligne pour séparer le code, mais après avoir fusionné et compressé plusieurs fichiers js, les sauts de ligne sont généralement supprimés, donc des erreurs peuvent survenir lors de la connexion ensemble, l’ajout d’un point-virgule est sûr. Les points d'exclamation que vous voyez se trouvent généralement dans des fichiers js compressés, car lorsque des fonctions anonymes sont appelées, nous utilisons généralement le formulaire : (function(){})() , mais vous pouvez également utiliser un autre formulaire : !function(){}() Le signe ! précédent peut être remplacé par des opérateurs unaires tels que -+~, économisant ainsi 1 octet.

Autres articles recommandés :

Analyse de l'utilisation des liaisons de fonctions JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal