jQuery와 Vue의 기술 구조에 대한 비교 분석 보고서
jQuery
jQuery는 이미 유행이 지났다.약간 보충: Zepto도 유행이 지났어요.Underscore/Lodash 등도 유행이 지났다.그러나 유행이 지난 것은 당신이 반드시 다시 사용할 수 없거나 기존 프로젝트에서 포기하는 것을 의미하지는 않는다.프로젝트 유지보수와 관리 자체는 완전히 기술적 요인에 의해 결정되는 것이 아니다.앞의 두 시를 보세요.새로운 DOM 표준(jQuery 참조)은 많은 새로운 방법을 추가하여 대부분의use cases를 덮어썼다.2. 현재 주류 브라우저의 호환성이 대폭 향상되었고 Evergreen browsers이기 때문에 앞으로도 심각한 호환성 문제가 발생하지 않을 것이다.또한 새로운 기준은 이전보다 더욱 상세하고 명확하며 불일치와 버그가 발생할 확률도 적다.사실 이 두 가지는 단번에 이루어진 것이 아니라 계속 개선되고 있다.예를 들어 네이티브querySelector API가 보급된 후에야 Zepto가 등장했다.단지 최근 2년 동안 발전이 가속화되어 Zepto가 jQuery를 대체하지 못했기 때문에 함께 시대에 뒤떨어질 것이다.(하사준 hax)
jQuery의 핵심 가치
jQuery의 적용 장면
과거의 전단 개발에서 jQuery는 거의 모든 크고 작은 프로젝트에 등장할 것이다. MS든 전자상거래든 각종 포털 사이트든 jQuery의 모습을 빼놓을 수 없다. 이전의 전단 개발에서 jQuery는 일종의'표준'이라고 할 수 있다.
Vue
Vue 얘기하기 전에 MVVM 얘기하세요.
인용문
2008년에 V8 엔진은 크롬 브라우저와 함께 세상에 등장했고 자바스크립트라는 통용되는 웹 스크립트 언어의 집행 효율이 질적으로 향상되었다.V8 엔진의 등장은 자바스크립트 발전 역사상 빛나는 이정표로 정해져 있다.그 출현으로 당시 고성능 서버 개발을 연구했고 오랫동안 속수무책이었던 리안 Dahl은 새로운, 적당한 선택을 하게 되었다. 얼마 지나지 않아 2009년 베를린의 JSConf대회에서 자바스크립트를 바탕으로 한 서버 프로젝트 노드를 개발했다.js가 정식으로 발표합니다.Node.js의 발표는 개발자에게 고성능 서버를 가져왔을 뿐만 아니라 어느 정도에 전방의 공정화를 추진했고 전방의 대번영을 가져왔다.이와 동시에 자바스크립트의 실행 효율이 크게 향상되면서 점점 더 많은 업무 논리가 브라우저에서 실현되기 시작했고 전단 논리가 점점 무거워지면서 전단 구조가 일정에 올랐다.그래서 우리가 이야기한 주인공, MVVM 모델은 웹 전단의 구조 설계에 들어갔다.
콘셉트
MVVM 모드는 말 그대로 Model-View-ViewModel 모드입니다.이것은 2005년 마이크로소프트가 내놓은 윈도 기반의 사용자 인터페이스 프레임워크인 WPF에서 시작되었고, 전단 최초의 MVVM 프레임워크인 knockout이 2010년에 발표되었다.현재 가장 유행하고 있는 MVVM 프레임워크 Vue의 2.0 버전은 2016년 5월에 발표되었다.
한마디로 웹 전단 MVVM: 조작 데이터는 조작 보기이고 조작DOM이다(그래서 조작DOM이 필요없다).
DOM을 조작할 필요가 없습니다!MVVM 프레임워크를 통해 개발자는 성명 귀속을 포함하는 보기 템플릿만 완성하고 View 모델에서의 업무 데이터 변경 논리를 작성하면 View층은 완전히 자동화된다.이것은 전방 응용의 조작 복잡도를 크게 낮추고 응용의 개발 효율을 크게 향상시킬 것이다.MVVM의 가장 상징적인 특성은 데이터 귀속이다. MVVM의 핵심 이념은 성명식의 데이터 귀속을 통해 View층과 다른 층의 분리를 실현하는 것이다.View층의 이러한 이념을 완전히 결합시켜 웹 전단의 단원 테스트 용례 작성을 더욱 쉽게 한다.
MVVM은 계층형 아키텍처입니다.계층은 다음과 같습니다.
모델 층, 데이터 층에 대응하는 역 모델, 주로
.Ajax/fetch 등 API를 통해 클라이언트와 서버 업무 모델의 동기화를 완료합니다.레이어 간 관계에서는 ViewModel의 뷰를 추상화하는 데 주로 사용됩니다.뷰 레이어
뷰 템플릿으로 존재하며 전체 뷰는 MVVM에서 동적 템플릿입니다.구조, 레이아웃을 정의하는 것 외에 ViewModel 레이어의 데이터와 상태를 보여줍니다.View층은 처리 상태를 책임지지 않습니다. View층은 데이터 귀속 성명, 명령어 성명, 이벤트 귀속 성명을 합니다.
ViewModel 레이어
ViewModel층은 View에 필요한 층 데이터를 노출시키고 View층의 데이터 귀속 성명, 명령 성명, 이벤트 귀속 성명, 즉 View층의 구체적인 업무 논리를 처리한다.바인딩된 속성은 ViewModel 하단부에서 감지됩니다.ViewModel에서 데이터가 변경되면 View 레이어가 업데이트됩니다.뷰에서 데이터의 양방향 귀속(일반적으로 폼 요소)을 성명하면 프레임워크도 뷰 층(폼) 값의 변화를 감청한다.값이 변경되면 View 레이어가 바인딩된 ViewModel의 데이터도 자동으로 업데이트됩니다.
프런트엔드 MVVM 그림
mvvm
그림에서 보듯이 프런트엔드 MVVM 프레임워크에는 명확하고 독립된 모델 레이어가 없는 경우가 많습니다.실제 업무 개발에서 우리는 보통 웹 Component 규범에 따라 구성 요소화된 개발 응용을 한다. 모델 층의 역 모델은 한 개 또는 몇 개의Component의 View 모델 층에 분산되고 View 모델 층도 일부 View 층과 관련된 중간 상태를 도입하는데 목적은 View 층을 위해 더욱 좋은 서비스를 제공하기 위한 것이다.
개발자는 View 레이어의 뷰 템플릿에서 데이터 바인딩, 이벤트 바인딩을 선언한 후 View Model에서 비즈니스 논리적 데이터 처리를 수행합니다.이벤트가 트리거되면 ViewModel에서 데이터가 변경되고 View 레이어가 자동으로 업데이트됩니다.MVVM 프레임워크의 도입으로 개발자는 업무 논리에 주목하고 데이터 추상화를 완성하며 데이터에 초점을 맞추기만 하면 MVVM의 보기 엔진이 View를 해결할 수 있다.데이터가 구동되기 때문에 모든 것이 더욱 간단해졌다.
MVVM 프레임워크의 작동(이점)
부정할 수 없다. MVVM 프레임워크는 응용의 개발 효율을 크게 향상시켰다.It's amazing!But, MVVM 프레임워크의 용도는 무엇입니까?
Object.defineProperty() API를 통해 쉽게 정의하거나 액세스 함수를 자체적으로 봉인하는 방식으로 곡선을 완성할 수 있습니다.내 내부는 게시/구독 모드를 봉하여 데이터에 대한 감청, 데이터 변경 시 알림 업데이트를 완성합니다.나는 데이터 귀속 실현의 기초이다.열세
MVVM 아키텍처 모델의 흥행은 앞뒤의 진정한 직책 분리를 실현했고 개발 효율을 높이는 동시에 부족한 점도 있었다.
적용 장면
전후단 분리는 트렌드에 따라 하나의 표준이 형성되었고 MVVM 디자인 모델의 개발 프레임워크(Vue)는 모든 장면의 개발(저버전 IE 제외)에 적용된다고 할 수 있다.
총결산
jQuery는 DOM을 직접 조작하는 것으로 간소화된 API로 DOM과 직접 대화한다(우수한 호환성).Vue는 데이터를 직접 조작하는 거예요. 데이터로 말해요.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
