AngularJS_AngularJS 입문 지식을 위한 MVW 클래스 프레임워크의 프로그래밍 아이디어에 대한 토론

두 가지 간단한 비즈니스 요구 사항을 구현하여 이 기사에서는 AngularJS와 기존 JavaScript 제어 DOM 구현 간의 차이점을 살펴보고 널리 사용되는 웹 프런트 엔드 개발에서 MVW와 같은 프레임워크의 프로그래밍 아이디어를 이해하려고 합니다.

이 요구 사항은 매우 일반적입니다. 예를 들어 2레벨 메뉴에서 1레벨 메뉴 항목을 클릭하면 해당 하위 메뉴 항목이 표시되거나 숨겨집니다.

jQuery 구현:

코드 복사 코드는 다음과 같습니다.

• 
  항목 1
           
  
  ~ > >

//자바스크립트 $('li.parent_item').click(function(){

$(this).children('ul.child').toggle();
})

AngularJS 구현:

코드 복사 코드는 다음과 같습니다.

• 
  항목 1
           
  
  >                      >

DOM을 운영하는 전통적인 방식은 다시 설명하지 않겠습니다. AngularJS의 구현은 코드보다 훨씬 더 정교하며 HTML 버전만으로도 충분합니다. 위 코드는 AngularJS의 다음 지식 포인트를 사용합니다.

1.지시문

2.표현

ng-click 및

ng-hide

는 모두 프레임워크와 함께 제공되는 지시문입니다. 전자는 HTML 요소( li) 클릭 시 표현식(expression) hide_child = !hide_child 가 실행됩니다. 먼저 할당된 표현식 결과(부울 값)에 따라 HTML 요소를 표시할지 여부를 제어하는 ​​ng-hide 지시어(CSS를 통해 구현됨)를 살펴보겠습니다. 즉, hide_child 변수가 true이면 ul이 숨겨지고 그렇지 않으면 결과가 반대가 됩니다. 여기서 Hide_child는 실제로 $scope의 변수입니다. 컨트롤러 컨트롤러에서 메서드를 래핑하여 해당 값을 변경할 수도 있습니다. 그러나 현재 문은 비교적 간단하며 In에서 직접 작성할 수 있습니다. 지시의 할당.

위의 간단한 코드 분석을 통해 AngularJS의 두 가지 분명한 기능을 확인할 수 있습니다. 1. DOM의 작동은 명령어와 표현식을 통해 봉인되며, 간단한 코드만으로 추가 JavaScript 코드를 절약할 수 있습니다

2. 지침과 표현식의 적용은 HTML에만 직접 중첩되어 있으며 이는 jQuery가 장려하는 눈에 거슬리지 않는 JavaScript 코드 스타일과 다소 상반됩니다

먼저 다른 요구 사항을 살펴보고 위의 결론을 자세히 설명하겠습니다.

요구 사항 2: div를 클릭하여 양식에서 라디오 버튼 선택을 트리거합니다

전통적인 HTML 양식 요소는 오늘날의 모바일 장치에서 작동하기에 그다지 친숙하지 않습니다. 예를 들어 라디오 버튼 라디오 버튼은 이 구성 요소를 제어하기 위해 터치 스크린에서 정확한 위치 지정이 필요하지만 손가락 위치 지정은 매우 어렵습니다. 일반적인 접근 방식은 해당 Label 컨트롤을 추가하는 것이지만 텍스트 자체의 화면 비율이 이상적이지 않고 명확한 정보 전달 효과도 없습니다. 따라서 상대적으로 면적이 큰 div나 li 태그는 간접적으로 동작하는 경우가 많습니다.

jQuery 구현:

코드 복사

코드는 다음과 같습니다.

   
• 
                      id="option1" />
          옵션 1
     

//자바스크립트
$('li.selection').click(function(){
    $(this).children('input[type="radio"]').click();
})

AngularJS의 용도:

复主代码 代码如下:

   
•         ng-click="모델.옵션 = 옵션.값"
          ng-class="{활성: 모델.옵션 == 옵션.값}" >
                      ng-model="모델.옵션"
              value="{{option.value}}"
              id="option1" />
          옵션 1
     
  

이 솔루션에서는 추가 JavaScript 코드를 사용하지 않고 몇 가지 지침을 더 사용했습니다. 비교 및 참조를 위해 ng-click 및 ng-model 두 지시문의 표현식에만 관심이 있습니다.

먼저 입력 요소의 ng-model 지시어를 살펴보겠습니다. 여기서 할당은 템플릿의 입력을 $scope.model 객체의 옵션 속성과 연결하여 in을 얻는다는 의미입니다. -데이터 바인딩에 대한 자세한 내용은 데이터 바인딩을 참조하세요. 이렇게 지정된 연결을 사용하면 템플릿 컨트롤을 데이터 모델에 직접 바인딩할 수 있으며 이 바인딩은 양방향입니다. 이는 사용자가 컨트롤의 값을 수정하면(라디오 입력 확인) 해당 Model 개체가 동시에 재할당되며(model.option), Model 개체의 값이 변경되면 해당 모델의 입력 컨트롤이 다시 할당됩니다. 템플릿은 변경사항 반영에도 해당합니다. 이는 실제로 위의 jQuery 구현에서는 달성되지 않습니다.

그래서 AngularJS의 데이터 바인딩을 통해 li 요소를 클릭하여 간접적으로 입력을 실행하는 과정은 다음과 같습니다.

1. li 태그를 클릭하고 model.option에 값을 할당합니다.
2. Model 객체를 수정하고 해당 입력 컨트롤을 찾습니다(value 값은 model.option의 값임). 3. 입력 컨트롤의 확인된 속성을 활성화합니다

위의 두 가지 사례를 통해 우리는 웹 프런트엔드의 운영에 대해 새로운 이해를 갖게 되었습니다.

우선 기술적 구현 측면에서 새로운 지침, 표현식, 데이터 바인딩 및 기타 개념을 도입함으로써 사용자 간의 상호 작용에 국한된 JavaScript 코드뿐만 아니라 완전히 새로운 방식으로 DOM을 작동할 수 있습니다. 및 HTML 구성 요소를 수행합니다. 이러한 생각의 변화는 엄청납니다.

금세기 초 동적 웹 프로그래밍이 등장한 이후 서버측 프로그래밍 기술은 발전해 왔습니다. CGI/PHP/ASP 초창기부터 언어와 플랫폼이 .NET 대 Java를 낳았고, 개발 효율성과 소프트웨어 프로세스가 MVC 프레임워크/ORM/AOP 등을 촉진했으며, 성능과 빅데이터가 NodeJS/NoSQL/을 가져왔습니다. Hadoop 등, 그리고 브라우저 프런트엔드에 대한 기술적 요구사항은 그다지 급진적이지 않은 것 같습니다. 한편으로는 B/S 모델의 비즈니스 요구 사항 대부분이 서버와 데이터베이스를 통해 충족될 수 있는 반면, 브라우저 자체는 플랫폼마다 차이가 있고 스크립팅 언어 및 렌더링 표준과 호환되지 않습니다. 기술이 부족하고 컴퓨팅 능력의 부족과 안전 고려사항에 한계가 있습니다.

이 경우 대부분의 경우 브라우저 측 요구 사항은 페이지 렌더링과 간단한 사용자 상호 작용만 고려하면 됩니다. 따라서 HTML/DOM과 JavaScript/CSS가 프런트엔드의 주요 작업을 수행합니다. 따라서 예전에는 프론트엔드 인력이 없었고 웹디자이너만 필요했습니다. 점차적으로 프런트 엔드에 대한 요구 사항이 점점 더 많아지고 있으며 jQuery는 DOM 운영을 위해 가장 널리 사용되는 JavaScript 캡슐화 라이브러리가 되었습니다. 이 단계에서 jQuery/JavaScript의 주요 작업은 여전히 ​​사용자 브라우저 터미널 표시 및 상호 작용을 위한 도구일 뿐입니다.

jQuery의 기원을 이해하면, Unobtrusive JavaScript 등 이전에 추구했던 일부 규칙이 DOM과 JavaScript 코드 로직을 분리하기 위해 구현 수단과 방법에 국한되어 있다는 것을 어렵지 않게 발견할 수 있습니다. 우리는 유지 관리가 더 쉬운 방법에 우선 순위를 두었습니다. JavaScript에 대한 프런트엔드 수요가 증가한 후 많은 MVC/MVP 프런트엔드 프레임워크가 등장했고, AngularJS의 소위

MVW(Model-View-Whatever)도 등장했습니다. JavaScript 및 DOM에 대한 모든 접근 방식이 변경되었습니다. 원래 우리는 인터페이스 디스플레이와 사용자 상호 작용의 직접적인 작동을 고려했지만 이제는 클라이언트 측 데이터 바인딩, 풍부한 명령 및 종속성 주입이 우리를 기다리고 있습니다.