Sobre Avalonjs
O Avalon é uma estrutura Mini MVVM simples e fácil de usar. Foi publicado pela primeira vez em 2012.09.15 e foi desenvolvido para resolver a existência de várias visões da mesma lógica de negócios. De fato, esse problema pode realmente ser resolvido simplesmente usando modelos gerais de front-end e delegação de eventos jQuery, mas à medida que os negócios se expandem, o código está cheio de vários seletores e retornos de chamada de eventos, difíceis de manter. Portanto, separar completamente os negócios da lógica pode confiar apenas na arquitetura. A primeira coisa que pensei foi o MVC. Eu tentei backbone, mas o código não caiu, mas Rose. Foi uma oportunidade muito ocasional. Quando encontrei o WPF da Microsoft, a elegante arquitetura MVVM imediatamente me atraiu. Eu acho que esta é a solução que sempre persegui.
O MVVM divide completamente todo o código front-end em duas partes, e o processamento da exibição é implementado por meio de ligação (o Angular possui um substantivo mais frio chamado instruções) e a lógica de negócios está concentrada em objetos chamados VMs. Enquanto operarmos os dados da VM, eles serão sincronizados naturalmente e magicamente com a visualização. Obviamente, todos os mistérios têm suas próprias informações internas. O C# é implementado por meio de uma declaração chamada atributos de acessórios, assim como JS tem coisas correspondentes. Graças a Deus, o IE8 introduziu essa coisa (Object.DefineProperty), mas infelizmente há um bug, mas ele levou outros navegadores a implementá -lo, para que o IE9+ possa usá -lo com segurança. Eu tenho procurado por um antiquado IE há muito tempo, mas realmente não consegui fazê-lo, então usei o VBScript para implementá-lo.
A função do object.DefineProperty ou VBS é converter uma certa propriedade do objeto em um setter e getter. Precisamos apenas seqüestrar esses dois métodos e podemos operar secretamente a visão através do modo pub/sub. Para comemorar as orientações do WPF, nomeei este projeto em homenagem ao nome original do Código de Desenvolvimento da WPF Avalon. Pode realmente ajudar o pessoal do front-end a sair do mar do sofrimento de DOM e chegar ao paraíso dos dados!
Fora do tópico:
Recentemente, assumi um projeto e o front -end usa a estrutura MVVM de Avalon. Para as pessoas que foram expostas a AngularJs, sempre sente que Avalon ainda é "demais" leve (não é um elogio)
O endosso on -line de Avalon nada mais é do que: o tamanho pequeno, pequeno em tamanho, escape a operação DOM, tem baixo teor de operação e é compatível com o IE6; A desvantagem é: "No entanto, Avalon também tem suas próprias desvantagens - é menos conhecido", eu quero ficar quieto ...
Reclamei que a transição do jQuery depende de seletores e operações com complicadas do DOM, mas os efeitos de Ajax e animação de Avalon ainda precisam confiar em outros controles. De fato, eles são frequentemente usados com jQuery. Reclamei que o jQuery é inseparável do jQuery. É realmente uma tragédia ... é muito difícil começar com o Angular, é uma baixa dificuldade em começar com NG, é uma boa ecologia, funções poderosas, documentos e traduções completos, comunidade madura e ativa e muitos plug-ins oficiais e plug-ins de terceiros.
Questões de desempenho, para equilibrar a eficiência e o desempenho do desenvolvimento, isso é apenas uma questão de escolha. As pessoas que usaram NG não se preocuparão com problemas de desempenho e reclamam da compatibilidade da versão angular. Mas Avalon ainda fez uma declaração como esta: "Nota: os três ramos acima são relativamente estáveis, mas não são compatíveis entre si. Recomenda -se usar 2.0 diretamente".
O exposto acima é apenas reclamar do endosso da redação. O Avalon também é uma boa estrutura e vem otimizando, melhorando e absorvendo as vantagens dessas estruturas MVVM conhecidas. Por exemplo, a versão 2.0 adicionou 4 filtros de matriz e as instruções também inseriram a lista de tarefas.
Espero que, quando quem usou o Angular venha usar Avalon um dia, eles dirão: ah, não é ruim!
Compartilhe dois filtros muito simples: ocultar palavras -chave e truncamento de caráter. Também pode ser migrado para Ng. Há também bons filtros depois, e eu os adicionarei a ele.
Palavra -chave: Avalon, personalizado, filtro, chinês, personagens longos, truncados, truncados, ocultos, angular
Ocultar palavras -chave
Pode ser necessário esconder algumas informações importantes em algumas páginas do front -end (se você realmente quiser escondê -las, ainda precisa lidar com isso no back -end), então você pode usar:
/*** O código -chave na sequência oculta, os caracteres ocultos são padrão para '*' **, por exemplo, o número de telefone celular oculto é: 1890000000 - 189 **** 0000; {{str | hide_code (3,4, '*')}}* @param str* @param pos posição* @param comprimento número de caracteres substituídos* @param newchar caracteres/strings* @returns {*}*/avalon.filters.hide_code = função (str, post, comprimento, newchar). 0; comprimento = comprimento || 0; newchar = newchar || '*'; if (pos <0 || comprimento <= 0 || pos + comprimento> str.length) {return str;} var repstr = ""; para (var i = 0; i <comprimento; i ++) {repst + = newchar;} retorna str.slice (0, pos) + rep + str.lice (pós + comprimento, str.llt);Longo truncamento de caráter (cortado pelo personagem, chinês representam dois caracteres - versão aprimorada)
O filtro original de Avalon Truncate foi interceptado de acordo com o fato de que o chinês e o inglês ocupam um personagem. Este filtro é aprimorado para interceptar dois caracteres em chinês e um personagem em inglês para interceptar
/*** truncam cordas longas, cortadas no comprimento do personagem, o chinês ocupa dois caracteres; {{str | truncatex (4, '...')}}* @param str* @param Comprimento, novo comprimento da string (calculado de acordo com caracteres em inglês, um chinês ocupa dois caracteres), número de caracteres que contêm truncation* @param truncation, campo no final da nova string* @RETURNS {return string}*/avalon.ilter chinês_pattern =/[/u4e00-/u9fa5] | [/ufe30-/ufffa0]/gi; // [/u4e00-/u9fa5] representa caracteres chineses, [/ufe30-/uffa0] representa str = str || ""; comprimento = comprimento || 30; truncamento = tipoof truncation === "string"? truncation: "..."; var chinês = função (s) {return chines_pattern.exec (s)? true: false;}; var calcsize = function (fonte) {var strTemp = fonte.Replace (chinês_pattern, "aa"); retorna strtemp.length;}; var recursion = function (fonte de origem) {if (calcsize (fonte) <= ||! (! comprimento);}}; var sliceLength = comprimento - truncation.length; retornar calcesize (str)> comprimento? Recursão (str.slice (0, comprimento de sliceL), comprimento de sliceL) + truncamento: string (str);}O exposto acima é o conhecimento relevante sobre a interceptação de caráter chinês Avalon, ocultação de caráter de palavras -chave e filtros personalizados apresentados a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!