Avalonjsについて
Avalonは、シンプルで使いやすいミニMVVMフレームワークです。 2012.09.15に最初に公開され、同じビジネスロジックのさまざまな見解の存在を解決するために開発されました。実際、この問題は、一般的なフロントエンドテンプレートとjQueryイベント委任を使用するだけで実際に解決できますが、ビジネスが拡大するにつれて、コードはさまざまなセレクターとイベントコールバックでいっぱいです。したがって、ビジネスを完全にロジックから分離することは、アーキテクチャにのみ依存することができます。私が考えた最初のことはMVCでした。私はバックボーンを試しましたが、コードは落ちませんでしたが、上昇しました。それは非常に時折の機会でした。 MicrosoftのWPFに遭遇したとき、エレガントなMVVMアーキテクチャがすぐに私を惹きつけました。これは私がいつも追求してきた解決策だと思います。
MVVMはすべてのフロントエンドコードを2つの部分に完全に分割し、ビューの処理はバインディングによって実装され(Angularには命令と呼ばれるクーラー名詞があります)、ビジネスロジックはVMSと呼ばれるオブジェクトに集中します。 VMのデータを操作している限り、それは自然に魔法のようにビューに同期します。明らかに、すべてのミステリーには独自の内部情報があります。 C#は、アクセサア属性と呼ばれるステートメントを通じて実装されているため、JSには対応するものがあります。神に感謝します、IE8は最初にこのこと(Object.defineProperty)を紹介しましたが、残念ながらバグがありますが、他のブラウザがそれを実装するようになったので、IE9+は安全に使用できます。私は長い間昔ながらのIEを探していましたが、本当にできなかったので、VBScriptを使用して実装しました。
Object.DefinePropertyまたはVBSの機能は、オブジェクトの特定のプロパティをセッターとゲッターに変換することです。これら2つの方法をハイジャックするだけで、パブ/サブモードを介してビューを密かに操作できます。 WPFのガイダンスを記念するために、WPFの元の開発コード名Avalonにちなんでこのプロジェクトに名前を付けました。それは、フロントエンドの担当者がドムの苦しみの海から出て、データの楽園に来るのを本当に助けることができます!
オフトピック:
最近、私はプロジェクトを引き継ぎ、フロントエンドはAvalonのMVVMフレームワークを使用しています。 Angularjsにさらされた人にとって、Avalonはまだ「あまりにも」軽量であると感じています(賛辞ではありません)
Avalonのオンライン承認は次のとおりです。国内で作られ、サイズが小さく、DOMの操作が少なく、操作が少なく、IE6と互換性があります。欠点は、「しかし、アバロンには独自の不利な点もあります - それはあまり知られていません」、ええと、私は静かになりたいです...
jQueryの移行はセレクターと複雑なDOM操作に依存しているが、AvalonのAjaxとアニメーションの効果は他のコントロールに依存する必要があると不満を述べました。実際、それらはjqueryでよく使用されます。私は、jQueryがjqueryと切り離せないと不満を言いました。それは本当に悲劇です... Angularを始めることは非常に困難であり、NGを始めるのが非常に困難であり、それは優れた生態学、強力な機能、完全な文書と翻訳、成熟したアクティブなコミュニティ、そして多くの公式プラグインとサードパーティのプラグインです。
パフォーマンスの問題は、開発の効率とパフォーマンスのバランスをとるために、これは選択の問題です。 NGを使用した人は、パフォーマンスの問題を心配せず、角度バージョンの互換性について不平を言うでしょう。しかし、アバロンはまだ次のような声明を出しました:「注:上記の3つの枝は比較的安定していますが、互いに互換性がありません。2.0を直接使用することをお勧めします。」
上記は、コピーライティングの承認について不平を言うことです。 Avalonは優れたフレームワークでもあり、有名なMVVMフレームワークの利点を最適化、改善、吸収しています。たとえば、2.0バージョンには4つの配列フィルターが追加されており、命令もTo Doリストに入力されています。
Angularを使用した人がいつかAvalonを使用するようになると、彼らが言うことを願っています:ああ、それは悪くない!
2つの非常にシンプルなフィルターを共有します。キーワードとキャラクターの切り捨てを非表示にします。また、Ngに移行することもできます。後で良いフィルターもあり、それらを追加します。
キーワード:アバロン、カスタム、フィルター、中国語、長い文字、切り捨て、切り捨て、隠されたキャラクター、角度
キーワードを非表示にします
フロントエンドのいくつかのページにいくつかの重要な情報を非表示にする必要があるかもしれません(本当に非表示にしたい場合は、バックエンドでそれを処理する必要があります)、次を使用できます。
/***非表示の文字列のキーコード、非表示の文字はデフォルトで「*」**になります。たとえば、非表示の携帯電話番号は1890000000-189 **** 0000です。 {{str | hide_code(3,4、 '*')}}* @param str* @param pos start position* @param length文字数交換* @param newchar交換* @returns {*}*/avalon.filters.hide_code = function(str、pos、new pos || 0; length = length || 0; newChar = newChar || '*'; if(pos <0 || length <= 0 || pos + length> str.length){return str;} var repstr = ""; for(var i = 0; i <length; i ++){repstr + = newchar;} return str.slice(0、pos) + repstr + str.slice(pos + length);}}長いキャラクターの切り捨て(キャラクターによってスライスされ、2人のキャラクターの中国語アカウント - 改良バージョン)
元のAvalon Truncateフィルターは、中国語と英語の両方が1人のキャラクターを占めるという事実に従って傍受されました。このフィルターは、中国語で2人のキャラクターと英語の1文字を傍受するために傍受するために改善されます
/***長い文字列を切り捨て、文字の長さを切り、中国人は2人のキャラクターを占めます。 {{str | truncatex(4、 '...')}}* @param str* @param length、new string length(英語文字に応じて計算され、1人の中国人が2文字を占める)、トランケーション* @param truncation、new string of the new string* @returns {return new string = rung = struncex. {var hisshin_pattern =/[/u4e00-/u9fa5] | [/ufe30-/uffa0]/gi; // [/u4e00-/u9fa5]は漢字を表します。 ""; length = length || 30; Truncation = Typeof Truncation === "String"?トランケーション: "..."; var中国語= function(s){return hisshn_pattern.exec(s)? true:false;}; var calcsize = function(source){var strtemp = source.replace(shine_pattern、 "aa"); return strtemp.length;}; var recursion = function(source(source(source){if(calcsize(source)<= length ||(!surceinin(!source)){return source(0、source(0、recurs)) 1)、長さ);}}; var slicelength = length -truncation.length; return calcsize(str)> length?再帰(str.slice(0、slicelength)、slicelength) + truncation:string(str);}上記は、Avalon Chinese Chinese Character Interception、キーワード文字の隠れ、および紹介されたカスタムフィルターに関する関連する知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!