Über Avalonjs
Avalon ist ein einfaches und benutzerfreundliches Mini-MVVM-Framework. Es wurde erstmals am 2012.09.15 veröffentlicht und entwickelt, um die Existenz verschiedener Ansichten derselben Geschäftslogik zu lösen. Tatsächlich kann dieses Problem tatsächlich durch die Verwendung allgemeiner Front-End-Vorlagen und JQuery-Ereignisdelegation gelöst werden. Wenn das Geschäft erweitert wird, ist der Code voller Selektoren und Ereignisanlagen, die schwer zu warten sind. Daher kann die vollständige Trennung des Geschäfts von der Logik nur auf Architektur beruhen. Das erste, woran ich dachte, war MVC. Ich habe Backbone ausprobiert, aber der Code fiel nicht, sondern Rose. Es war eine sehr gelegentliche Gelegenheit. Als ich auf Microsofts WPF stieß, zog mich die elegante MVVM -Architektur sofort an. Ich denke, das ist die Lösung, die ich immer verfolgt habe.
MVVM unterteilt alle Front-End-Code vollständig in zwei Teile, und die Verarbeitung der Ansicht wird durch Bindung implementiert (Angular hat ein kühleres Substantiv mit dem Namen Anweisungen), und die Geschäftslogik konzentriert sich auf Objekte, die als VMS bezeichnet werden. Solange wir die Daten des VM betreiben, wird sie natürlich und magisch mit der Ansicht synchronisieren. Offensichtlich haben alle Geheimnisse ihre eigenen Insiderinformationen. C# wird über eine Anweisung namens Accessor -Attribute implementiert, ebenso wie JS haben JS irgendwelche entsprechenden Dinge. Gott sei Dank hat IE8 dieses Ding zuerst vorgestellt (Object.DefineProperty), aber leider gibt es einen Fehler, aber es hat andere Browser dazu veranlasst, es umzusetzen, sodass IE9+ es sicher verwenden kann. Ich habe lange nach altmodischem IE gesucht, aber ich konnte es wirklich nicht tun, also habe ich VBSScript verwendet, um es zu implementieren.
Die Funktion von Object.DefineProperty oder VBS besteht darin, eine bestimmte Eigenschaft des Objekts in einen Setter und Getter umzuwandeln. Wir müssen diese beiden Methoden nur entführen und können die Ansicht heimlich über den Pub/Sub -Modus bedienen. Um die Anleitung von WPF zu erinnern, habe ich dieses Projekt nach dem ursprünglichen Entwicklungskodennamen von WPF Avalon benannt. Es kann wirklich helfen, Front-End-Personal aus dem Meer des Leidens von DOM herauszuholen und zum Paradies der Daten zu kommen!
Off -Thema:
Kürzlich habe ich ein Projekt übernommen und das Front End verwendet das MVVM -Framework von Avalon. Für Menschen, die AngularJs ausgesetzt waren, ist es immer der Ansicht, dass Avalon immer noch "zu" leicht ist (kein Kompliment).
Die Online -Bestätigung von Avalon ist nichts anderes als: im Inland hergestellt, kleiner Größe, dem Dom -Betrieb, ist gering in Betrieb und ist mit IE6 kompatibel. Der Nachteil lautet: "Avalon hat jedoch auch seine eigenen Nachteile - es ist weniger bekannt", ähm, ich möchte ruhig sein ...
Ich beschwerte mich darüber, dass JQuery -Übergang von Selektoren und komplizierten DOM -Operationen abhängt, aber Ajax- und Animationseffekte von Avalon müssen sich immer noch auf andere Steuerelemente verlassen. Tatsächlich werden sie oft mit JQuery verwendet. Ich beschwerte mich, dass JQuery untrennbar mit JQuery verbunden ist. Es ist wirklich eine Tragödie ... es ist sehr schwierig, mit Angular zu beginnen, es ist eine geringe Schwierigkeit, mit NG zu beginnen. Es ist eine gute Ökologie, leistungsstarke Funktionen, vollständige Dokumente und Übersetzungen, reife und aktive Gemeinschaft und viele offizielle Plug-Ins und Drittanbieter-Plug-Ins.
Leistungsprobleme, um die Entwicklung von Effizienz und Leistung der Entwicklung in Einklang zu bringen, ist dies nur eine Frage der Wahl. Personen, die NG verwendet haben, machen sich keine Sorgen um Leistungsprobleme und beschweren sich über die Kompatibilität der Winkelversion. Aber Avalon gab immer noch eine Aussage wie folgt ab: "Hinweis: Die obigen drei Zweige sind relativ stabil, aber sie sind nicht miteinander kompatibel. Es wird empfohlen, 2.0 direkt zu verwenden."
Das Obige ist nur, um sich über die Bestätigung des Textens zu beschweren. Avalon ist auch ein guter Rahmen und hat die Vorteile dieser bekannten MVVM-Frameworks optimiert, verbessert und absorbiert. Beispielsweise hat 2.0 Version 4 Array -Filter hinzugefügt, und die Anweisungen haben auch die TO -DO -Liste eingegeben.
Ich hoffe, wenn jemand, der Angular verwendet hat, eines Tages Avalon verwendet, werden er sagen: Oh, es ist nicht schlecht!
Teilen Sie zwei sehr einfache Filter: Schlüsselwörter ausblenden und Zeichenkürzungen. Es kann auch auf NG migriert werden. Es gibt auch gute Filter später und ich werde sie dazu hinzufügen.
Schlüsselwort: Avalon, Custom, Filter, Chinesisch, lange Zeichen, verkürzt, verkürzt, versteckte Zeichen, Angular
Schlüsselwörter ausblenden
Möglicherweise müssen Sie einige wichtige Informationen auf einigen Seiten des Frontends ausblenden (wenn Sie sie wirklich verbergen möchten, müssen Sie es immer noch im hinteren Ende verarbeiten), dann können Sie verwenden:
/*** Der Schlüsselcode in der versteckten Zeichenfolge ist die versteckten Zeichen standardmäßig '*' ** Die versteckte Handynummer lautet: 1890000000 - 189 **** 0000; {oder 0; Länge = Länge || 0; newChar = newChar || '*'; if (pos <0 || Länge <= 0 || POS + Länge> str.Length) {return str;} var repstr = ""; für (var i = 0; i <Länge; i ++) {repstr + = newchar;} return str.slice (0, pos) + repstr + str.slice (pos + längeLanger Zeichenkürzung (durch Charakter geschnitten, berichten Chinesisch für zwei Zeichen - Verbesserte Version)
Der ursprüngliche Filter mit Avalon -Truncate wurde nach der Tatsache abgefangen, dass sowohl Chinese als auch Englisch einen Charakter besetzen. Dieser Filter wird verbessert, um zwei Charaktere auf Chinesisch und einen Charakter auf Englisch abzufangen, um abzufangen
/*** Lange Saiten, die in der Charakterlänge geschnitten werden, nimmt Chinesen zwei Zeichen ein; oder CHITEL_PATTERN =/[/U4E00-/U9FA5] | [/ufe30-/uffa0]/gi; // [/u4e00-/u9fa5] repräsentiert chinesische Zeichen, [/ufe30-/uffa0] repräsentiert die volle Widthen Str = Str || ""; Länge = Länge || 30; Trinkation = typeof truncation === "String"? Kürzung: "..."; var chinesine = function (s) {return chinese_pattern.exec (s)? Richtig: false;}; var calcSize = Funktion (Quelle) {var strTemp = source.replace (chinesische_pattern, "aa"); return Strtemp.Length;}; var recursion = function (Quelle, Länge) {if (calcsize) <= Länge || (Quelle). 1), Länge);}}; var Slicelength = Länge - Truncation.Length; CalcSize (str) Länge? Rekursion (STR.Slice (0, Slicelength), Slicelength) + Tripation: String (str);}Das obige ist das relevante Wissen über Avalon Chinese Long Character Interception, Keyword -Charakter -Versteck und benutzerdefinierte Filter, die Ihnen vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!