Avec l'évolution des temps, de plus en plus d'excellents frameworks sont apparus dans le camp JavaScript, ce qui simplifie grandement notre travail de développement. Lorsque nous utilisons ces frameworks, devons-nous également réfléchir à leurs origines et à la façon dont ils sont construits ? Si vous ne vous contentez pas d'utiliser des API toutes faites, mais que vous avez une compréhension approfondie de leurs mécanismes de mise en œuvre internes (selon quelqu'un, les API sont les éléments qui se déprécient le plus rapidement), le meilleur moyen est de lire leur code source. que vous puissiez le lire.
J'ai étudié le code source de jQuery au cours des deux derniers jours et je partagerai ici certaines de mes connaissances superficielles. Veuillez me corriger si je suis inapproprié. Bon, regardons comment fonctionne jQuery. Je suppose que vous avez déjà quelques connaissances de base en JavaScript. Si les bases ne suffisent pas, je vous recommande de lire les deux livres "JavaScript Advanced Programming" et "Comprendre JavaScript". Cet article ne convient pas aux amis qui ne comprennent pas les concepts tels que les classes, les objets, les fonctions, les prototypes, etc. en js.
Commençons par le tout début :
Construisez d’abord un objet pour l’utilisateur, en supposant que notre framework s’appelle Shaka (mon nom ;) )
var Shaka = function(){}; Ici, nous créons une fonction vide sans rien dedans. Cette fonction est en fait notre constructeur. Pour que l'objet que nous générons appelle les méthodes définies dans le prototype, nous devons ajouter quelques méthodes à Shaka en utilisant le prototype (considérez Shaka comme une classe), nous définissons donc :
Shaka.fn = Shaka.prototype = {};
Shaka.fn est ici équivalent à l'alias de Shaka.prototype pour une utilisation future. Ils pointent vers la même référence.
OK, ajoutons une méthode sayHello et ajoutons un paramètre à Shaka, pour que l'apparence la plus basique de ce framework soit déjà là. S'il est vivant, il a maintenant 1 an. Regardez le code :
Boîte de code d'exécution
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]
D'accord, ne vous énervez pas. Nous avons remarqué qu'il existe quelques différences dans l'utilisation de ce framework et de jQuery. Par exemple, en jq, nous pouvons écrire comme ceci :
jQuery('#monid').someMethod();
Comment cela se fait-il, c'est-à-dire que le constructeur jQuery() renvoie une instance d'objet jQuery, afin que nous puissions appeler sa méthode dessus, donc le constructeur de Shaka devrait renvoyer une instance, et elle devrait ressembler à ceci :
var Shaka = function(){ return //Renvoie l'instance de Shaka };
Alors, comment obtenir une instance de Shaka ? Examinons d'abord l'utilisation d'un prototype pour simuler une classe. var someObj = new MyClass(); À ce stade, nous créons un nouvel objet someObje et utilisons le nouvel objet comme pointeur. la fonction MyClass, qui est le constructeur de la classe, puis someObj obtient les méthodes définies dans MyClass.prototype. Le pointeur this dans ces méthodes fait référence à l'instance d'objet actuelle.