Angular란JS가 jQuery보다 잘해요?
저는 주로 jQuery 라이브러리를 사용하고 있으며, AngularJs를 사용하기 시작했습니다.Angular 사용 방법에 대한 튜토리얼은 몇 가지 읽었지만, 사용 이유나 시기, jQuery를 사용하는 것에 비해 얻을 수 있는 이점은 명확하지 않습니다.
앵귤러 MVC angular angular angular angular 。이것은 웹 페이지를 템플릿과 데이터의 조합으로 보는 것을 의미합니다.은 you 다 you you you{{data bindings}}동적 데이터를 얻을 수 있다고 느낄 때마다 말이죠.【앵글】$scope 【스코프】이 핸들러는 스태틱하게 또는 웹 서버에 대한 콜을 통해 입력할 수 있습니다.이는 JSP의 웹 페이지 설계 방식과 특징적으로 유사합니다.글이필??? ??
데이터 조작(마우스 호버의 색상 변경, 클릭 시 요소 숨기기/표시 등)을 수반하지 않는 간단한 DOM 조작의 경우 jQuery 또는 vanilla JS로 충분하고 깔끔합니다.이는 Angular's mvc의 모델이 페이지의 데이터를 반영하는 것이라고 가정하며, 따라서 색상, 표시/숨김 등의 CSS 특성은 모델에 영향을 주지 않습니다.Angular는 DOM 조작에 jQuery 또는 vanilla JS보다 장점이 있습니까?
jQuery가 플러그인과 함께 할 수 있는 것과 비교하여 Angular가 개발에 도움이 되는 것은 무엇입니까?
데이터 바인딩
웹 페이지를 만들고, 동적 데이터가 있을 것 같으면 언제든지 {{data bindings}}을(를) 넣습니다.그러면 Angular는 $scope 핸들러를 제공합니다.이 핸들러는 (정적 또는 웹 서버에 대한 콜을 통해) 입력할 수 있습니다.
이는 데이터 바인딩에 대한 올바른 이해입니다.내 생각에 당신은 그것을 받아 들인 것 같다.
DOM 조작
데이터 조작(마우스 호버의 색상 변경, 클릭 시 요소 숨기기/표시 등)을 수반하지 않는 간단한 DOM 조작의 경우 jQuery 또는 구식 js로 충분하고 깔끔합니다.이는 각도의 MVC에 있는 모델이 페이지의 데이터를 반영하는 것이라고 가정하며, 따라서 색상, 표시/숨김 등과 같은 cSS 특성은 모델에 영향을 미치지 않습니다.
「간단한」DOM 의 조작이 보다 깔끔하다는 요점은 알 수 있습니다만, 극히 드물기 때문에, 정말로 「간단한」DOM 의 조작을 실시할 필요가 있습니다.DOM 조작은 데이터 바인딩과 마찬가지로 Angular가 정말로 빛을 발하는 영역 중 하나라고 생각합니다.또한 이를 이해하면 Angular가 보기를 어떻게 생각하는지 알 수 있습니다.
먼저 Angular 방식을 바닐라 js 접근 방식과 DOM 조작 방식을 비교합니다.전통적으로 우리는 HTML을 아무것도 하지 않는 것으로 생각하고 그렇게 씁니다.따라서 "클릭"과 같은 인라인 js는 HTML의 컨텍스트에 "실행"을 넣지만 "실행"은 하지 않기 때문에 나쁜 관행입니다.앵글 플립은 그 개념을 머리에 뒤집어 씌웁니다.당신이 당신의 견해를 쓸 때, 당신은 HTML이 많은 것을 할 수 있다고 생각합니다.이 기능은 각도 방향에서 추상화되지만 이미 존재하거나 이미 기술한 경우에는 '방법'을 고려할 필요가 없습니다.각도로 사용할 수 있는 이 '증강' HTML에서 사용할 수 있는 파워를 사용할 수 있습니다.이는 또한 모든 뷰 로직이 Javascript 파일이 아닌 뷰에 실제로 포함되어 있음을 의미합니다.다시 한 번 말씀드리지만, 당신의 Javascript 파일에 쓰여진 지시문은 HTML의 능력을 높이는 것으로 간주될 수 있기 때문에, DOM이 자신을 조작하는 것을 염려하게 됩니다(예를 들면).간단한 예를 들어 설명하겠습니다.
이것이 우리가 사용하고자 하는 마크업입니다.직감적인 이름을 붙였어요.
<div rotate-on-click="45"></div>
먼저 커스텀 Angular Directive를 통해 HTML에 이 기능을 제공했다면 이미 완료되었다는 점을 말씀드리고 싶습니다.그것은 신선한 공기이다.잠시 후에 더 자세히 설명하겠습니다.
jQuery를 사용한 구현
function rotate(deg, elem) {
$(elem).css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
}
function addRotateOnClick($elems) {
$elems.each(function(i, elem) {
var deg = 0;
$(elem).click(function() {
deg+= parseInt($(this).attr('rotate-on-click'), 10);
rotate(deg, this);
});
});
}
addRotateOnClick($('[rotate-on-click]'));
Angular를 사용한 구현
app.directive('rotateOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var deg = 0;
element.bind('click', function() {
deg+= parseInt(attrs.rotateOnClick, 10);
element.css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
});
}
};
});
아주 가볍고, 아주 깨끗하며, 그건 간단한 조작일 뿐이야!특히 기능이 추상화되고 돔 조작이 DOM에서 선언되는 방식 등 모든 면에서 각도 접근법이 승리한다고 생각합니다.이 기능은 html 속성을 통해 요소에 연결되므로 셀렉터를 통해 DOM에 문의할 필요가 없습니다.또한 디렉티브 팩토리를 위한 닫힘이 있습니다.하나는 디렉티브의 모든 사용법에 걸쳐 변수를 공유하는 닫힘과1개는 디렉티브의 각 사용법에 대해 닫힘입니다.link 기능)compile★★★★★★★★★★★★★★★★★★」
DOM 조작을 위한 양방향 데이터 바인딩 및 지시사항은 Angular를 훌륭하게 만드는 것의 시작에 불과합니다.Angular는 모든 코드를 모듈화, 재사용 및 쉽게 테스트할 수 있도록 홍보하며 단일 페이지 앱 라우팅 시스템도 포함합니다.jQuery는 일반적으로 필요한 편리성/크로스 브라우저 방식의 라이브러리이지만, Angular는 단일 페이지 앱을 만들기 위한 완전한 기능을 갖춘 프레임워크입니다.각도 스크립트는 실제로 jQuery의 자체 "lite" 버전을 포함하므로 가장 중요한 메서드 중 일부를 사용할 수 있습니다.따라서 Angular IS를 jQuery(가벼운)를 사용하여 사용하는 것이 좋다고 주장할 수 있지만, Angular는 앱을 만드는 과정에서 훨씬 더 많은 "매직"을 제공합니다.
자세한 내용은 이쪽에서 보실 수 있습니다.jQuery 배경이 있는 경우 "AngularJS에서 생각하는" 방법은 무엇입니까?
일반적인 차이점
위의 사항은 OP의 특정 관심사를 겨냥한 것이다.다른 중요한 차이점에 대한 개요도 설명하겠습니다.각 주제에 대한 추가 독서도 권장합니다.
Angular와 jQuery는 합리적으로 비교할 수 없습니다.
Angular는 프레임워크, jQuery는 라이브러리입니다.프레임워크도 있고 도서관도 있습니다.그러나, 좋은 프레임워크가 라이브러리보다 애플리케이션 작성에 더 큰 힘을 가지고 있다는 것은 의심의 여지가 없습니다.그것이 바로 프레임워크의 포인트입니다.코드를 플레인 JS로 작성해도 좋습니다.또한 일반적인 함수의 라이브러리를 추가할 수도 있고, 프레임워크를 추가하여 대부분의 작업을 수행하는 데 필요한 코드를 대폭 줄일 수도 있습니다.따라서 보다 적절한 질문은 다음과 같습니다.
프레임워크를 사용하는 이유
좋은 프레임워크는 코드를 모듈러형(따라서 재사용 가능), DRY형(읽기 쉽고 성능 및 안전)으로 설계하는 데 도움이 됩니다.jQuery는 프레임워크가 아니기 때문에 도움이 되지 않습니다.jQuery 스파게티 코드의 전형적인 벽을 본 적이 있습니다.이것은 jQuery의 잘못이 아니라 코드를 설계할 줄 모르는 개발자의 잘못입니다.그러나 개발자가 코드를 설계하는 방법을 알고 있다면 조금 전에 설명한 기초(아키텍처 등)를 제공하기 위한 최소한의 "프레임워크"를 작성하거나 무언가를 추가하게 됩니다.예를 들어 Require를 추가할 수 있습니다.JS는 적절한 코드를 작성하기 위한 프레임워크의 일부로 기능합니다.
다음은 현대 프레임워크가 제공하는 몇 가지 사항입니다.
- 템플리트
- 데이터 바인딩
- 라우팅(단일 페이지 앱)
- 깨끗한 모듈러형 재사용 아키텍처
- 보안.
- 편의성을 위한 추가 기능/기능
Angular에 대해 더 논의하기 전에, Angular가 유일한 종류가 아니라는 것을 지적하고 싶습니다.예를 들어 Durandal은 jQuery, Knockout 및 Require를 기반으로 구축된 프레임워크입니다.JS. 다시 말씀드리지만, jQuery 자체로는 Knockout, RequireJs 및 그 위에 구축된 전체 프레임워크를 제공할 수 없습니다.비교가 안 될 뿐이죠.
행성을 파괴해야 하는데 데스 스타를 가지고 있다면 데스 스타를 사용하세요.
각도(재방문).
프레임워크가 제공하는 것에 대한 이전 요점을 바탕으로 Angular가 제공하는 방식을 칭찬하고 이것이 jQuery만의 사실상의 문제인지 명확히 하고 싶습니다.
DOM 참조
위의 예에서는 기능을 제공하기 위해 jQuery가 DOM에 접속해야 하는 것은 절대 피할 수 없습니다.즉, 뷰(html)는 기능(이미지 슬라이더와 같은 식별자로 라벨이 붙여져 있기 때문에)에 대해, JavaScript는 기능 제공에 대해 우려하고 있습니다.각도는 추상화를 통해 그 개념을 제거합니다.Angular로 올바르게 작성된 코드는 뷰가 자신의 동작을 선언할 수 있음을 의미합니다.클럭을 표시하는 경우:
<clock></clock>
다 했어요.
네, JavaScript에 접속하여 의미를 부여해야 하는데, jQuery 접근 방식과는 정반대로 진행하고 있습니다.우리의 Angular 디렉티브(자체만의 작은 세계)는 html과 html의 훅을 그 자체에 「증강」하고 있습니다.
MVW 아키텍처/모듈/의존성 주입
각도를 사용하면 코드를 쉽게 구성할 수 있습니다.뷰는 뷰(html), 증강 뷰 기능은 디렉티브, 기타 로직(ajax 콜 등) 및 함수는 서비스에, 서비스와 로직의 뷰 접속은 컨트롤러에 속합니다.서비스 구성 및 변경 등을 처리하는 데 도움이 되는 다른 각도 구성 요소도 있습니다.만든 기능은 애플리케이션 전체에서 종속성 주입을 처리하는 Injector 하위 시스템을 통해 필요한 모든 곳에서 자동으로 사용할 수 있습니다.응용 프로그램(모듈)을 작성할 때 다른 재사용 가능한 모듈로 분할하여 각각 재사용 가능한 컴포넌트를 가진 후 더 큰 프로젝트에 포함시킵니다.Angular를 사용하여 문제를 해결하면 향후 재사용이 용이하고 다음 프로젝트에 쉽게 포함될 수 있도록 자동으로 문제를 해결할 수 있습니다.이 모든 것의 큰 장점은 코드를 테스트하는 것이 훨씬 쉬워진다는 것입니다.
Angular에서 일을 "작동"시키는 것은 쉽지 않습니다.
잘됐어요.앞서 언급한 jQuery 스파게티 코드는 무언가를 "작동"시키고 다음으로 넘어가는 개발에서 비롯되었습니다.나쁜 Angular 코드를 쓸 수는 있지만, Angular가 그것에 대해 너와 싸울 것이기 때문에 그렇게 하는 것은 훨씬 더 어렵습니다.즉, 적어도 어느 정도 깨끗한 아키텍처를 이용할 필요가 있습니다.즉, Angular에서는 나쁜 코드를 쓰는 것이 더 어렵지만 깨끗한 코드를 쓰는 것이 더 편리합니다.
각도는 완벽과는 거리가 멀다.웹 개발 세계는 항상 성장하고 변화하고 있으며 문제를 해결하기 위해 새롭고 더 나은 방법이 제시되고 있습니다.예를 들어 Facebook의 React와 Flux는 Angular에 비해 몇 가지 큰 장점을 가지고 있지만 그들만의 단점이 있다.완벽한 건 없지만 앵글은 예전에도 그랬고 지금도 여전히 최고야.jQuery가 한때 웹 세상을 발전시키도록 도왔던 것처럼, Angular도 마찬가지고, 앞으로도 많은 사람들이 그럴 것이다.
언급URL : https://stackoverflow.com/questions/18414012/what-does-angularjs-do-better-than-jquery
'programing' 카테고리의 다른 글
| spring.jpa.hibernate.ddl-auto 속성은 봄에 정확히 어떻게 작동합니까? (0) | 2023.02.22 |
|---|---|
| 잭슨과 함께 몇 초 만에 타임스탬프를 역직렬화하려면 어떻게 해야 하나요? (0) | 2023.02.22 |
| AngularJS를 사용하여 요소의 폭을 얻는 방법은 무엇입니까? (0) | 2023.02.22 |
| 스위치 블록이 TypeScript에서 완전히 사용되고 있는지 확인하려면 어떻게 해야 합니까? (0) | 2023.02.22 |
| gem install json -v 1.7.3은 '빌드 도구를 포함하도록 PATH를 업데이트하십시오'를 제공합니다. (0) | 2023.02.22 |