Como biblioteca de UI, no planeo dejar que todos aprendan el núcleo de mi kit y memorizar mi API. Este tipo de método de aprendizaje de seguimiento no tiene ningún significado. Hoy, JQuery es popular, todos aprenden JQ, y mañana los Seajs se volverán populares, y todos cantarán SEAJS. Entonces, en KITJS, preparé especialmente un azúcar de sintaxis (SUGER.JS) para los usuarios de JQ, lo que simula por completo la API JQ. Además de la implementación, la interfaz es la misma, lo que también es conveniente para que todos transformen directamente los componentes del kit. Por supuesto, como fanático puramente técnico, es mucho más interesante entender en profundidad cómo se implementa una tecnología que usarla para la ideología. Por supuesto, si plagia directamente el código de componentes del kit para las consideraciones de KPI o el bono del proyecto del jefe para completar su KPI, no me importa ese comportamiento. Mientras beba agua y no olvide cavar el pozo, y puede promover Kitjs cuando sopla agua con colegas, te estoy agradecido. Al mismo tiempo, Kit también es una biblioteca muy joven. Debido al desarrollo continuo, hay algunos problemas de compatibilidad de errores y navegadores, lo cual es inevitable. Estoy solo y tengo energía limitada. En esta era de la guerra en el frente, los amigos más de ideas afines son bienvenidos para hacerlo más grande y progresar juntos.
Al mismo tiempo, hoy se lanzó un componente de diálogo Kitjs, con la dirección de demostración http://xueduany.github.com/kitjs/kitjs/demo/dialog/demo.html
(I) formato de directorio de kits
Volver al tema, en KITJS, Kit.js es la existencia del archivo central central. Contiene algunos de los DOM y los objetos más utilizados, las operaciones hereditarias y un lote de String.js, Math.js, etc. se amplían de acuerdo con la división de funciones en el mismo directorio de nivel. Cada archivo JS independiente contiene un constructor de clase y una instancia de un objeto global.
Tomar Kit.js como ejemplo, incluye la clase $ kit y el kit $ kit $ kit (comenzar con $ es evitar conflictos con variables de uso común).
Todos los demás tipos se cuelgan en las instancias de instancia $ kit y $ kit en la forma del enlace, como Math.js, que incluye $ Kit.Math Class y $ Kit.Math Instancias, por lo que solo hay dos contaminantes en el alcance global. Al mismo tiempo, en kit.js, definimos un espacio de nombres llamado $ kit.ui. En el directorio físico, utilizamos el directorio de widgets del mismo nivel que Kit.js, y el directorio con múltiples letras iniciales se organiza en una fila.
Todos los directorios en el directorio de widgets son directorios de componentes KITJS. Cada archivo JS independiente solo contiene un constructor de clase para componentes independientes (no instancia). También puede ser compatible con el modo de módulo de CommonJS (puede cumplir con los módulos/1.1 especificación de la transformación CommonJ y AMD. El método de transformación específico se mencionará en detalle más adelante)
(Ii) La plantilla de código predeterminada del componente del kit, la anotación cumple con la especificación JSDOC
Tomemos los componentes del cuadro de diálogo como ejemplo, cada componente es similar al siguiente
En primer lugar, el comentario de JSDOC, ¿Qué clase es la declaración de @class, @require xxx.js, en qué componentes se declaran dependiendo?
(Iii) Método de constructor y inicialización
Cada clase define un constructor de forma estándar (config) {}. Cabe señalar aquí que el constructor de cada componente KITJS reserva un parámetro de configuración de forma predeterminada como entrada para la configuración personalizada.
Al mismo tiempo, en el constructor de clases, hay un miembro estático, el objeto predeterminado config, utilizado para almacenar la configuración predeterminada del componente KITJS
Al usar los componentes KITJS, lo primero que debe hacer es inicializar un nuevo objeto de instancia a través de una nueva instancia. Esto es solo para inicializar un objeto de componente JS. Todavía no hay HTML. Debe ejecutar el método init, crear HTML y agregarlo a DOC, que es equivalente a verter carne y sangre en el alma ^_ ^.
Algunos estudiantes pueden preguntar, ¿por qué no colocar el método init directamente en el constructor y liberarlo por separado?
1. Porque la clase principal necesita ser instanciada durante la herencia. Cuando la clase infantil hereda de la clase principal, el objeto prototipo de la clase infantil se establecerá en la nueva instancia de la clase principal. Si el método de inicialización de init se coloca en el constructor, el HTML de la clase principal se ejecutará directamente y se generará el código de basura.
2 Debido a la carga perezosa, el código HTML debe ejecutarse en el momento adecuado, en lugar de inmediatamente cuando se inicialización de la inicialización
Entonces, la forma predeterminada de usar componentes KITJS es
Después de la instancia, ejecute el método init (el método init devolverá el objeto del componente actual, con el código de retorno 7)
Como se muestra en la figura anterior, todos los métodos API en el diálogo se colgan en el prototipo, y la herencia y pasan al objeto de instancia a través de la extensión del prototipo.
Observe el código de constructor del componente $ kit.ui.dialog.yesorno,
(Iv) herencia de kitjs
Declaró la relación de herencia con el objeto $ kit.ui.dialog a través del método $ kit.inherit. Aquí, habrá un compañero de clase que quiere preguntar, ¿por qué debería heredarlo en el constructor en lugar de escribirlo directamente afuera?
La razón es:
1.KitJS es una relación de herencia basada en prototipos
2. Para usar los componentes KITJS, debe instanciar el objeto de componente. Cada componente se crea a través del constructor a través de una nueva instancia.
Así que puse la ejecución de la relación de herencia en el constructor de código, de modo que al instancias de un nuevo componente, heredaré los miembros y métodos de su clase principal paso a paso de acuerdo con el método de herencia del constructor del componente actual.
Cuando una clase infantil necesita modificar el método de la clase principal, solo necesita definir un método del mismo nombre en el prototipo de la clase infantil para anular el método de herencia de la clase principal.
En términos de nombres, KITJS sigue, y la subclase continúa el nombre de la clase principal como espacio de nombres y mantiene la cadena, como se muestra en la figura anterior $ kit.ui.dialog, $ kit.ui.dialog.yesorno
La implementación de la herencia de KITJS también es muy simple
Instanciar un objeto de clase principal, copiar a todos los miembros de la instancia de clase principal en el prototipo de subclase, luego restablezca el constructor del prototipo de subclase como el constructor de subclase, y luego cuelgue un enlace al constructor de subclase y apunte a la clase principal. A través del método $ kit.herherit, en el proceso de instanciación de la subclase $ kit.ui.dialog.yesorno, puede heredar a todos los miembros de la clase principal $ kit.ui.dialog que no existen y realizar una herencia similar a los idiomas estáticos.
(V) Parámetros de configuración , Desmontaje de acoplamiento/eliminación de la piel de HTML y CSS?
El constructor del componente del kit está acostumbrado a pasar en un parámetro de tipo mapa y siempre personaliza el componente. Cuando se inicializa el componente del kit, sobrescribirá automáticamente el valor predeterminado predeterminado con el parámetro de configuración enviado por el usuario e iniciará la inicialización.
Para cualquier componente, es imposible deshacerse de los cambios en la estructura HTML y los cambios en el estilo CSS
El kit descompone este acoplamiento en la configuración del parámetro de configuración.
En primer lugar, use la tecnología de plantilla HTML. El kit aboga por usar el método $ kit.newhtml para rootear directamente la cadena HTML, generar HTML DOM e insertar secuencias de documentos,
Por lo tanto, extraemos el contenido HTML aproximado del componente, lo encapsulamos en una plantilla de cadena HTML y lo almacenamos en el Confutor CONFIG del componente. Si el usuario necesita modificar la plantilla HTML, use una configuración personalizada al inicializarla y anular el campo Template en el predeterminado predeterminado, CONFIG.
En el acoplamiento y la descomposición de plantillas HTML y CSS, Kit utiliza un truco para descomponer el nombre de clase usando plantillas JS.
Reemplace el HTML en config en forma de $ {xxx} por $ kit.tpl en el método init
Al mismo tiempo, todos los estilos se establecen en CSS.
Si hay múltiples conjuntos de máscaras que deben cambiarse, puede optar por modificar el nombre de clase de la plantilla especificando el nombre de clase real correspondiente a $ {CLS} durante la inicialización para lograr el efecto de la reemplazo de la piel.
(Vi) Resumen
Básicamente, a través del análisis de código del componente $ kit.ui.dialog.yesorno, tenemos una comprensión aproximada de la estructura de implementación de componentes de KITJS. De hecho, no es difícil diseñar un componente de página, pero diseñar un componente de página que pueda adaptarse a diversos requisitos y puede deformarse rápidamente y adaptarse al desarrollo en varias ocasiones. Kit divide las plantillas HTML y CSS, personaliza los parámetros de configuración y el ConfiG predeterminado, y las subclases obtienen las propiedades y métodos de la clase principal a través de la herencia, y al mismo tiempo refactoran el código relevante de acuerdo con las diferentes necesidades comerciales, que básicamente pueden satisfacer las necesidades de componentes de UI de negocios de varios niveles y entornos.
KITJS incluye biblioteca básica y biblioteca de interfaz de usuario.
Biblioteca básica: función selectora, función de operación DOM, función de animación, mejorar los eventos DOM, aumentar la estructura de datos de Hashtree, la función IO, la función de almacenamiento local, la lectura múltiple, el rango, etc.
También hay un suger.js que simula el formato de operación jQuery
La biblioteca de la interfaz de usuario incluye: elementos de forma mejorados, capas emergentes, reproductores multimedia, marcos de verificación, flujo de cascada, enlace, presentaciones de diapositivas, calendarios, componentes de carga, motores de plantilla, etc.