À propos des avalonjs
Avalon est un mini-framework MVVM simple et facile à utiliser. Il a été publié pour la première fois sur 2012.09.15 et a été développé pour résoudre l'existence de diverses vues de la même logique métier. En fait, ce problème peut en fait être résolu simplement en utilisant des modèles frontaux généraux et une délégation d'événements JQuery, mais à mesure que l'entreprise se développe, le code est plein de différents sélecteurs et rappels d'événements, qui sont difficiles à maintenir. Par conséquent, la séparation complètement des entreprises de la logique ne peut s'appuyer que sur l'architecture. La première chose à laquelle j'ai pensé était MVC. J'ai essayé l'épine dorsale, mais le code n'est pas tombé mais Rose. C'était une opportunité très occasionnelle. Lorsque j'ai rencontré le WPF de Microsoft, l'élégante architecture MVVM m'a immédiatement attiré. Je pense que c'est la solution que j'ai toujours poursuivie.
MVVM divise complètement tout le code frontal en deux parties, et le traitement de la vue est implémenté par liaison (Angular a un nom plus frais appelé instructions), et la logique métier est concentrée dans des objets appelés VM. Tant que nous opérons les données de la machine virtuelle, elle se synchronisera naturellement et comme par magie avec la vue. De toute évidence, tous les mystères ont leurs propres informations intérieures. C # est implémenté via une instruction intitulée Attributs Accessor, donc JS a des choses correspondantes. Dieu merci, IE8 a d'abord introduit cette chose (object.defineproperty), mais malheureusement, il y a un bogue, mais il a conduit d'autres navigateurs à l'implémenter, donc IE9 + peut l'utiliser en toute sécurité. Je cherche à l'ancienne IE depuis longtemps, mais je ne pouvais vraiment pas le faire, alors j'ai utilisé VBScript pour l'implémenter.
La fonction de Object.DefineProperty ou VBS consiste à convertir une certaine propriété de l'objet en setter et getteur. Nous n'avons qu'à détourner ces deux méthodes et pouvons faire secrètement la vue via le mode pub / sous. Pour commémorer les directives de WPF, j'ai nommé ce projet après le nom de code de développement original de WPF Avalon. Cela peut vraiment aider le personnel frontal à sortir de la mer de souffrance de Dom et à venir au paradis des données!
Hors sujet:
Récemment, j'ai repris un projet et le frontal utilise le cadre MVVM d'Avalon. Pour les personnes qui ont été exposées à AngularJS, il estime toujours qu'Avalon est toujours "trop" léger (pas un compliment)
L'approbation en ligne d'Avalon n'est rien de plus: fabriquée au niveau national, de petite taille, échappe à l'opération DOM, est faible en fonctionnement et est compatible avec IE6; L'inconvénient est: "Cependant, Avalon a également ses propres inconvénients - il est moins connu", euh, je veux être silencieux ...
Je me suis plaint que la transition JQuery dépend des sélecteurs et des opérations DOM compliquées, mais les effets AJAX et d'animation d'Avalon doivent encore s'appuyer sur d'autres contrôles. En fait, ils sont souvent utilisés avec jQuery. Je me suis plaint que JQuery est inséparable de JQuery. C'est vraiment une tragédie ... il est très difficile de commencer avec Angular, c'est une faible difficulté de commencer avec NG, c'est une bonne écologie, des fonctions puissantes, des documents et des traductions complets, une communauté mature et active, et de nombreux plug-ins officiels et des plug-ins tiers.
Problèmes de performance, afin d'équilibrer l'efficacité et les performances du développement, ce n'est qu'une question de choix. Les personnes qui ont utilisé NG ne s'inquiéteront pas des problèmes de performances et se plaindront de la compatibilité des versions angulaires. Mais Avalon a toujours fait une déclaration comme celle-ci: "Remarque: Les trois branches ci-dessus sont relativement stables, mais elles ne sont pas compatibles entre elles. Il est recommandé d'utiliser directement 2.0."
Ce qui précède est simplement de se plaindre de l'approbation de la rédaction. Avalon est également un bon cadre et a optimisé, améliorant et absorbant les avantages de ces cadres MVVM bien connus. Par exemple, la version 2.0 a ajouté 4 filtres à tableau et les instructions ont également saisi la liste des to.
J'espère que lorsque quiconque a utilisé Angular arrive pour utiliser Avalon un jour, ils diront: Oh, ce n'est pas mal!
Partagez deux filtres très simples: masquez les mots clés et la troncature des caractères. Il peut également être migré vers NG. Il y a aussi de bons filtres plus tard, et j'y ajouterai.
Mot de clé: Avalon, personnalisé, filtre, chinois, caractères longs, tronqué, tronqué, caractères cachés, angulaire
Masquer les mots clés
Vous devrez peut-être masquer certaines informations clés sur certaines pages de l'avant (si vous voulez vraiment la cacher, vous devez toujours le gérer dans l'arrière), alors vous pouvez utiliser:
/ *** Le code clé dans la chaîne cachée, les caractères cachés sont par défaut à '*' ** Par exemple, le numéro de téléphone mobile caché est: 1890000000 - 189 **** 0000; {{str | hide_code (3,4, '*')}} * @param str * @param Pos Position de démarrage * @Param Longueur Nombre de caractères remplacés * @param newchar les caractères / chaînes * @returns {*} * / avalon.filters.hide_code = fonction (str, pose, longueur, newchar) {pos = pos || 0; longueur = longueur || 0; newchar = newChar || '*'; if (pos <0 || longueur <= 0 || pos + longueur> str.length) {return str;} var repSstr = ""; for (var i = 0; i <longueur; i ++) {repSstr + = newchar;} return str.slice (0, pos) + repSstr + str.slice (pos + longueur, str.length);}.Troncature de caractère long (tranché par caractère, chinois compte pour deux caractères - version améliorée)
Le filtre d'origine Avalon tronqué a été intercepté selon le fait que le chinois et l'anglais occupent un personnage. Ce filtre est amélioré pour intercepter deux caractères en chinois et un caractère en anglais pour intercepter
/ *** tronçons de longues cordes, coupées en longueur de caractère, le chinois occupe deux caractères; {gens chinois_pattern = / [/ u4e00- / u9fa5] | [/ ufe30- / uffa0] / gi; // [/ u4e00- / u9fa5] représente les caractères chinois, [/ ufe30- / uffa0] représente la pleine bande Str = Str || ""; longueur = longueur || 30; troncature = type de troncature === "String"? troncature: "..."; var chinoisin = fonction (s) {return chinois_pattern.exec (s)? Vrai: false;}; var calcSize = function (source) {var strTemp = source.replace (chinois_pattern, "aa"); return strTemp.length;}; var recursion = function (source, longueur) {if (calcSize (source) <= longueur || (! chinoisin (source)) {return source -} else {return recursion (Source.slice (0, Source. 1), longueur);}}; var scicenglefther = longueur - troncature.length; return calcSize (str)> longueur? Recursion (str.slice (0, scicengle), slicelngth) + troncature: string (str);}Ce qui précède est la connaissance pertinente sur l'interception longue chinoise des caractères chinois, la cachette de caractère de mots clés et les filtres personnalisés qui vous sont présentés. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!