حول Avalonjs
Avalon هو إطار MVVM صغير وسهل الاستخدام. تم نشره لأول مرة في 2012.09.15 وتم تطويره لحل وجود مختلف وجهات نظر من نفس منطق العمل. في الواقع ، يمكن في الواقع حل هذه المشكلة ببساطة عن طريق استخدام القوالب الأمامية العامة وتفويض أحداث jQuery ، ولكن مع توسيع نطاق الأعمال ، فإن الرمز مليء بمختلف المحددات وعمليات عروض أحداث ، والتي يصعب الحفاظ عليها. لذلك ، لا يمكن أن يعتمد فصل الأعمال تمامًا عن المنطق إلا على الهندسة المعمارية. أول شيء فكرت فيه هو MVC. حاولت العمود الفقري ، لكن الكود لم يسقط بل ارتفع. لقد كانت فرصة عرضية للغاية. عندما واجهت WPF من Microsoft ، جذبتني بنية MVVM الأنيقة على الفور. أعتقد أن هذا هو الحل الذي تابعته دائمًا.
يقسم MVVM بالكامل جميع التعليمات البرمجية الأمامية إلى جزأين ، ويتم تنفيذ معالجة العرض من خلال الربط (يحتوي Angular على اسم أكثر برودة يسمى التعليمات) ، ويتم تركيز منطق العمل في كائنات تسمى VMs. طالما أننا ندير بيانات VM ، فسيتم مزامنتها بشكل طبيعي وسحري مع العرض. من الواضح أن جميع الألغاز لها معلومات داخلية خاصة بها. يتم تنفيذ C# من خلال بيان يسمى سمات Accessor ، وكذلك JS لديها أي أشياء مقابلة. الحمد لله ، قدم IE8 هذا الشيء لأول مرة (Object.DefineProperty) ، ولكن للأسف هناك خطأ ، لكنه دفع متصفحات أخرى لتنفيذها ، لذلك يمكن أن تستخدمه IE9+ بأمان. لقد كنت أبحث عن IE من الطراز القديم لفترة طويلة ، لكنني لم أستطع فعل ذلك ، لذلك استخدمت VBScript لتنفيذها.
تتمثل وظيفة Object.DefineProperty أو VBS في تحويل خاصية معينة من الكائن إلى Setter و Getter. نحتاج فقط إلى اختطاف هاتين الطريقتين ويمكننا تشغيل العرض سراً من خلال الوضع/الوضع الفرعي. للاحتفال بتوجيهات WPF ، قمت بتسمية هذا المشروع بعد اسم رمز التطوير الأصلي لـ WPF Avalon. يمكن أن تساعد الموظفين في الواجهة الأمامية على الخروج من بحر معاناة دوم والوصول إلى جنة البيانات!
خارج الموضوع:
في الآونة الأخيرة ، استولت على مشروع وتستخدم الواجهة الأمامية إطار عمل MVVM في أفالون. بالنسبة للأشخاص الذين تعرضوا لـ AngularJS ، يشعر دائمًا أن Avalon لا يزال خفيف الوزن (وليس مجاملة)
إن تأييد Avalon عبر الإنترنت ليس أكثر من: مصنوع محليًا ، صغير الحجم ، يهرب من عملية DOM ، وهو منخفض في التشغيل ، وهو متوافق مع IE6 ؛ العيب هو: "ومع ذلك ، فإن Avalon لها أيضًا عيوبها الخاصة - إنها أقل شهرة" ، أه ، أريد أن أكون هادئًا ...
لقد اشتكت من أن انتقال jQuery يعتمد على المحددات وعمليات DOM المعقدة ، ولكن لا يزال يتعين على آثار Ajax و Animation Avalon الاعتماد على عناصر التحكم الأخرى. في الواقع ، غالبا ما تستخدم مع jQuery. اشتكت من أن jQuery لا ينفصل عن jQuery. إنها حقًا مأساة ... من الصعب للغاية البدء مع Angular ، إنها صعوبة منخفضة في البدء مع NG ، إنها بيئة جيدة ، وظائف قوية ، ووثائق كاملة وترجمات ، ومجتمع ناضج ونشط ، والكثير من المكونات الإضافية الرسمية والمكونات الإضافية لجهة خارجية.
مشكلات الأداء ، من أجل تحقيق التوازن بين كفاءة التنمية والأداء ، هذه مجرد مسألة اختيار. لن يقلق الأشخاص الذين استخدموا NG بشأن مشكلات الأداء ويشكون من توافق الإصدار الزاوي. لكن Avalon لا يزال بإجراء بيان مثل هذا: "ملاحظة: الفروع الثلاثة أعلاه مستقرة نسبيًا ، لكنها غير متوافقة مع بعضها البعض. يوصى باستخدام 2.0 مباشرة."
ما سبق فقط للشكوى من تأييد كتابة النصوص. يعد Avalon أيضًا إطارًا جيدًا ، وقد تم تحسينه وتحسين وامتصاص مزايا أطر MVVM المعروفة. على سبيل المثال ، أضاف الإصدار 2.0 4 مرشحات صفيف ، كما أدخلت الإرشادات قائمة المهام.
آمل أنه عندما يأتي أي شخص يستخدم Angular لاستخدام Avalon في يوم من الأيام ، سيقولون: أوه ، هذا ليس سيئًا!
شارك اثنين من المرشحين البسيطين للغاية: إخفاء الكلمات الرئيسية وقطعة الأحرف. يمكن أيضًا ترحيلها إلى نانوغرام. هناك أيضًا مرشحات جيدة لاحقًا ، وسأضيفها إليها.
الكلمة الرئيسية: أفالون ، مخصص ، مرشح ، صيني ، أحرف طويلة ، مقطوعة ، اقتطاع ، أحرف خفية ، زاوي
إخفاء الكلمات الرئيسية
قد تحتاج إلى إخفاء بعض المعلومات الرئيسية على بعض صفحات الواجهة الأمامية (إذا كنت ترغب حقًا في إخفاءها ، فلا تزال بحاجة إلى التعامل معها في النهاية الخلفية) ، ثم يمكنك استخدام:
/*** رمز المفتاح في السلسلة المخفية ، تكون الأحرف المخفية افتراضية لـ '*' ** على سبيل المثال ، رقم الهاتف المحمول المخفي هو: 1890000000 - 189 **** 0000 ؛ {{str | hide_code (3،4 ، '*')}}}* param str* param pos position* param طول عدد الأحرف المستبدلة* param newchar أحرف/strings* returns {*}*/avalon.filters 0 ؛ الطول = الطول || 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 + mength ، str.length) ؛اقتطاع حرف طويل (شرائح من الحرف ، حساب صيني لحرفتين - نسخة محسنة)
تم اعتراض مرشح Avalon الأصلي المقتطف وفقًا لحقيقة أن كل من الصينيين والإنجليزية يحتلان شخصية واحدة. تم تحسين هذا المرشح لاعتراض حرفين باللغة الصينية وشخصية واحدة باللغة الإنجليزية للاعتراض
/*** اقتطاع السلاسل الطويلة ، مقطوعة في طول الشخصية ، الصينية تشغل حرفين ؛ {{str | truncatex (4 ، '...')}}}* param str* param طول ، طول سلسلة جديدة (محسوبة وفقًا للأحرف الإنجليزية ، يحتل الصينيون حرفين) ، عدد الأحرف التي تحتوي على اقتطاع* @param ، الحقل في نهاية السلسلة الجديدة* returns {return} تمثل invaling_pattern =/[/u4e00-/u9fa5] | "" ؛ الطول = الطول || 30 ؛ اقتطاع = typeof اقتطاع === "سلسلة"؟ اقتطاع: "..." ؛ var invaliinin = function (s) {return invale_pattern.exec (s)؟ صحيح: خطأ ؛ false ؛} ؛ var calcsize = function (source) {var strtemp = source.replace (invale_pattern ، "aa") ؛ return strtemp.length ؛} ؛ var recursion = function (source ، length) {if (calcize (source) <= length || 1) ، الطول) ؛}} ؛ var slicelength = الطول - truncation.length ؛ إرجاع calcsize (str)> الطول؟ عودة (str.slice (0 ، slicelength) ، slicelength) + اقتطاع: سلسلة (str) ؛}ما سبق هو المعرفة ذات الصلة حول اعتراض الطابع الطويل Avalon الصيني ، واختباء أحرف الكلمات الرئيسية ، والمرشحات المخصصة المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!