Sobre avalonjs
Avalon es un marco MINI MVVM simple y fácil de usar. Se publicó por primera vez en 2012.09.15 y se desarrolló para resolver la existencia de varias opiniones de la misma lógica comercial. De hecho, este problema se puede resolver simplemente utilizando plantillas generales de front-end y delegación de eventos jQuery, pero a medida que el negocio se expande, el código está lleno de varios selectores y devoluciones de llamada de eventos, que son difíciles de mantener. Por lo tanto, separar completamente los negocios de la lógica solo puede depender de la arquitectura. Lo primero que pensé fue MVC. Probé la columna vertebral, pero el código no cayó pero se levantó. Fue una oportunidad muy ocasional. Cuando me encontré con el WPF de Microsoft, la elegante arquitectura MVVM me atrajo inmediatamente. Creo que esta es la solución que siempre he seguido.
MVVM divide completamente todo el código frontal en dos partes, y el procesamiento de la vista se implementa a través de la unión (Angular tiene un sustantivo más frío llamado instrucciones), y la lógica comercial se concentra en objetos llamados VM. Mientras operemos los datos de la VM, sincronizará de forma natural y mágica a la vista. Obviamente, todos los misterios tienen su propia información privilegiada. C# se implementa a través de una declaración llamada atributos del accesor, también tiene js las cosas correspondientes. Gracias a Dios, IE8 presentó por primera vez esta cosa (Object.DefineProperty), pero desafortunadamente hay un error, pero ha llevado a otros navegadores a implementarlo, para que IE9+ pueda usarlo de manera segura. He estado buscando un IE anticuado durante mucho tiempo, pero realmente no pude hacerlo, así que usé VBScript para implementarlo.
La función de Object.defineProperty o VBS es convertir una determinada propiedad del objeto a un setter y getter. Solo necesitamos secuestrar estos dos métodos y podemos operar en secreto la vista a través del modo pub/sub. Para conmemorar la guía de WPF, nombré este proyecto después del nombre del código de desarrollo original de WPF Avalon. ¡Realmente puede ayudar al personal frontal a salir del mar del sufrimiento de Dom y a llegar al paraíso de los datos!
Fuera de tema:
Recientemente, me hice cargo de un proyecto y la parte delantera utiliza el marco MVVM de Avalon. Para las personas que han estado expuestas a Angularjs, siempre siente que Avalon sigue siendo "demasiado" liviano (no un cumplido)
El respaldo en línea de Avalon no es más que: hecho a nivel nacional, de tamaño pequeño, escapar de la operación dom, está en funcionamiento bajo y es compatible con IE6; La desventaja es: "Sin embargo, Avalon también tiene sus propias desventajas: es menos conocido", eh, quiero estar callado ...
Me quejé de que la transición de jQuery depende de selectores y operaciones DOM complicadas, pero los efectos de Ajax y la animación de Avalon aún tienen que confiar en otros controles. De hecho, a menudo se usan con jQuery. Me quejé de que jQuery es inseparable de jQuery. Realmente es una tragedia ... es muy difícil comenzar con Angular, es una baja dificultad para comenzar con NG, es una buena ecología, funciones poderosas, documentos y traducciones completas, comunidad madura y activa, y muchos complementos oficiales y complementos de terceros.
Problemas de rendimiento, para equilibrar la eficiencia y el rendimiento del desarrollo, esto es solo una cuestión de elección. Las personas que han usado NG no se preocuparán por los problemas de rendimiento y se quejarán de la compatibilidad de la versión angular. Pero Avalon todavía hizo una declaración como esta: "Nota: Las tres ramas anteriores son relativamente estables, pero no son compatibles entre sí. Se recomienda usar 2.0 directamente".
Lo anterior es solo para quejarse del respaldo de la redacción. Avalon también es un buen marco, y ha estado optimizando, mejorando y absorbiendo las ventajas de esos conocidos marcos MVVM. Por ejemplo, la versión 2.0 ha agregado 4 filtros de matriz, y las instrucciones también han ingresado a la lista de tareas.
Espero que cuando cualquiera que haya usado Angular venga a usar Avalon algún día, diga: ¡Oh, no está mal!
Comparta dos filtros muy simples: ocultar palabras clave y truncamiento de caracteres. También se puede migrar a Ng. También hay buenos filtros más tarde, y los agregaré.
Palabra clave: Avalon, personalizado, filtro, chino, caracteres largos, truncados, truncados, caracteres ocultos, angular
Ocultar palabras clave
Es posible que deba ocultar información clave en algunas páginas de la parte delantera (si realmente desea ocultarla, aún necesita manejarla en el extremo posterior), entonces puede usar:
/*** El código de clave En la cadena oculta, los caracteres ocultos son predeterminados a '*' ** Por ejemplo, el número de teléfono móvil oculto es: 1890000000 - 189 **** 0000; {{str | hide_code (3,4, '*')}}* @param str* @param position Position* @param Longitud Número de caracteres reemplazados* @param Newchar reemplazó caracteres/Strings* @returns {*}*/avalon.filters.hide_code = function (str, pos, longitud, newchar) {pos |||| 0; longitud = longitud || 0; newchar = newchar || '*'; if (pos <0 || longitud <= 0 || pos + longitud> str.length) {return str;} var repstr = ""; for (var i = 0; i <longitud; i ++) {repstr + = newchar;} return str.slice (0, pos) + repstr + str.slice (pos + longitud, str.length);}Truncamiento de personajes largos (cortado por carácter, cuenta china para dos caracteres - versión mejorada)
El filtro Truncado de Avalon original se interceptó de acuerdo con el hecho de que tanto chino como inglés ocupan un personaje. Este filtro se mejora para interceptar dos caracteres en chino y un personaje en inglés para interceptar
/*** truncar las cuerdas largas, cortar en la longitud del personaje, chino ocupa dos caracteres; {{str | truncatex (4, '...')}}* @param str* @param longitud, nueva longitud de cadena (calculada según los caracteres ingleses, un chino ocupa dos caracteres), número de caracteres que contienen truncion* @param truncation, campo al final de la nueva cadena* @retnss {return string}*/avalon.filter chino_pattern =/[/u4e00-/u9fa5] | [/ufe30-/uffa0]/gi; // [/u4e00-/u9fa5] representa caracteres chinos, [/ufe30-/uffa0] representa str = str || ""; longitud = longitud || 30; truncion = typeof truncion === "cadena"? Truncio: "..."; var chinoin = function (s) {return chino_pattern.exec (s)? verdadero: falso;}; var calculsize = function (fuente) {var strtemp = source.replace (chino_pattern, "aa"); return strtemp.length;}; var recursion = function (fuente, longitud) {if (calcsize (fuente) <= longitud || (! Chinain (fuente)) {return fource;} {return recursion (recursion (source) (longitud) 1), longitud);}}; var slicelength = longitud - truncation.length; return calcSize (str)> longitud? recursión (str.slice (0, slicelength), slicelength) + truncion: string (str);}Lo anterior es el conocimiento relevante sobre la intercepción de carácter largo chino de Avalon, la ocultación de carácter de palabras clave y filtros personalizados que se le presentan. 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!