Tout d'abord, pourquoi avoir une bonne architecture

La première chose effacer, architecture La demande de services. Le but de la présence de l'architecture front-end, il est ma compréhension personnelle, les points suivants:

1. Afin d'améliorer la lisibilité du code

Une bonne architecture, la lisibilité du code doit être forte.

Autrement dit, s'il y a un nouveau venu se joindre à l'équipe, il a repris le projet, il doit être facile à utiliser, peut être simple et facile à comprendre la relation entre la totalité de la partie d'extrémité avant de façon à trouver leur propre besoin de se concentrer sur le point. Plutôt que de la nécessité de passer beaucoup de temps pour apprendre à connaître un grand nombre des détails du projet, de commencer à faire quelque chose pour commencer.

Dans le dossier, il peut être du nom de fichier, de distinguer ce qui est la page, ce qui est la logique, qui est le style, qui est un composant peut être réutilisable, qui est un groupe d'icônes, et ce qui est un terminal ou une fin exclusive de PC mobile Style / logique.

Prenant la parole sur le code, y compris le style de nommage uniforme, la pertinence emballé dans le même code de fichier et assez fort.

2. améliorer le code maintenabilité

Une bonne architecture, il doit être facile de maintenir, par exemple, dans la nouvelle demande, le changement de la demande, bug de modification, ne causera pas des changements inattendus, tels que la modification du contenu d'un composant de page, a conduit à une autre page génération de montage le changement (ce qui est trop fosse). Ainsi, le couplage inférieur, une forte cohésion, et l'entrée et la sortie sont envisagées.

3. améliorer l'évolutivité de code

Une bonne architecture, une certaine évolutivité, forte, ne peut pas écrire mort.

Trop TM changement des exigences normales, une nouvelle demande trop TM normale. Donc, une bonne architecture, il est nécessaire de prendre en compte l'apparition de ces cas, car ceux-ci sont tenus de se produire. Par conséquent, vous devez écrire le code pour éviter la mort.

A composants de page tels que la nécessité d'une composante civile, et ce calendrier références composants sont d'autres (tels que la recherche de la github). Donc, essayez de ne pas référencer directement ce directement dans les composants de calendrier page composant A l'intérieur, mais écrire un paquet calendrier calendrier composant B, C composant que vous avez fait référence dans ce calendrier composant B, puis d'opérer à travers ce B. calendrier composant

La raison est simple, si un chef de produit de jour, a déclaré laid le calendrier des composants, nous changer. Si vous citez ceci directement intégré dans la page du composant de calendrier C dans le composant A, vous allez probablement changer beaucoup de code (parce que l'utilisation des différents composants de calendriers et interfaces exposées peuvent être différentes). Si vous êtes encore un certain nombre d'autres endroits référencés dans cette composante civile, est encore pire! Chaque lieu doit être changé.

Et si le paquet composant de calendrier référencé C en écriture de leur propre B civile composant, alors il vous suffit de changer le calendrier composant B dans le code correspondant peut être, mais parce que l'interface calendrier composante exposée B est constante, si naturellement ne pas modifier le code de la page.

Dessins, composante civile, par exemple, prendre en compte les résultats de l'évolutivité

• Ne pas prendre en compte l'évolutivité:

Considérant Évolutivité:

4. Faciliter la collaboration

Comprenant en synergie synergique entre les extrémités avant et arrière, l'extrémité avant et l'extrémité distale.

Plus précisément, les extrémités avant et arrière de paiement ajax généralement une interaction synergique, il devrait y avoir au moins un fichier dédié encapsule toutes les demandes de ajax, toutes les demandes sont encapsulées ajax ici. Dans le processus de développement doit être encapsulé transmettre ici analogiques et recevoir rendez-vous de contenu interactif pour faciliter le développement du FBI.

La collaboration frontal et front-end, principalement dans le même temps lorsque vous modifiez le code, le code ne sera pas affecter le fonctionnement normal de l'autre partie. Par conséquent, les exigences d'emballage à faible degré d'interférence et de découplage est nécessaire.

5. Automatisation

emballage automatique, compression, confus, le cas échéant, couplée à des tests unitaires automatisés.

Résumé: En résumé, le but d'une bonne architecture est de permettre l'avant à écrire du code écrit dans un cadre confortable si confortable avec la fin arrière du FBI, de sorte que le chef de produit au changement réforme de la demande confortable.

Deuxièmement, comment puis-je concevoir l'architecture

Je ne peux pas dire que leur architecture est une bonne architecture (évidemment pas d'importance), pour partager leur récemment pour faire un projet, son architecture est de savoir comment faire.

Tout d'abord, identifier les besoins:

1, un des sites de petites et moyennes entreprises, et pour terminal mobile et le terminal PC (single-ended sur les 15 pages, le nombre pop 20);

2, un budget limité (pour moins d'argent), le temps de développement est limité (un mois);

3, il peut exiger un certain degré de changement (comme l'ajout ou la modification de certaines pages de contenu de la page);

4, les clients ne se soucient pas de l'optimisation (mais je me soucie ah);

5, exige plus compatible avec IE9.

En second lieu, la décision de commencer:

1, IE9 compatible avec le cadre traditionnel décrit ci-dessus peut être utilisé, mais sans avoir à utiliser jQuery. Alors je vue, version 2.0;

2, le budget est limité, un temps limité, et donc du côté PC et les terminaux mobiles co js html, CSS indépendante;

3, la page limitée, donc pas besoin de diviser le niveau d'architecture est relativement faible, ne doivent être répartis en fonction de leur type;

4. Le point de vue dessin prototype, la complexité de la page est limitée, pas beaucoup la section de multiplexage, il est possible de déterminer ce qui doit multiplexer le paquet, ce qui nécessite un ensemble complexe séparé, ce qui est relativement simple afin de simplifier la difficulté de développement peut être couplé directement;

5, elle était plus habile site Web d'une seule page, de sorte que l'utilisation d'une seule basé sur la page, le chargement asynchrone sous la forme d'autres pages.

Ainsi, l'utilisation des choses connexes, telles webpack, vue-routeur, etc. En plus de faciliter le développement et la production, le développement du modèle suivant.

En troisième lieu, la répartition des fonctions:

Tout d'abord, il y a un html racine, vous devez charger notre logique js en y accédant, donc le code logique js est écrit dans main.js.

Sous main.js, notre code frontal peut être divisé en trois parties:

• arborescence des composants

• Module de fonction

• ressources

suit la figure:

Après la répartition des fonctions bien, les mêmes fonctions réside dans le même dossier, le style de nommage devrait être similaire.

Plus précisément, les choses liées à arborescence des composants, finissent généralement .vue, placé sous les composants dossier, les ressources, il y a des photos ou des ressources internationales à .png ou .js ou fin .json, placés dans le dossier des ressources sous et plug-ins fonctionnels, et d'autres services qui peuvent être multiples références, donc pour faciliter la consultation, sur le dossier src, et le dossier est supérieur composants dossier dossier fichiers et ressources.

Quatrièmement, le raffinement des modules fonctionnels:

Les fonctions, les composants et les ressources d'arbres, nous avons identifié ce que les choses, puis la suivante, nous devons éclaircir ces choses, comment diviser la forme de documents.

suit la figure:

1. La construction du projet relatif

• Parce que vous voulez utiliser vue.js, mais aussi utiliser la syntaxe ES6, donc babel Il est indispensable;

• Et parce que vous voulez confondre paquet d'automatisation, de sorte webpack Il est indispensable;

• Enfin, en raison de la commodité avec plusieurs participants, et donc le NPM package.json Configuration, différentes personnes peuvent être facilement et rapidement l'installation automatisée dépend de NPM installer, il est également nécessaire.

2. CDN liés

Mais parce que nous voulons utiliser une des polices externes (la demande nécessite l'introduction de polices rares), et par conséquent accélération CDN Est nécessaire, le fichier de police en html pour configurer la référence.

3. Configurer et des plug-ins

• Nous avons besoin d'une introduction directe de certains plug-ins et les fichiers de configuration;

• Pour utiliser vue, nous avons besoin d'un composant racine, il est App.vue ;

• Utilisez vue routeur, il faut configurer le fichier de routage, routeur-config.js La configuration de routage est également nécessaire;

• Ensuite, nous devons aussi présenter quelques-unes des caractéristiques et des services qu'un plug-in, donc il y a Plugin- début d'un certain nombre de plug-vue Ce sont de bonnes haute cohésion et la méthode de couplage faible doit être encapsulé;

4. dépendante NPM nécessaire

Bien sûr, utiliser vue vue.js certainement mis en place, il y a des Vue-router.js similaires et divers polyfill de compatibilité et plugins globaux.

Le débrochées bloc fonctionnel

• En plus de ces plug-ins référencés directement, nous avons des projets et un couplage très fonctionnel de service, je pense qu'il ne peut pas être aussi prise sorti, mais encore besoin d'un bon paquet, facile à utiliser et modifier;

• Le paquet de requête Ajax ajax.js, toutes les demandes sont placées dans lequel Ajax exposer seulement les interfaces externes pour faciliter la gestion et l'utilisation;

• Un autre exemple est la composante internationale LanguageManager.js capacités en temps réel, il a besoin de la mise en place des ressources internationales et des ressources internationales, la gestion de la charge;

• Un autre événement de bus.js exemple à travers les composants mis en uvre en communication;

• Un autre exemple est la gestion des user.js. d'information des utilisateurs

Résumé: Et ces divisions sont reflétées dans le tableau de. Ceci est le fichier de module de fonction dans le répertoire src, nous avons besoin de la grande majorité des fonctions peuvent être inclus, nous ne devons suivre les besoins réels de développement, la fonction correspondante est écrit dans ces documents et des références peut être. Cinquièmement, l'arborescence des composants:

Avant de parler de la division des modules fonctionnels, suivi par arborescence des composants.

Parce qu'elle est petite et page de taille moyenne, donc pas besoin de composant de niveau profond de l'arbre, mais encore sorti ou à se détacher, essayer de faire en sorte que la logique tirée des composants de découplage et une composante page pas trop. suit la figure:

0. composant racine

Tous les composants finalement à trouver, se trouve un élément racine commune App.vue, composant racine est seul responsable de la gestion directe de ses sous-ensembles.

Chaque composant uniquement directement responsable de la gestion de leurs propres sous-ensembles, et non pas la gestion de niveau interprofessionnel, et ne dépend pas de leurs sous-composants (ou ne peut pas être chargé en raison d'erreurs ou sous-assemblages qui ont conduit à l'erreur composant parent), de sorte que le découplage et à l'intérieur poly.

1. pop dialogue pop et conseils

Depuis dialogue pop pop et invites conseils peuvent exister, donc il est divisé en deux composantes, facile à gérer.

2. pas connecté et page de connexion

Parce qu'il ya connexion et de l'état de la page fermeture de session, et afin de tenir compte de la vitesse de chargement, sans être connecté, ne pas charger la page de connexion, et doivent donc être divisé en et processus de chargement asynchrone.

3. Pas la page enregistrée

Pas la page enregistrée est divisée en trois cas:

• première page: Il ne fait aucun doute à charger directement

• LOGIN pop: charge (asynchrone) lors de la connexion

• pop d'enregistrement: charge (asynchrone) lors de l'enregistrement de clic

La raison pour laquelle fendit, parce que, selon la demande, l'utilisateur connecté pour actualiser la page, vous pouvez aller directement à la page de connexion, donc pas de login et de l'enregistrement, ce traitement peut réduire le débit de la consommation, la charge d'augmenter la vitesse de chargement de la page (pop en particulier sur inscription encore plus de contenu chargé).

4. Page journalisés

Page a enregistré plus de pages, chargez la page de démarrage par défaut, puis chargé de manière asynchrone autres pages (pour y accéder).

La fenêtre de dialogue

Depuis moins logique, le volume de code, ainsi afin de faciliter la gestion, qui est incorporé dans un fichier unifié vue même ouverture logique commune, qui ouvre conformément à une clé de décision transmis. De sorte que lorsque la nouvelle pop, élimine le besoin d'écriture pop ouverte, logique étroite.

S'il y a pop plus complexe, il peut être introduit sous la forme du fichier en cours de sous-ensemble de vue, ainsi faciliter également la gestion;

6. Gestion internationale

Et la page de couplage élevé, est responsable du chargement des ressources internationales correspondantes et la gestion du commutateur.

7. composants de page

Il peut y avoir des sous-pages et des composants réutilisables, référence peut être de la manière normale.

8. Style de fichier

Il peut être écrit sous la forme d'un fichier .css séparé, mais à cause de mon dossier de style public est relativement petit, donc je l'ai mis dans un fichier .vue et référencé dans les années App.vue.

9. composants page nommée

• .Vue se terminent généralement, en plus de LanguageManager.js internationaux en raison du haut degré de couplage, mettant ainsi fin .js vue et une instance distincte, indique qu'il est plus comme un bloc fonctionnel, plutôt que d'une page de réunion vue;

• La page de base, telles que l'exploitation forestière et les pages enregistrées, des composants communs (ce qui est l'en-tête et pied de page) au début base-;

• Pop unité commence à box-;

• composants réutilisables commencent à extend-;

• composants externes import- introduits pour commencer;

• composants page ordinaires commençant par page- (ces pages sont souvent une page séparée, et non ancré ou connecté page de connexion);

• pop enregistrement parce que la logique est plus complexe et plus semblable, afin de commencer des registres ont.

Divisé par nom de fichier, de faire la distinction entre les différentes composantes d'une page peut dire que un coup d'oeil, mais aussi facile à gérer.

Cet article provient de Blog RPSC: