JavaScript 프레임워크 분류에 대한 간략한 토론_기본 지식

내부 아키텍처와 개념으로 나누어 보면 현재 자바스크립트 프레임워크는 5가지로 나눌 수 있습니다.

유형 1

new Array()를 사용하여 배열을 생성하고, new Object()를 사용하여 객체를 생성하는 등 네임스페이스 지향 클래스 라이브러리나 프레임워크의 등장은 완전히 Java 스타일이므로 특정 객체를 루트로 지속적으로 사용할 수 있습니다. 객체 속성이나 보조 객체 속성을 추가하여 코드를 피라미드처럼 쌓아 정리하세요. 대표작으로는 초기 YUI, EXT 등이 있다.

2형

유명한 Prototype과 mootools, Base2, Ten과 같은 클래스 팩토리 지향 프레임워크가 등장했습니다. 기본적으로 가장 기본적인 네임스페이스를 제외한 다른 모듈은 클래스 팩토리에서 파생된 클래스 개체입니다. 특히 mootools 1.3에서는 모든 유형이 유형 유형으로 캡슐화됩니다.

유형 3

은 jQuery로 표현되는 선택기 중심 프레임워크입니다. 전체 프레임워크 또는 라이브러리 본문은 중앙 집중식 작업을 용이하게 하는 특수 배열 개체입니다. 선택기는 일반적으로 N개의 요소 노드를 한 번에 선택하므로 함께 처리됩니다. jQuery에는 몇 가지 훌륭한 기능이 포함되어 있습니다. "새 인스턴스화 없음" 기술, $(expr)는 명시적으로 새 인스턴스를 생성하지 않고 인스턴스를 반환합니다. 먼저 모든 액세스 규칙을 설정합니다. 데이터 캐싱 시스템입니다. 이 방법으로 노드의 이벤트를 복사할 수 있습니다. 또한 IIFE(Immediately-Invoked Function Expression)도 발견되었습니다.

4번 유형

은 로더와 직렬로 연결된 프레임워크입니다. 모두 여러 개의 JavaScript 파일을 가지고 있으며 각 JavaScript 파일은 고정된 규칙에 따라 작성됩니다. 그 중 가장 유명한 것은 AMD입니다. 모듈화는 JavaScript가 산업화를 향해 나아가고 있다는 신호입니다. "The Art of Unix 프로그래밍"에 나열된 많은 "황금 규칙" 중 첫 번째는 모듈입니다. "복잡한 소프트웨어를 실패 없이 작성하는 유일한 방법은 여러 개의 간단한 모듈을 명확하게 정의된 인터페이스와 결합하는 것입니다. 첫째, 대부분의 문제는 국소적으로만 발생하기 때문에 몸 전체에 영향을 주지 않고 국소적인 부분을 개선하거나 최적화할 수 있는 희망은 여전히 ​​남아 있습니다." Dojo, YUI, Kissy, qwrap 및 Mass 등과 같은 많은 내부 엔터프라이즈 프레임워크는 기본적으로 이 아키텍처를 채택합니다.

5번 유형

명확한 계층 아키텍처를 갖춘 MV* 프레임워크입니다. 첫 번째는 JavaScript MVC(현재 CanJS라고 함), backbonejs,pinejs, 그리고 실제 프런트엔드에 더 가까운 MVVM 프레임워크(예: knockout, ember, angle, avalon 및 winjs)입니다. MVVM 프레임워크에서는 원래 DOM 작업이 프레임워크 자체에서 처리되는 선언적 바인딩으로 대체되므로 사용자는 비즈니스 코드에만 집중하면 됩니다.

프레임워크 특성에 대한 결론은 다음과 같습니다.

기본 데이터 유형의 연산이 기본입니다. 예를 들어 jQuery는 Trim, CamelCase, Each, Map과 같은 메소드를 제공합니다. Prototype.js와 같은 침입형 프레임워크의 경우 Camelize와 같은 메소드가 프로토타입에 추가됩니다.

타입 결정이 필수이며, 일반적인 형태는 isXXX 시리즈입니다.

선택기, domReady 및 Ajax는 최신 프레임워크의 표준 기능입니다.

DOM 작업이 최우선입니다. 노드 순회, 스타일 작업, 속성 작업도 해당 범위에 속합니다. 세분화 여부는 프레임워크의 규모에 따라 다릅니다.

브라우저 스니프는 더 이상 사용되지 않으며 기능 감지가 사용 중입니다. 그러나 기능 감지에는 여전히 제한 사항이 있습니다. 렌더링 버그, 보안 정책 또는 특정 브라우저 버전의 특정 버그 수정을 목표로 하는 경우에도 브라우저 스니핑을 사용해야 합니다. 하지만 프레임워크의 핵심을 제거하고 모듈이나 플러그인으로 독립되어야 합니다.

요즘 주류 이벤트 시스템은 이벤트 프록시를 지원합니다.

데이터 캐싱 및 처리. 현재 브라우저는 이 목적을 위해 data-* 속성도 제공하지만 사용하기 쉽지 않으며 프레임워크에서 추가 캡슐화가 필요합니다.

애니메이션 엔진, 프레임워크가 Prototype.js와 같이 script.aculo.us와 같은 최상위 애니메이션 프레임워크로 지원되지 않는 한 이를 추가하는 것이 가장 좋습니다.

플러그인 개발 및 확장성이 용이합니다.

비동기를 처리하기 위해 Deferred와 같은 솔루션을 제공합니다.

클래스 팩토리가 특별히 제공되지 않더라도 객체를 확장하려면 extend 또는 mixin이라는 메서드가 있어야 합니다. jQuery에는 클래스 팩토리가 없지만 jQuery UI에 클래스 팩토리를 추가해야 한다는 점에서 그 중요성을 알 수 있습니다.

jQuery에서 noConflect라는 방법이 나온 이후, 신흥 프레임워크들은 좁은 격차에서 살아남기 위해 이 방법을 채택해 왔습니다.

많은 프레임워크가 쿠키 작업을 매우 중요하게 생각합니다.