En tant que bibliothèque d'interface utilisateur, je ne prévois pas de laisser tout le monde apprendre mon kit au cœur et de mémoriser mon API. Ce type de méthode d'apprentissage de suivi n'a aucun sens. Aujourd'hui, JQuery est populaire, tout le monde apprend JQ et demain Seajs deviendra populaire et tout le monde chantera Seajs. Donc, dans KitJS, j'ai spécialement préparé un sucre de syntaxe (Suger.js) pour les utilisateurs de JQ, qui simule complètement l'API JQ. En plus de la mise en œuvre, l'interface est la même, ce qui est également pratique pour tout le monde pour transformer directement les composants du kit. Bien sûr, en tant que fan purement technique, il est beaucoup plus intéressant de comprendre en profondeur comment une technologie est mise en œuvre que de l'utiliser pour l'idéologie. Bien sûr, si vous plagiez directement le code de composant KIT pour les considérations KPI ou le bonus du projet du boss pour compléter votre KPI, cela ne me dérange pas un tel comportement. Tant que vous buvez de l'eau et n'oubliez pas de creuser le puits et que vous pouvez promouvoir les KitJ lorsque vous souffrez de l'eau avec des collègues, je vous en suis très reconnaissant. En même temps, Kit est également une très jeune bibliothèque. En raison du développement continu, il y a certains bogues et problèmes de compatibilité des navigateurs, ce qui est inévitable. Je suis seul et j'ai une énergie limitée. Dans cette ère de guerre à l'avant, des amis plus partageant les mêmes idées sont les bienvenus pour l'agrandir et les progrès ensemble.
En même temps, un composant de dialogue KitJS a été publié aujourd'hui, l'adresse de démonstration étant http://xuduany.github.com/kitjs/kitjs/demo/dialog/demo.html
(I) Format du répertoire de kit
Retour au sujet, dans kitjs, kit.js est l'existence du fichier de base central. Il contient certains des DOM et objets les plus couramment utilisés, les opérations héritées et un lot de string.js, math.js, etc. sont étendus en fonction de la division des fonctions dans le même répertoire de niveau. Chaque fichier JS indépendant contient un constructeur de classe et une instance d'un objet global.
En prenant Kit.js à titre d'exemple, il comprend la classe $ kit et le kit $ kit $ kit (à commencer par $, c'est d'éviter les conflits avec des variables couramment utilisées).
Tous les autres types sont accrochés aux instances d'instance de kit $ et $ kit de la manière de Link, telles que math.js, qui comprend $ kit.math class et $ kit.math instances, de sorte qu'il n'y a que deux polluants dans la portée mondiale. En même temps, dans Kit.js, nous définissons un espace de noms appelé $ kit.ui. Dans le répertoire physique, nous utilisons le répertoire du widget du même niveau que Kit.js, et le répertoire avec plusieurs lettres initiales est organisé dans une ligne.
Tous les répertoires dans le répertoire du widget sont les répertoires de composants KITJS. Chaque fichier JS indépendant ne contient qu'un constructeur de classe pour les composants indépendants (non-instance). Il peut également être compatible avec le mode du module de CommonJS (peut se conformer aux modules / 1.1 Spécification de CommonJS et de la transformation AMD. La méthode de transformation spécifique sera mentionnée en détail plus tard)
(Ii) Le modèle de code par défaut du composant du kit, l'annotation est conforme à la spécification JSDOC
Prenons l'exemple des composants de la boîte de dialogue, chaque composant est similaire à ce qui suit
Tout d'abord, le commentaire de JSDOC, quelle classe est la déclaration @class, @Require xxx.js, quels composants sont déclarés dépendants de
(Iii) Méthode du constructeur et d'initialisation
Chaque classe définit un constructeur dans une fonction de fonction standard (config) {}. Il convient de noter ici que le constructeur de chaque composant KITJS réserve un paramètre de configuration par défaut en entrée pour la configuration personnalisée.
Dans le même temps, dans le constructeur de classe, il y a un membre statique, l'objet defaultConfig, utilisé pour stocker la configuration par défaut du composant KitJS
Lorsque vous utilisez des composants KitJS, la première chose que vous devez faire est d'initialiser un nouvel objet d'instance via une nouvelle instance. Il s'agit simplement d'initialiser un objet composant JS. Il n'y a pas encore de HTML. Vous devez exécuter la méthode init, créer HTML et l'ajouter à Doc, ce qui équivaut à verser de la chair et du sang sur l'âme ^ _ ^.
Certains étudiants peuvent demander, pourquoi ne pas placer la méthode init directement dans le constructeur et la libérer séparément?
1. Parce que la classe parent doit être instanciée pendant l'héritage. Lorsque la classe enfant hérite de la classe parent, l'objet prototype de la classe enfant sera défini sur la nouvelle instance de la classe parent. Si la méthode d'initialisation de l'initiation est placée dans le constructeur, le HTML de la classe parent sera directement exécuté et le code de déchets sera généré.
2 En raison du chargement paresseux, le code HTML doit être exécuté au bon moment, plutôt que immédiatement lorsque l'initialisation est initialisée
Ainsi, la façon par défaut d'utiliser les composants KitJS est
Après l'instanciation, exécutez la méthode init (la méthode init renvoie l'objet composant actuel, avec le code de retour 7)
Comme le montre la figure ci-dessus, toutes les méthodes d'API dans la boîte de dialogue sont accrochées au prototype, et l'héritage et le passage à l'objet d'instance via une extension du prototype.
Observez le code constructeur du composant $ kit.ui.dialog.yesorno,
(Iv) L'héritage des kitjs
Il a déclaré la relation d'héritage avec l'objet $ kit.ui.dialog via la méthode $ kit.inherit. Ici, il y aura un camarade de classe qui veut demander, pourquoi devrait-il hériter dans le constructeur au lieu de l'écrire directement à l'extérieur?
La raison en est:
1.Kitjs est une relation d'héritage basée sur un prototype
2. Pour utiliser les composants KitJS, vous devez instancier l'objet composant. Chaque composant est créé via le constructeur via une nouvelle instance.
J'ai donc mis l'exécution de la relation d'héritage dans le constructeur de code, de sorte qu'en instanciant un nouveau composant, j'hériterai les membres et les méthodes de sa classe parent étape par étape selon la méthode d'héritage du constructeur du composant actuel.
Lorsqu'une classe enfant doit modifier la méthode de la classe parent, vous n'avez qu'à définir une méthode du même nom dans le prototype de la classe enfant pour remplacer la méthode d'héritage de la classe parent.
En termes de dénomination, Kitjs suit, et la sous-classe continue le nom de classe parent comme espace de noms et maintient la chaîne, comme indiqué dans la figure ci-dessus $ kit.ui.dialog, $ kit.ui.dialog.yesorno
La mise en œuvre de l'héritage KITJS est également très simple
Instancier un objet de classe parent, copier tous les membres de l'instance de classe parent sur le prototype de sous-classe, puis réinitialiser le constructeur de prototype de sous-classe en tant que constructeur de sous-classe, puis accrocher un lien vers le constructeur de sous-classe et pointer vers la classe parent. Grâce à la méthode $ kit.inherit, dans le processus d'instanciation de la sous-classe $ kit.ui.dialog.yesorno, vous pouvez hériter de tous les membres de la classe parent $ kit.ui.dialog qui n'existent pas et réaliser un héritage similaire aux langues statiques.
(V) Paramètres de configuration , couplage de couplage / élimination de la peau de HTML et CSS?
Le constructeur de composants de kit est habitué à passer dans un paramètre de type carte et personnalise toujours le composant. Lorsque le composant du kit est initialisé, il écrasera automatiquement le paramètre par défaut par défaut avec le paramètre de configuration soumis de l'utilisateur et démarrer l'initialisation.
Pour tout composant, il est impossible de se débarrasser des changements dans la structure HTML et des changements dans le style CSS
Le kit décompose ce couplage dans la configuration du paramètre de configuration.
Tout d'abord, utilisez la technologie du modèle HTML. Le kit prône à l'aide de la méthode $ kit.newhtml pour rooter directement la chaîne HTML, générer des flux de documents HTML DOM et insérer,
Nous extraissons donc le contenu HTML approximatif du composant, le encapsulons dans un modèle de chaîne HTML et le stockons dans le CONFIG de défaut du composant. Si l'utilisateur doit modifier le modèle HTML, utilisez une configuration personnalisée lors de l'initialisation et remplacez le champ de modèle dans le par défaut defaultConfig.
Dans le couplage et la décomposition des modèles HTML et CSS, Kit utilise une astuce pour décomposer le nom de classe à l'aide de modèles JS.
Remplacez le HTML dans la configuration sous la forme de $ {xxx} par $ kit.tpl dans la méthode init
En même temps, tous les styles sont définis dans CSS.
S'il existe plusieurs ensembles de skins qui doivent être commutés, vous pouvez choisir de modifier le nom de classe du modèle en spécifiant le nom de classe réel correspondant à $ {CLS} pendant l'initialisation pour obtenir l'effet du remplacement de la peau.
(Vi) Résumé
Fondamentalement, grâce à l'analyse de code du composant $ kit.ui.dialog.yesorno, nous avons une compréhension approximative de la structure de mise en œuvre des composants de KitJS. En fait, il n'est pas difficile de concevoir un composant de page, mais la conception d'un composant de page qui peut s'adapter à diverses exigences et peut rapidement se déformer et s'adapter au développement à diverses occasions. Le kit divise les modèles HTML et CSS, personnalise les paramètres de configuration et la config de défaillance, et les sous-classes obtiennent les propriétés et les méthodes de la classe parent par l'héritage, et en même temps refactor le code pertinent en fonction des différents besoins de l'entreprise, ce qui peut essentiellement répondre de manière flexible aux besoins des composants de l'interface utilisateur de divers niveaux et environnements.
KITJS comprend la bibliothèque de base et la bibliothèque d'interface utilisateur.
Bibliothèque de base: fonction de sélecteur, fonction de fonctionnement DOM, fonction d'animation, améliorer les événements DOM, augmenter la structure des données de hachage, fonction IO, fonction de stockage local, multithreading, plage, etc.
Il y a aussi un Suger.js qui simule le format d'opération JQuery
La bibliothèque d'interface utilisateur comprend: des éléments de forme améliorés, des couches pop-up, des lecteurs de médias, des cadres de vérification, un débit de cascade, une liaison, des diaporamas, des calendriers, des composants de téléchargement, des moteurs de modèle, etc.