이 기사는 두 가지 간단한 비즈니스 요구 사항을 구현하여 AngularJS 및 기존 JavaScript Control DOM의 구현의 차이점을 살펴보고 인기있는 웹 프론트 엔드 개발에서 MVW와 같은 프레임 워크의 프로그래밍 아이디어를 이해하려고 시도합니다.
이 요구 사항은 매우 일반적입니다. 예를 들어, 첫 번째 레벨 메뉴 항목을 클릭하면 해당 하위 메뉴 항목을 표시하거나 숨겨야합니다.
jQuery 구현 :
코드 사본은 다음과 같습니다.
<!-html->
<ul>
<li>
항목 1
<ul>
<li> 아이템 아동 1 </li>
</ul>
</li>
</ul>
// JavaScript
$ ( 'li.parent_item'). 클릭 (function () {
$ (this) .children ( 'ul.child'). toggle ();
})
AngularJS 구현 :
코드 사본은 다음과 같습니다.
<!-html->
<ul>
<li ng-click = "hide_child =! hide_child">
항목 1
<ul ng-hide = "hide_child">
<li> 아이템 아동 1 </li>
</ul>
</li>
</ul>
DOM 운영 방식은 자세히 설명되지 않습니다. AngularJS의 구현에는 코드의 많은 개선이 필요하며 HTML 버전 만 충분합니다. 위의 코드는 AngularJS의 이러한 지식 지점을 사용합니다.
1. 방향
2. 표현력
NG-Click 및 NG-Hide는 프레임 워크와 함께 제공되는 지침 (지침)입니다. 전자는 LI 태그에 이벤트 핸들러를 제공하는 것과 같습니다. html 요소 (li)를 클릭하면 hide_child =! hide_child 표현식이 실행됩니다. 먼저 HTML 요소가 할당의 표현 결과 (Bolean value)를 기반으로 표시 될지 여부를 제어 할 NG 헤이드 지침을 먼저 살펴 보겠습니다. 즉, hide_child 변수가 true라면 UL이 숨겨지면 결과가 반대됩니다.
여기에서 hide_child는 실제로 $ 범위의 변수입니다. 컨트롤러 컨트롤러를 사용하여 메소드를 마무리하기 위해 값의 변경을 구현할 수도 있지만 현재 문장은 비교적 간단하며 명령 할당에 직접 작성됩니다.
위의 간단한 코드 분석을 통해 AngularJS의 두 가지 명백한 기능을 볼 수 있습니다.
1. DOM 작업은 지침 및 표현을 통해 차단되며 간단한 코드를 사용하여 추가 JavaScript 코드가 저장됩니다.
2. 지침과 표현의 적용은 HTML에 직접 중첩되어 있으며, 이는 jQuery가 밀고있는 눈에 띄지 않는 JavaScript의 코드 스타일과 다소 상반됩니다.
먼저 다른 요구 사항을보고 위의 결론을 자세히 설명해 봅시다.
요구 사항 2 : DIV를 클릭하여 양식에서 라디오 버튼 선택을 트리거하여
기존의 HTML 양식 요소는 오늘날의 모바일 장치에서 작동하는 것이 매우 친절하지 않습니다. 예를 들어, 라디오 버튼 라디오 박스는이 구성 요소를 제어하기 위해 터치 스크린의 정확한 위치를 필요로하지만 수동 지정된 위치는 매우 거칠다. 일반적인 관행은 해당 레이블 컨트롤을 추가하는 것이지만 텍스트 자체의 화면 점유 비율은 이상적이지 않으며 명확한 정보 통신 효과가 없습니다. 따라서 더 큰 영역이있는 Div 또는 Li 태그는 일반적으로 간접적으로 작동됩니다.
jQuery 구현 :
코드 사본은 다음과 같습니다.
<!-html->
<ul>
<li>
<입력 유형 = "라디오"
id = "옵션 1" />
<label for = "옵션 1"> 옵션 1 </label>
</li>
</ul>
// JavaScript
$ ( 'li.Selection'). 클릭 (function () {
$ (this) .children ( '입력 [type = "radio"]'. click ();
})
AngularJS 구현 :
코드 사본은 다음과 같습니다.
<!-html->
<ul>
<li ng-repeat = "옵션 옵션"
ng-click = "model.option = 옵션. value"
ng-class = "{active : model.option == 옵션 .value}">
<입력 유형 = "라디오"
ng-model = "model.option"
value = "{{옵션 .value}}"
id = "옵션 1" />
<label for = "옵션 1"> 옵션 1 </label>
</li>
</ul>
이 솔루션에서는 추가 JavaScript 코드가 포함되지 않았으며 몇 가지 추가 지침을 사용했습니다. 비교 및 참조를 위해, 우리는 두 가지 지침 NG 클릭 및 NG 모델의 표현에만 관심이 있습니다.
먼저 입력 요소의 NG 모델 지침을 살펴 보겠습니다. 여기에서 할당은 템플릿의 입력을 $ scope.model 객체의 옵션 속성과 연결한다는 것을 의미합니다. 데이터 바인딩에 대한 더 깊은 이해를 위해서는 데이터 바인딩을 참조 할 수 있습니다. 이 지정된 연관성은 템플릿 컨트롤이 데이터 모델에 직접 바인딩 되며이 바인딩은 양방향입니다. 즉, 사용자가 컨트롤의 값을 수정하면 (무선 입력 확인) 해당 모델 객체가 재 할당됩니다 (Model.Option). 동시에, 모델 객체의 값이 변경되면, 템플릿의 입력 제어도 그에 따라 변경 사항을 반영합니다. 그리고 이것은 실제로 위에서 언급 한 jQuery의 구현에서 달성되지 않습니다.
따라서 AngularJS 데이터 바인딩을 통해 Li 요소를 클릭하여 입력을 트리거하는 프로세스를 간접적으로 완료합니다.
1. Li 태그를 클릭하여 Model.Option에 값을 할당합니다.
2. 모델 객체를 수정하고 해당 입력 제어를 찾습니다 (값의 값은 model.option);
3. 입력 제어의 점검 된 속성을 활성화합니다
위의 두 가지 경우를 통해 웹 프론트 엔드 작동에 대한 새로운 이해가 있습니다.
우선, 기술 구현 측면에서 지침, 표현식, 데이터 바인딩 등과 같은 새로운 개념을 도입함으로써 사용자 및 HTML 구성 요소와 상호 운용 할 수있는 JavaScript 코드의 구현이 아닌 완전히 새로운 방식으로 DOM을 작동 할 수 있습니다. 이런 종류의 사고의 변화는 엄청납니다.
이 세기 초부터 역동적 인 웹 프로그래밍, 서버 측 프로그래밍 기술의 부상이 개선되고 있습니다. 처음부터 CGI/PHP/ASP는 언어 및 플랫폼에서 .NET vs. Java를 생산했습니다. 개발 효율성 및 소프트웨어 프로세스는 MVC 프레임 워크/ORM/AOP 등을 홍보했으며 성능 및 빅 데이터는 NodeJS/NOSQL/Hadoop 등을 가져 왔으며 브라우저 프론트 엔드의 기술적 요구 사항은 그렇게 급진적으로 보이지 않았습니다. 한편으로, 서버 측과 데이터베이스를 통해 B/S 모델의 대부분의 비즈니스 요구를 충족 할 수 있습니다. 반면, 브라우저 자체는 다양한 플랫폼간에 차이가 있으며, 스크립팅 언어 표준 및 렌더링 기술의 비 호환성, 컴퓨팅 전력 및 보안 고려 사항 부족.
이 경우 대부분의 경우 브라우저는 렌더링 페이지와 간단한 사용자 상호 작용 만 고려하면됩니다. HTML/dom Plus JavasRipt/CSS는 프론트 엔드의 주요 작업을 달성합니다. 따라서 과거에는 프론트 엔드 노동자가 없었으며 웹 디자이너 만 필요했습니다. 점차적으로 프론트 엔드에 대한 요구 사항이 증가했으며 JQuery는 JavaScript 작동 DOM에 가장 많이 사용되는 패키지 라이브러리가되었습니다. 이 단계에서 jQuery/JavaScript의 주요 작업은 여전히 사용자의 브라우저 터미널을 제시하고 상호 작용하는 도구 일뿐입니다.
jQuery의 기원을 이해 한 후에는 눈에 띄지 않는 JavaScript와 같은 과거에 추구 된 규칙 중 일부가 당시의 구현 수단과 방법으로 제한되어 있음을 찾는 것은 어렵지 않습니다. DOM 및 JavaScript 코드 로직을 분리하기 위해 더 높은 유지 보수로 방법을 선호했습니다. JavaScript에 대한 프론트 엔드 수요가 증가한 후, MVC/MVP의 많은 프론트 엔드 프레임 워크가 등장했으며, SegularJS의 소위 MVW (Model-View-Whatwhate)와 JavaScript 및 DOM의 한 가지 크기에 맞는 접근 방식이 변경되었습니다. 원래 인터페이스 디스플레이 및 사용자 상호 작용의 직접 작동을 고려했지만 이제는 클라이언트 데이터 바인딩, 풍부한 지침 및 종속성 주입이 있습니다. 우리를 기다리는 것은 새로운 프로그래밍 모델과 사고 방식이 될 것입니다.