[Aperçu de diffusion en direct] Jusqu'où devons-nous aller pour remplacer Oracle ?

Introduction

Ce chapitre analyse la conception du canevas de code volant sous quatre aspects : positionnement précis, conception en couches, composants asynchrones et glisser-déposer.

1. Conception de positionnement précis

Flying Code Canvas est une suite qui fournit des fonctionnalités de canevas au monde extérieur. Il existe deux situations pour un positionnement précis : la première est que le composant cible n'a pas de sous-composants, mais le composant cible a des sous-composants.

Pas de sous-composant : Le composant cible est divisé en deux situations : sous-composants supportant et non supportant.

A un sous-composant : position de la souris par rapport à la diagonale du sous-composant (composant cible). Voir la figure 1 pour plus de détails

Figure 1

Lorsque le composant cible ne prend pas en charge le placement de composants enfants, devez-vous calculer si le composant glisser doit être placé sur le côté gauche, supérieur, droit ou inférieur du composant cible ? La méthode de calcul est présentée dans la figure 2

Figure 2

Grâce à la position de la souris, au composant cible et à la position des coordonnées diagonales du composant, la relation de position entre le composant de traînée et le composant cible dans le côté droit de la figure 1 peut être déduite.

Question : Pourquoi Feima ne fournit-il pas les dimensions (x, y) pour que la taille du composant puisse être connue avec précision ?

En utilisation réelle, le constructeur ne se soucie pas des x et y spécifiques du composant. Concentrez-vous généralement sur les lignes, les colonnes et la largeur des composants.

2. Conception en couches

Il existe de nombreuses options pour la conception de canevas low-code, et Feima adopte un modèle de conception à deux couches. Ce modèle de conception présente de nombreux avantages et il est découplé des composants du canevas. Il est plus facile à comprendre pour les étudiants qui ont développé iOS et Android en natif. Comme le montre la figure 3

image 3

La couche inférieure du canevas est la couche de rendu des composants, qui restitue la disposition des composants en fonction de la page DSL. Il existe également une vue de masque de canevas sur la couche de rendu des composants. Lorsqu'un composant est cliqué, une couleur sera ajoutée à la bordure la plus extérieure du composant en fonction du composant. Une barre d'outils (plus, monter, descendre, copier, supprimer) sera ajoutée dans le coin supérieur droit du composant ( basculement automatique vers le bas en fonction de la mise en page), et une zone de survol sera ajoutée. . Prend en charge le réglage par glisser-déposer de la largeur du composant. Il y a une ligne d'effet des voies respiratoires à l'extrême droite du composant, et la souris peut faire glisser et déposer la largeur du composant pour l'ajuster. Cela facilite grandement les opérations de réglage du style.

Question : Puisque le redimensionnement gauche et droit des composants est pris en charge, pourquoi ne pas prendre en charge le redimensionnement haut et bas des composants ?

Feima ajustera automatiquement les tailles supérieure et inférieure des composants du conteneur tels que div et form dans l'état d'édition en fonction de la hauteur du sous-composant. Feima ne connaît pas la largeur du composant.

3. Composants asynchrones

Feima offre des fonctionnalités de composants communes, mais il est difficile de créer des composants personnalisés pour l'entreprise dans Feima. Feima offre la possibilité de charger dynamiquement des composants. Le chargement dynamique des composants est divisé en état d'édition et état d'exécution. Dans l'état d'édition, lorsque le composant est glissé sur la page, le type de composant actuel sera déterminé en fonction du type dans les données du composant. Si type=2, le moteur Feima créera un script pour télécharger le composant correspondant à l'URL concernée, puis le mettra en cache. Les idées d'état de fonctionnement sont les mêmes.

4. Conception par glisser-déposer

Lorsque vous faites glisser des composants, chaque composant doit être mélangé avec un traitement spécifique, par exemple si le sous-composant du formulaire est el-form-item, etc. Voir la figure 4

Figure 4

Lorsque le composant est glissé et déposé, currentTarget sera enregistré pour obtenir l'identifiant du composant et l'image dataTransfer sera définie. De cette façon, vous pouvez voir le style du composant glisser. La méthode mix-in utilise hoc, une méthode pour améliorer les composants. Voir la figure 5 pour plus de détails.

Figure 5

Quatre : Résumé

Ce chapitre analyse la conception de Feima Canvas sous quatre aspects : positionnement précis, conception en couches, composants asynchrones et glisser-déposer. L'objectif de Feima est d'être pratique, robuste et sans test, afin que les pages Web uniques frontales puissent être mises en production rapidement. Merci aux étudiants en produit et aux étudiants en serveur pour leur solide soutien.

Auteur : Wang Guanghui de JD Technology

Source : Communauté de développeurs JD Cloud Veuillez indiquer la source lors de la réimpression

Conception du canevas technologique front-end Feima LowCode | Équipe technique JD Cloud