เกี่ยวกับ avalonjs
Avalon เป็นเฟรมเวิร์ก MINI 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 มันสามารถช่วยให้บุคลากรส่วนหน้าออกจากทะเลแห่งความทุกข์ทรมานของ DOM และมาถึงสวรรค์ของข้อมูล!
นอกหัวข้อ:
เมื่อเร็ว ๆ นี้ฉันเข้าร่วมโครงการและส่วนหน้าใช้กรอบ MVVM ของ Avalon สำหรับคนที่สัมผัสกับ AngularJs มันมักจะรู้สึกว่า Avalon ยังคง "เบาเกินไป" (ไม่ใช่คำชม)
การรับรองออนไลน์ของ Avalon นั้นไม่มีอะไรมากไปกว่า: ทำในประเทศขนาดเล็กขนาดเล็กหลบหนีการทำงานของ DOM มีการใช้งานต่ำและเข้ากันได้กับ IE6; ข้อเสียคือ: "อย่างไรก็ตาม Avalon ยังมีข้อเสียของตัวเอง - มันเป็นที่รู้จักกันดีน้อยกว่า" เอ่อฉันอยากจะเงียบ ...
ฉันบ่นว่าการเปลี่ยนแปลง jQuery ขึ้นอยู่กับตัวเลือกและการดำเนินงาน DOM ที่ซับซ้อน แต่ Ajax และเอฟเฟกต์แอนิเมชั่นของ Avalon ยังคงต้องพึ่งพาการควบคุมอื่น ๆ ในความเป็นจริงพวกเขามักจะใช้กับ jQuery ฉันบ่นว่า jQuery แยกออกจาก jQuery มันเป็นโศกนาฏกรรมจริงๆ ... มันยากมากที่จะเริ่มต้นกับเชิงมุมมันเป็นเรื่องยากในการเริ่มต้นกับ NG มันเป็นนิเวศวิทยาที่ดีฟังก์ชั่นที่ทรงพลังเอกสารที่สมบูรณ์และการแปลชุมชนที่เป็นผู้ใหญ่และใช้งานอยู่และปลั๊กอินอย่างเป็นทางการและปลั๊กอินของบุคคลที่สาม
ปัญหาด้านประสิทธิภาพเพื่อสร้างสมดุลระหว่างประสิทธิภาพการพัฒนาและประสิทธิภาพนี่เป็นเพียงเรื่องของทางเลือก ผู้ที่ใช้ NG จะไม่ต้องกังวลเกี่ยวกับปัญหาด้านประสิทธิภาพและบ่นเกี่ยวกับความเข้ากันได้ของเวอร์ชันเชิงมุม แต่ Avalon ยังคงสร้างคำสั่งเช่นนี้: "หมายเหตุ: สามสาขาข้างต้นค่อนข้างเสถียร แต่พวกเขาไม่สามารถใช้งานร่วมกันได้แนะนำให้ใช้ 2.0 โดยตรง"
ข้างต้นเป็นเพียงการบ่นเกี่ยวกับการรับรองการเขียนคำโฆษณา Avalon ยังเป็นกรอบที่ดีและได้รับการปรับปรุงปรับปรุงและดูดซับข้อดีของกรอบ MVVM ที่รู้จักกันดีเหล่านั้น ตัวอย่างเช่นเวอร์ชัน 2.0 ได้เพิ่มตัวกรองอาร์เรย์ 4 ตัวและคำแนะนำได้ป้อนรายการสิ่งที่ต้องทำ
ฉันหวังว่าเมื่อใครก็ตามที่ใช้ Angular มาใช้ Avalon วันหนึ่งพวกเขาจะพูดว่า: โอ้มันไม่เลวเลย!
แบ่งปันสองตัวกรองง่าย ๆ : ซ่อนคำหลักและการตัดทอนอักขระ นอกจากนี้ยังสามารถอพยพไปยัง NG นอกจากนี้ยังมีตัวกรองที่ดีในภายหลังและฉันจะเพิ่มลงไป
คำสำคัญ: Avalon, Custom, Filter, Chinese, Long Intication, Truncate, ตัดทอน, ตัวละครที่ซ่อนอยู่, Angular
ซ่อนคำหลัก
คุณอาจต้องซ่อนข้อมูลสำคัญบางอย่างในบางหน้าของส่วนหน้า (หากคุณต้องการซ่อนไว้จริงๆคุณยังต้องจัดการกับมันในตอนท้าย) คุณสามารถใช้:
/*** รหัสคีย์ในสตริงที่ซ่อนเร้นอักขระที่ซ่อนอยู่เป็นค่าเริ่มต้นเป็น '*' ** ตัวอย่างเช่นหมายเลขโทรศัพท์มือถือที่ซ่อนอยู่คือ: 1890000000 - 189 **** 0000; {{str | hide_code (3,4, '*')}}* @param str* @param pos เริ่มตำแหน่ง* @param จำนวนอักขระแทนที่* @param newchar ตัวอักษรแทนที่/สตริง* @returns {*}*/avalon.filters.hide_code = ฟังก์ชั่น 0; ความยาว = ความยาว || 0; newchar = newchar || '*'; ถ้า (pos <0 || ความยาว <= 0 || pos + ความยาว> str.length) {return str;} var repstr = ""; สำหรับ (var i = 0; i <length; i ++) {repstr + = newchar;} str.slice (0, pos) + repstr + str.sliceการตัดทอนอักขระยาว (หั่นด้วยตัวละครบัญชีภาษาจีนสำหรับสองอักขระ - รุ่นปรับปรุง)
ตัวกรอง Avalon ที่ตัดทอนดั้งเดิมถูกสกัดกั้นตามความจริงที่ว่าทั้งจีนและภาษาอังกฤษครอบครองตัวละครหนึ่งตัว ตัวกรองนี้ได้รับการปรับปรุงให้สกัดกั้นตัวละครสองตัวในภาษาจีนและตัวละครหนึ่งตัวในภาษาอังกฤษเพื่อสกัดกั้น
/*** ตัดสายยาว, ตัดความยาวของตัวละคร, จีนครอบครองตัวละครสองตัว; {{str | truncatex (4, '... ')}}* @param str* @param ความยาวความยาวสตริงใหม่ (คำนวณตามอักขระภาษาอังกฤษหนึ่งตัวจีนมีตัวละครสองตัว) จำนวนอักขระที่มีการตัดทอน* @param truncation Chinese_Pattern =/[/U4E00-/U9FA5] | [/UFE30-/UFFA0]/GI; // [/U4E00-/U9FA5] แสดงถึงตัวละครจีน ""; ความยาว = ความยาว || 30; การตัดทอน = typeof truncation === "สตริง"? การตัดทอน: "... "; var Chinesein = function (s) {return chinese_pattern.exec? true: false;}; var calcsize = function (แหล่งที่มา) {var strtemp = source.replace (chinese_pattern, "aa"); return strtemp.length;}; var recursion = ฟังก์ชั่น (แหล่งที่มา) {if (calcsize (แหล่งที่มา) <= ความยาว 1), ความยาว);}}; var slicelength = length - truncation.length; return calcsize (str)> ความยาว? การเรียกซ้ำ (str.slice (0, slicelength), slicelength) + การตัดทอน: สตริง (str);}ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับการสกัดกั้นตัวละครยาวของ Avalon จีนการซ่อนอักขระคำหลักและตัวกรองที่กำหนดเองแนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!