1. La fluidez de la interfaz
Una buena interfaz es suave y fácil de entender, y refleja principalmente los siguientes aspectos:
1. Simple
Para operar el atributo CSS de cierto elemento, el siguiente es el método nativo:
document.queryselectorAll ('#id'). style.color = 'rojo';Después del embalaje
función a (selector, color) {document.querySelectorAll (selector) []. style.color = color} a ('#a', 'rojo');Desde una larga línea con docenas de letras hasta una llamada de función simple, la API es simple y fácil de usar
2. Leyabilidad
A ('#a', 'rojo') es una buena función que nos ayuda a cambiar un elemento de manera simple y práctica, pero el problema es que si usa el cambio de función por primera vez, estará más confundido. Nadie le dirá qué función es A. Es necesario saber una cosa sobre el desarrollo de la interfaz: las personas son flojas. Desde la perspectiva de la función de asignación de color, aunque se escribe menos código, aumenta el costo de la memoria. Cada vez que haces esto, necesitas tener una relación de mapeo. A ----> Color. Si son algunos simples, no importa, pero generalmente un conjunto de marcos tiene docenas o incluso cientos de API, y el aumento en los costos de mapeo hará que el programador colapse. Lo que necesitamos es hacer que la interfaz sea significativa. Reescribamos la función A:
Función LetSomeElementChangeColor (Selector, Color) {Document.QuerySelectorAll (selector, color);}LetSomeElementChangecolor tiene un significado lingüístico en relación con A, y cualquiera sabrá su significado.
3. Reducir los costos de memoria
La función que ahora también es así. Es demasiado largo. Aunque LetSomeElementChangecolor reduce el costo de mapeo, aumenta el costo de la memoria. Debe saber que a nadie, incluidos los maestros académicos, le gusta ser verbalmente. Las API que obtienen de forma nativa también tienen este documento de problema. GetElementsByClassName; document.getElementsByName; document.QueryselectorAll; Estas API dan a las personas la sensación de que las palabras son demasiado largas. Aunque el significado que dan es muy claro, este enfoque se basa en sacrificar la simplicidad. Entonces reescribimos esta función anterior nuevamente
funciones setColor (selector, color) {xxxxxxxxxxxxx}Reduzca el nombre de la función sin cambios significativos. Haga que sea fácil de leer, recordar y usar;
4. Extendido
La llamada extensión significa que el uso de funciones se ejecuta en el orden de escritura como el agua que fluye para formar una cadena de ejecución:
document.getElementById ('id'). style.color = 'rojo'; document.getElementById ('id'). style.fontSize = 'px'; document.getElementById ('id'). style.backGourdColor = 'Pink';El método anterior que utilizamos fue encapsular las dos funciones setFontSize, SucedbackgroundColor nuevamente; y luego ejecutarlos setColor ('id', 'rojo'); setFontSiez ('id', '12px'); SackbackgroundColor ('id', 'rosa'); Obviamente, este enfoque no es flojo para ir más allá del reino; El elemento de identificación debe ser readquisito cada vez, afectando el rendimiento y el fracaso; Cada vez que necesita agregar nuevos métodos, falla, estos métodos todavía se llaman cada vez o falla. A continuación lo reescribimos en una función extendida. Primero, encapsule el método de ID de obtención en un objeto y luego devuelva este objeto en cada método del objeto:
función getElement (selector) {this.style = document.querySeleCotRall (selector) .style;} getElement.prototype.color = function (color) {this.style.color = color; return this;} getElement.prototype.background = function (bg) {this.style.backgroundcolor; this;} getElement.prototype.fontSize = function (size) {this.style.fontSize = size; return this;} // llame var El = new GetElement ('#id') el.color ('rojo'). fondo ('rosa'). fontsize ('px');Simple, suave y fácil de leer más adelante, hablaremos sobre cómo continuar optimizando en los parámetros. Por lo tanto, todos prefieren usar JQuery API. Aunque un símbolo $ no representa ningún significado práctico, un símbolo simple es beneficioso para nuestro uso. Encarna los principios anteriores: simple, fácil de leer, fácil de recordar, redacción en cadena y procesamiento de varios parámetros.
Nightware:
document.getElementById ('id'). style.color = 'rojo'; document.getElementById ('id'). style.fontSize = 'px'; document.getElementById ('id'). style.backGourdColor = 'Pink';sueño:
$ ('id'). CSS ({Color: 'Red', FontSize: '12px', BackgroundColor: 'Pink'})2. Consistencia
1. Consistencia de la interfaz
Las interfaces relevantes mantienen un estilo consistente. Un conjunto completo de API reducirá en gran medida la adaptabilidad del desarrollador a nuevas herramientas si transmite una sensación de familiaridad y comodidad. Nombrar esto: tanto corto como autodescribirse, y lo más importante, mantienen la consistencia. "Solo hay dos dolores de cabeza en la comunidad de informática: falla de caché y problemas de nombres" - Phil Karlton elige una palabra que te guste y úsela continuamente. Elija un estilo y luego guárdelo.
Nightware:
setColor,
campo de retroceso
modelador
Planearse
sueño:
setColor;
Stripbackground;
setFontSize
colocar.........
Intente mantener el estilo del código y el estilo de nombres para que las personas puedan leer su código como si estuvieran leyendo artículos escritos por la misma persona.
3. Procesamiento de parámetros
1. Tipo de parámetro
Determine el tipo de parámetros para proporcionar garantías estables para su programa
// Estipulamos que el color acepta la función de tipo de cadena SetColor (color) {if (typeof Color! == 'String') return; Dosomething}2. Use JSON para pasar los parámetros
Hay muchos beneficios de pasar los valores en JSON. Puede nombrar parámetros, ignorar la ubicación específica de los parámetros, dar valores predeterminados, etc. Por ejemplo, las siguientes situaciones malas:
función fn (param1, param2 ............ paramn)
Debe pasar cada parámetro en consecuencia, de lo contrario, su método se ejecutará de una manera diferente de lo que espera. El método correcto es el siguiente.
function fn (json) {// Establezca el valor predeterminado para los parámetros requeridos var defaus = extend ({param: 'default', param: 'default' ......}, json)}Se espera que este código de función se ejecute incluso si no pasa ningún parámetro en él. Porque al declararse, decidirá el valor predeterminado de los parámetros en función del negocio específico.
4. Escalabilidad
Uno de los principios más importantes del diseño de software: nunca modifique la interfaz, ¡significa extenderla! La escalabilidad también requiere una sola responsabilidad por la interfaz, y las interfaces de responsabilidad múltiple son difíciles de expandir. Toma una castaña:
// La fuente y el fondo de un elemento deben cambiarse al mismo tiempo // Nightware: Function Set (Selector, Color) {Document.queryselectroall (selector) .style.color = color; document.Queryselectroall (selector) .style.backgroundcolor = color;} // La función no se puede expandir. Si necesita cambiar el tamaño de fuente nuevamente, solo puede modificar esta función y completar el código para cambiar el tamaño de fuente después de la función // DreamFunction Set (Selector, Color) {var El = document.querySelectroOll (selector); el.style.color = color; el.style.backgroundcolor = color; return el;} // el font, el color y el tamaño del tamaño es ser ser de tamaño y tamaño es ser ser el tamaño de un tamaño de tamaño (el tamaño es ser ser de tamaño, px) {var el = set (selector, color) el.style.fontSize = px; return el;}Lo anterior es solo una simple adición de colores. El negocio es complejo y el código no es cuando lo escribe. Debe leer el código anterior y modificarlo. Obviamente, no se ajusta al principio abierto. La función modificada devuelve el objeto Elemento, de modo que la próxima vez que necesite cambiar, obtendrá nuevamente el valor de retorno para su procesamiento.
2. El uso de esto
La escalabilidad también incluye el uso flexible de esto, los métodos de llamada y aplicación:
función saysbonjour () {alert (this.a)} obj.a =; obj.say = saybonjour; obj.say (); /// orsaybonjour.call || aplicar (obj); //5. Errores de manejo
1. Errores de previsión
Puede usar typeof o intentar ... atrapar para detectar. TypeOf obliga al objeto de detección a no arrojar errores, y es especialmente útil para variables indefinidas.
2. Lanza un error
La mayoría de los desarrolladores no quieren cometer errores y necesitan encontrar el código correspondiente ellos mismos. La mejor manera es generarlo directamente en la consola para decirle al usuario lo que sucedió. Podemos usar la API de salida del navegador: console.log/warn/error. También puede dejar alguna salida para su programa: intente ... atrapar.
Error de función (a) {if (typeof a! == 'string') {console.error ('param a debe ser tipo de cadena')}} error de función () {try {// algún código excucete aquí tal vez tirar mal} capt (ex) {console.wran (ex);}}}}}}}}}}}}}}}}6. Forescencia
La interfaz del programa de olor predecible proporciona robustez y para garantizar una ejecución sin problemas de su código, debe tener en cuenta las expectativas anormales. Veamos la diferencia entre el código imprevisto y el código previsible utilizando el setcolor anterior
// nighwarefunction set (selector, color) {document.getElementById (selector) .style.color = color;} // dreamzepto.init = function (selector, context) {var dom // Si nada dado, devuelve un zeptopo vacío colección (! selector) return Zepto.Z () // Optimize for String SelectorSelse if (typeOf Selector == CollectionIf (! Selector) selector.trim () // Si es un fragmento html, crea nodos desde él // nota: tanto en Chrome como en Firefox, el error dom // se lanza si el fragmento no comienza con <if (selector [] == '<' && fragmentre.test (selector)) dom = zepto.fragment (selector, regexp. $, context), contexter = neco //selector//xpto. Colección en ese contexto primero, y seleccione // nodos desde elloeLse if (context! == Undefined) return $ (context) .find (selector) // Si se trata de un selector de CSS, úselo para seleccionar nodos.else dom = zepto.qsa (documento, selector)} // Si se da una función, llame cuando el domingo if if if (isfunction (selector)) return $ (documento). Se proporciona una colección ZEPTO, simplemente devuelva itelse if (zepto.isz (selector)) return SelectorLse {// normalizar matriz si se da una matriz de nodos (isArray (selector)) dom = compact (selector) // envolver doM nodos.else if (isObject (selector) doM = [selector], selector = null/ nul if (fragmentre.test (selector)) dom = zepto.fragment (selector.trim (), regexp. $, context), selector = null // Si hay un contexto, crea una colección en ese contexto primero, y seleccione // nodos de allí if (context! == Infined) return $ (context) .find (selector) // y último pero no mínimo, no es un csector, usa) a lo que iba, usa un selector, usa un selector, usa a él. nodos.else dom = zepto.qsa (documento, selector)} // Cree una nueva colección ZEPTO a partir de los nodos Foundreturn Zepto.z (DOM, Selector)}Lo anterior es el código fuente de Zepto. Puede ver que el autor ha realizado mucho procesamiento al prever los parámetros entrantes. De hecho, la previsibilidad proporciona varias entradas para el programa, nada más que algunos juicios lógicos. Zepto usa muchos juicios correctos e incorrectos aquí, lo que también conduce a la longitud del código y no es adecuado para la lectura. En resumen, la previsibilidad realmente requiere que escriba más parámetros para los objetos físicos en la ubicación. Cambiar la detección externa a la detección interna. Sí, las personas que lo usan son cómodas y felices de usarlo. ¡Ahora! Lo más importante en la vida es Heisen.
7. Comentarios y documentos legibilidad
La mejor interfaz es que la usaremos sin documentación, pero a menudo, una vez que el número de interfaces sea más y el negocio aumente, será un poco difícil de usar. Por lo tanto, los documentos y comentarios de la interfaz deben escribirse cuidadosamente. Los comentarios siguen el principio de simple y concisión, y son para aquellos que vienen años más tarde para mostrarles:
// Interfaz de anotación, para demostrar PPT, use la función Commentary () {// Si define una variable sin significado literal, es mejor escribir un comentario para él: A: Variable inútil, puede eliminar var a; // escribir comentarios en la clave y la ambigüedad, al igual que el toque de acabado: borrar todos los datos después de enrutar a la interfaz hash. Return go.navigate ('hash', function () {data.clear ();});}por fin
Se recomienda marcar documentos API de escritura de gramática y la sintaxis de escritura de documentos reales de GitHub. Simple y rápido, el código se resalta y no se dice mucho.
Lo anterior es la descripción completa de los principios de diseño de la API de JavaScript presentados por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!