Avalonjs에 대해
Avalon은 간단하고 사용하기 쉬운 미니 MVVM 프레임 워크입니다. 그것은 2012.09.15에 처음 출판되었으며 동일한 비즈니스 논리의 다양한 견해를 해결하기 위해 개발되었습니다. 실제로이 문제는 일반적인 프론트 엔드 템플릿 및 jQuery 이벤트 대표단을 사용하여 간단히 해결할 수 있지만 비즈니스가 확장됨에 따라 코드는 다양한 선택기 및 이벤트 콜백으로 가득 차있어 유지하기가 어렵습니다. 따라서 비즈니스를 논리에서 완전히 분리하면 아키텍처에만 의존 할 수 있습니다. 내가 가장 먼저 생각한 것은 MVC였습니다. 백본을 시도했지만 코드는 떨어지지 않고 상승했습니다. 매우 가끔 기회였습니다. Microsoft의 WPF를 만났을 때 우아한 MVVM 아키텍처가 즉시 나를 끌어 들였습니다. 나는 이것이 내가 항상 추구 한 해결책이라고 생각합니다.
MVVM은 모든 프론트 엔드 코드를 두 부분으로 완전히 나누고, 뷰의 처리는 바인딩을 통해 구현됩니다 (Angular는 지침이라고하는 차가운 명사가 있습니다). VM의 데이터를 작동하는 한 자연스럽고 마술처럼 뷰와 동기화됩니다. 분명히 모든 미스터리에는 자신의 내부 정보가 있습니다. C#은 Accessor 속성이라는 명령문을 통해 구현되므로 JS는 해당 사항이 있습니다. 신에게 감사합니다. IE8은 처음 으로이 것을 소개했지만 (Object.DefineProperty), 불행히도 버그가 있지만 다른 브라우저가이를 구현하도록 이끌었으므로 IE9+는 안전하게 사용할 수 있습니다. 나는 구식 IE를 오랫동안 찾고 있었지만 실제로 할 수 없었기 때문에 VBScript를 사용하여 구현했습니다.
Object.DefineProperty 또는 VBS의 함수는 객체의 특정 속성을 세터 및 getter로 변환하는 것입니다. 우리는이 두 가지 방법 만 납치하면 펍/서브 모드를 통해 뷰를 비밀리에 작동시킬 수 있습니다. WPF의 지침을 기념하기 위해 WPF의 원래 개발 코드 이름 Avalon 이후이 프로젝트를 지명했습니다. 실제로 프론트 엔드 직원이 Dom의 고통의 바다에서 나와 데이터의 천국에 오는 데 도움이 될 수 있습니다!
오프 주제 :
최근에 프로젝트를 인수했으며 프론트 엔드는 Avalon의 MVVM 프레임 워크를 사용합니다. Angularjs에 노출 된 사람들에게는 항상 Avalon이 여전히 "너무"가벼운 것으로 느껴집니다 (칭찬이 아님).
Avalon의 온라인 승인은 다음과 같습니다. 국내에서 만들어지고, 크기가 작고, DOM 운영이 적고, 운영이 적으며, IE6과 호환됩니다. 단점은 다음과 같습니다. "Avalon은 또한 자체 단점이 있습니다. 잘 알려지지 않았습니다.", 어, 조용히하고 싶습니다 ...
jQuery 전환은 선택기와 복잡한 DOM 운영에 의존한다고 불평했지만 Avalon의 Ajax 및 애니메이션 효과는 여전히 다른 컨트롤에 의존해야합니다. 실제로, 그들은 종종 jQuery와 함께 사용됩니다. 나는 jQuery가 jQuery와 분리 할 수 없다고 불평했다. 그것은 정말로 비극입니다 ... Angular를 시작하는 것은 매우 어렵고, NG를 시작하는 데 어려움이 적고, 좋은 생태학, 강력한 기능, 완전한 문서 및 번역, 성숙하고 활동적인 커뮤니티, 많은 공식 플러그인 및 타사 플러그인입니다.
성능 문제는 개발 효율성과 성능의 균형을 맞추기 위해 선택의 문제입니다. NG를 사용한 사람들은 성능 문제에 대해 걱정하지 않으며 Angular 버전 호환성에 대해 불평합니다. 그러나 Avalon은 여전히 다음과 같은 진술을했습니다. "참고 : 위의 세 가지는 비교적 안정적이지만 서로 호환되지 않습니다. 직접 2.0을 사용하는 것이 좋습니다."
위의 것은 카피 라이팅의 승인에 대해 불평하는 것입니다. Avalon은 또한 좋은 프레임 워크이며 잘 알려진 MVVM 프레임 워크의 장점을 최적화, 개선 및 흡수하고 있습니다. 예를 들어, 2.0 버전에 4 개의 배열 필터가 추가되었으며 지침에도 DO DO 목록도 입력되었습니다.
Angular를 사용한 사람이 언젠가 Avalon을 사용하기를 바랍니다. 그들은 다음과 같이 말할 것입니다. 아, 나쁘지 않습니다!
두 가지 매우 간단한 필터를 공유하십시오 : 키워드와 문자 자르기를 숨기십시오. 또한 NG로 마이그레이션 할 수도 있습니다. 나중에 좋은 필터도 있으며, 그것에 추가하겠습니다.
키워드 : Avalon, Custom, 필터, 중국어, 장거리, 잘린, 잘린, 숨겨진 캐릭터, 각도
키워드를 숨기십시오
프론트 엔드의 일부 페이지에 주요 정보를 숨겨야 할 수도 있습니다 (실제로 숨기려면 여전히 백엔드에서 처리해야합니다).
/*** 숨겨진 문자열의 키 코드, 숨겨진 문자는 '*'**의 기본값입니다. 예를 들어 숨겨진 휴대폰 번호는 1890000000-189 **** 0000; {{str | hide_code (3,4, '*')}}}* @param str* @param pos 시작 위치* @param 길이 문자 수 대체* @param newchar 교체 문자/strings* @returns {*}*/avalon.filters.hide_code = function (str, pos, length, newch) {pos = pos || 0; 길이 = 길이 || 0; Newchar = Newchar || '*'; if (pos <0 || 길이 <= 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, str.length);};긴 캐릭터 잘림 (캐릭터별로 슬라이스, 중국어는 두 문자를 설명합니다 - 개선 된 버전)
원래의 Avalon Truncate 필터는 중국과 영어가 하나의 캐릭터를 차지한다는 사실에 따라 차단되었습니다. 이 필터는 중국어로 두 캐릭터를 가로 채기 위해 개선되었고 인터셉트를 위해 영어로 한 캐릭터
/*** 긴 줄을 잘라 내고, 캐릭터 길이를 자르고, 중국어는 두 캐릭터를 차지합니다. {{str | truncatex (4, '...')}}}* @param str* @param 길이, 새로운 문자열 길이 (영어 캐릭터에 따라 계산, 하나의 중국어에 따라 계산) Chinese_pattern =/[/u4e00-/u9fa5] | [/ufe30-/uffa0]/gi; // [/u4e00-/u9fa5]는 중국어를 나타내고, [/ufe30-/uffa0]는 전체 전역 str = str || ""; 길이 = 길이 || 30; truncation = typeof truncation === "String"? 자르기 : "..."; var chinese = function (s) {return Chinese_pattern.exec (s)? 참 : false;}; var calcsize = function (source) {var strtemp = source.replace (inriate_pattern, "aa"); return strtemp.length;}; var recursion = function (source, length) {if (source) <= length || (! chinesin (source)) {return source; 길이);}}; var slicelength = length -truncation.length; return calcsize (str)> 길이? 재귀 (str.slice (0, slicelength), slicelength) + 잘림 : String (str);}위의 것은 Avalon Chinese Longater Interception, 키워드 캐릭터 숨기기 및 귀하에게 소개 된 사용자 정의 필터에 대한 관련 지식입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!