1. La maîtrise de l'interface
Une bonne interface est fluide et facile à comprendre, et il reflète principalement les aspects suivants:
1. Simple
Pour faire fonctionner l'attribut CSS d'un certain élément, ce qui suit est la méthode native:
document.QuerySelectorall ('# id'). style.color = 'red';Après l'emballage
fonction a (sélecteur, couleur) {document.QuerySelectorAll (sélecteur) []. style.color = couleur} a ('# a', 'rouge');Depuis une longue ligne avec des dizaines de lettres à un appel de fonction simple, l'API est simple et facile à utiliser
2. LIBIBILITÉ
A ('# A', 'Red') est une bonne fonction qui nous aide à changer un élément simplement et pratiquement, mais le problème est que si vous utilisez la fonction, le changement pour la première fois, il sera plus confus. Personne ne lui dira ce qu'est la fonction A. Il est nécessaire de savoir une chose au sujet du développement de l'interface: les gens sont paresseux. Du point de vue de la fonction d'attribution des couleurs, bien que moins de code soit écrit, il augmente le coût de la mémoire. Chaque fois que vous faites cela, vous devez avoir une relation de cartographie. A ----> Couleur. S'il s'agit de quelques simples, cela n'a pas d'importance, mais généralement un ensemble de cadres a des dizaines, voire des centaines d'API, et l'augmentation des coûts de cartographie entraînera l'effondrement du programmeur. Ce dont nous avons besoin, c'est de rendre l'interface significative. Réécrivons la fonction A:
Fonction LetsomeElementChangeColor (sélecteur, couleur) {document.QuerySelectorAll (sélecteur, couleur);}LetsomeElementChangeColor reçoit un sens linguistique par rapport à A, et quiconque connaîtra sa signification.
3. Réduire les coûts de mémoire
La fonction que nous venons maintenant est aussi comme ça. C'est trop long. Bien que LetsomeElementChangeColor réduit le coût de cartographie, il augmente le coût de la mémoire. Vous devez savoir que personne, y compris les maîtres académiques, n'aime être verbalement. Les API qui obtiennent nativement DOM ont également ce problème Document.GetElementsByClassName; document.getElementsByName; document.QuerySelectorall; Ces API donnent aux gens le sentiment que les mots sont trop longs. Bien que la signification qu'ils donnent soit très claire, cette approche est basée sur la simplicité de la simplicité. Nous réécrivons donc à nouveau cette fonction précédente
fonction setColor (sélecteur, couleur) {xxxxxxxxxxxxx}Réduisez le nom de la fonction sans modifications significatives. Rendez-vous facile à lire, à vous souvenir et à utiliser;
4.
La soi-disant extension signifie que l'utilisation des fonctions est exécutée dans l'ordre d'écriture comme l'eau qui coule pour former une chaîne d'exécution:
document.getElementById ('id'). style.color = 'red'; document.getElementById ('id'). style.fontize = 'px'; document.getElementById ('id'). style.backgourdcolor = 'Pink';La méthode précédente que nous avons utilisée était de résumer les deux fonctions setFontsize, SetBackgroundColor à nouveau; puis les exécuter setColor ('id', 'rouge'); setFontSiez ('id', '12px'); SetBackgroundColor ('id', 'rose'); De toute évidence, cette approche n'est pas paresseuse d'aller au-delà du royaume; L'élément d'identification doit être réapprovisionné à chaque fois, affectant les performances et échoue; Chaque fois qu'il doit ajouter de nouvelles méthodes, échouer, ces méthodes sont toujours appelées à chaque fois ou échouant. Ci-dessous, nous l'avons réécrit en une fonction étendue. Tout d'abord, encapsulez la méthode ID d'obtention dans un objet, puis renvoyez cet objet dans chaque méthode de l'objet:
fonction getElement (sélecteur) {this.style = document.QuerySeleCotRall (Selector) .Style;} getElement.prototype.color = function (colore) {this.style.color = colore; return this;} getElement.prototype.background = function (bg) {this.style.backgroundcolor = return; this;} getElement.prototype.fontize = function (size) {this.style.fontize = size; renvoie ceci;} // appel var el = new GetElement ('# id') el.color ('red'). background ('Pink'). FonTSize ('px');Simple, lisse et facile à lire plus tard, nous parlerons de la façon de continuer à optimiser dans les paramètres. Par conséquent, tout le monde préfère utiliser l'API JQuery. Bien qu'un symbole $ ne représente aucune signification pratique, un symbole simple est bénéfique pour notre utilisation. Il incarne les principes ci-dessus: simple, facile à lire, facile à retenir, écriture en chaîne et traitement multi-paramètres.
Nightware:
document.getElementById ('id'). style.color = 'red'; document.getElementById ('id'). style.fontize = 'px'; document.getElementById ('id'). style.backgourdcolor = 'Pink';rêve:
$ ('id'). CSS ({Color: 'Red', Fontize: '12px', BackgroundColor: 'Pink'})2. Cohérence
1. Cohérence de l'interface
Les interfaces pertinentes maintiennent un style cohérent. Un ensemble complet d'API réduira considérablement l'adaptabilité du développeur à de nouveaux outils si elle transmet un sentiment de familiarité et de confort. Nommer cette chose: à la fois court et auto-déception, et surtout, maintiennent la cohérence. "Il n'y a que deux maux de tête dans la communauté de l'informatique: défaillance du cache et problèmes de dénomination" - Phil Karlton choisissez un mot que vous aimez et utilisez-le en continu. Choisissez un style et continuez-le.
Nightware:
setColor,
Letbackground
changer
Makedisplay
rêve:
setColor;
SetBackground;
setfontize
ensemble.........
Essayez de maintenir le style de code et le style de dénomination afin que les gens puissent lire votre code comme s'ils lisaient des articles écrits par la même personne.
3. Traitement des paramètres
1. Type de paramètre
Déterminez le type de paramètres pour fournir des garanties stables pour votre programme
// nous stipulons cette couleur accepte la fonction de type de chaîne setColor (couleur) {if (typeof couleur! == 'String') return; dosomething}2. Utilisez JSON pour passer les paramètres
Il y a de nombreux avantages à passer des valeurs dans JSON. Il peut nommer des paramètres, ignorer l'emplacement spécifique des paramètres, donner des valeurs par défaut, etc. Par exemple, les mauvaises situations suivantes:
fonction fn (param1, param2 ............ paramn)
Vous devez passer chaque paramètre dans l'ordre en conséquence, sinon votre méthode sera exécutée d'une manière différente de ce que vous attendez. La méthode correcte est la suivante.
Fonction fn (json) {// Définissez la valeur par défaut pour les paramètres requis var default = extension ({param: 'default', param: 'default' ......}, json)}Ce code de fonction devrait s'exécuter même si vous n'y transmettez aucun paramètre. Parce que lors de la déclaration, vous déciderez de la valeur par défaut des paramètres en fonction de l'entreprise spécifique.
4. Évolutivité
L'un des principes les plus importants de la conception des logiciels: ne modifiez jamais l'interface, cela signifie l'étendre! L'évolutivité nécessite également une seule responsabilité pour l'interface et plusieurs interfaces de responsabilité sont difficiles à développer. Prenez un châtaignier:
// La police et l'arrière-plan d'un élément doivent être modifiés en même temps // Nightware: Fonction Set (Selector, Color) {Document.QuerySelectroall (Selector) .Style.Color = Color; Document.QuerySelectroall (Selector) .Style.BackgroundColor = Color;} // La fonction ne peut pas être étendue. Si vous avez besoin de modifier à nouveau la taille de la police, vous ne pouvez modifier cette fonction et remplir le code pour modifier la taille de la police après la fonction // DreamFunction Set (Selector, Color) {var el = Document.QuerySelectroall (Selector); el.Style.Color = Color; el.Style.backgroundColor = Color; couleur, px) {var el = set (sélecteur, couleur) el.style.fontsize = px; return el;}Ce qui précède n'est qu'un simple ajout de couleurs. L'entreprise est complexe et le code n'est pas lorsque vous l'écrivez. Vous devez lire le code précédent et le modifier. De toute évidence, il ne se conforme pas au principe ouvert. La fonction modifiée renvoie l'objet Element, de sorte que la prochaine fois que vous devez changer, vous obtiendrez à nouveau la valeur de retour pour le traitement.
2. L'utilisation de ce
L'évolutivité comprend également une utilisation flexible de cette méthode, appelez et appliquez les méthodes:
Fonction SaysbonJour () {alert (this.a)} obj.a =; obj.say = saybonJour; obj.say (); /// orsaybonJour.call || appliquer (obj); //5. Gestion des erreurs
1. Erreurs de prévision
Vous pouvez utiliser le type ou essayer ... Catch pour détecter. Le typeof force l'objet de détection pour ne pas lancer des erreurs et est particulièrement utile pour les variables non définies.
2. Jetez une erreur
La plupart des développeurs ne veulent pas faire des erreurs et doivent trouver le code correspondant eux-mêmes. La meilleure façon est de le sortir directement dans la console pour dire à l'utilisateur ce qui s'est passé. Nous pouvons utiliser l'API de sortie du navigateur: Console.log / Warn / Error. Vous pouvez également laisser un moyen pour votre programme: essayez ... Catch.
Erreur de fonction (a) {if (typeof a! == 'string') {console.error ('param a doit être le type de chaîne')}} Fonction Error () {try {// Un code excuse ici peut-être erron6. Présence
L'interface du programme d'odeur prévisible fournit une robustesse et pour assurer une exécution fluide de votre code, il doit prendre en compte des attentes anormales. Examinons la différence entre le code imprévu et le code prévisible en utilisant le SetColor précédent
// NighwareFunction Set (Selector, Color) {document.getElementById (Selector) .Style.Color = Color;} // dreamzepto.init = function (Selector, Context) {var Dom // If Nothing Gived for String Selector selector.trim () // S'il s'agit d'un fragment HTML, créez des nœuds à partir de celui-ci // Remarque: Dans Chrome et Firefox, Dom Error // est lancé si le fragment ne commence pas par <if (Selector [] == '<' && fragmentre.test (Selector)) dom = zepto.fragment (Selector, regexp. Collection sur ce contexte d'abord, et sélectionnez // nœuds à partir de thelsese if (context! == Undefined) return $ (context) .find (sélecteur) // s'il s'agit d'un sélecteur CSS, utilisez-le pour sélectionner les nœuds.else dom = zepto.qsa (document, sélecteur)} // si une fonction est donnée, appelez-le lorsque le dom est le relector) / estfunction (selector)) Si une collection Zepto est donnée, retournez simplement Itelse if (zepto.isz (sélecteur)) Return selectorElSE {// Normaliser le tableau si un tableau de nœuds est donné (isArray (Selector)) dom = compact (Selector) // Wrap Dom nœuds.else if (isObject (Selector)) DOM = [Selector], select if (fragmentre.test (sélecteur)) dom = zepto.fragment (selector.trim (), regexp. $, contexte), sélecteur = null // s'il y a un contexte, créez une collection sur ce contexte d'abord, et sélectionnez // nœuds à partir de thelse if (context! == UNDEFINE nœuds.else dom = zepto.qsa (document, sélecteur)} // Créez une nouvelle collection Zepto à partir des nœuds Foundraturn zepto.z (Dom, sélecteur)}Ce qui précède est le code source de Zepto. Vous pouvez voir que l'auteur a effectué beaucoup de traitement lors de la prévision des paramètres entrants. En fait, la prévisibilité fournit plusieurs entrées pour le programme, rien de plus que certains jugements logiques. Zepto utilise ici beaucoup de bons et de mauvais jugements, ce qui mène également à la durée du code et ne convient pas à la lecture. En bref, la prévisibilité vous oblige vraiment à écrire plus de paramètres pour les objets physiques à l'emplacement. Changer la détection externe en détection interne. Oui, les personnes qui l'utilisent sont confortables et heureuses de l'utiliser. Maintenant! La chose la plus importante dans la vie est Heisen.
7. Commentaires et documents lisible à la lisibilité
La meilleure interface est que nous l'utiliserons sans documentation, mais souvent, une fois que le nombre d'interfaces est plus élevé et que l'entreprise augmentera, elle sera un peu difficile à utiliser. Par conséquent, les documents d'interface et les commentaires doivent être soigneusement écrits. Les commentaires suivent le principe de la simple et de la concision, et sont pour ceux qui viennent des années plus tard pour les montrer:
// Interface d'annotation, pour démontrer ppt, utiliser la fonction commentaire () {// Si vous définissez une variable sans signification littérale, il est préférable d'écrire un commentaire pour cela: A: variable inutile, vous pouvez supprimer var a; // écrire des commentaires dans la clé et l'ambiguïté, tout comme la touche finale: Effacez toutes les données après la routage vers l'interface de hachage. Return go.navigate ('hash', function () {data.clear ();});}enfin
Il est recommandé de marquer des documents API d'écriture de grammaire et de syntaxe de la rédaction de documents GitHub Royal. Simple et rapide, le code est mis en évidence et vous ne dites pas grand-chose.
Ce qui précède est la description complète des principes de conception de l'API JavaScript qui vous sont présentés par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!