2014-04-06 4 views
2

각도를 사용하는 동안 내 HTML이 인라인 -js 코드로 가득 찼다는 것을 알게되었습니다. 예를 들어AngularJS 추상화

:

<table> 
    <tr> 
     <td ng-click="move('nw')" id="nw" ng-bind-template="{{northwest}}"></td> 
     <td ng-click="move('n')" id="n" ng-bind-template="{{north}}"></td> 
     <td ng-click="move('ne')" id="ne" ng-bind-template="{{northeast}}"></td> 
    </tr> 
    <tr> 
     <td ng-click="move('w')" id="w" ng-bind-template="{{west}}"></td> 
     <td ng-click="move('center')" id="center" ng-bind-template="{{center}}"></td> 
     <td ng-click="move('e')" id="e" ng-bind-template="{{east}}"></td> 
    </tr> 
    <tr> 
     <td ng-click="move('sw')" id="sw" ng-bind-template="{{southwest}}"></td> 
     <td ng-click="move('s')" id="s" ng-bind-template="{{south}}"></td> 
     <td ng-click="move('se')" id="se" ng-bind-template="{{southeast}}"></td> 
    </tr> 
</table> 

그것은 더 많거나 적은 것을 내 머리에 구타 년대 HTML에서 추출해야 자바 스크립트 아무것도. Angular는 특별한 경우이고 메소드와 같은 속성을 많이 사용하지만 DOM 메소드처럼 HTML과 Angular를 분리 할 수 ​​있습니까?

처럼 :

var north = document.getElementById("n"); 
north["ng-click"] = function() { move(this.id); } 
+0

HTML 및 CSS는 _documents_을 (를) 표현하기 위해 태어났습니다. wiki 페이지를 생각해보십시오. 문서는 ... 문서입니다. 그것들은 상대적으로 정적 인 정보를 담고있다. JS는 이러한 페이지를 향상시키기 위해 탄생했습니다. 따라서 페이지가 JS없이 작동 할 것으로 예상됩니다. 눈에 잘 띄지 않는 JS는 HTML을 향상시키는 JavaScript가 있지만 HTML 없이는 완전히 사용할 수 있어야합니다. 자바 스크립트는 외부의 것으로, 문서와는 별도로 ... 문서입니다. 최근에 JS가 빨라졌고 사람들은이를 사용하는 방법을 이해하기 시작했습니다. 이제는 사람들이 웹 응용 프로그램을 작성 중이며 이전 가정은 더 이상 유지되지 않습니다. –

답변

0

당신은 그렇게 할 수 있지만, 당신은 선언적 바인딩 구문의 포인트를 파괴하고 있습니다.

하루가 끝날 때마다 HTML 마크 업에서 발견되는 모든 "가비지"는 쉽게 제거 할 수 있습니다. 이제 코드에서 동일한 작업을 수행하십시오.

진정한 추상화를 구현하려면 Angular, Knockout 및 모든 바인딩 (및 기타) 라이브러리에 대해 중립적 인 래퍼를 개발해야합니다. HTML 바인딩 제공자 모델과 같은 것입니다.

방해가되지 않는 모델 바인딩을 선호하지 않으므로 시간이 낭비되는 것은 흥미로운 일입니다. ;)

0

인라인 이벤트 핸들러가 나쁜 이유는,() 어쨌든 각도 애플리케이션의 경우 될 수 없습니다 자바 스크립트의 옆 원하는 unobtrusiveness을두고있다 :

  • 가 세계에서 함수를 참조 네임 스페이스.
  • 결합 구조 및 동작.

첫 번째 포인트는 Angular case에서 유효하지 않습니다.이 핸들러는 전역 개체가 아닌 특정 범위에 묶여 있습니다.

두 번째 포인트가 더 미묘합니다. 결합 구조와 동작은 그러한 앱에 대한 단위 테스트를 작성하기가 어렵 기 때문에 좋지 않습니다. 이것은 "AngularJS" book에 각도 팀에 의해 해결된다

우리는이 커플 링을 앓고 우리의 시스템이 있는지 알아 내기 위해 사용할 수있는 간단한 산 테스트있다 : 우리가하지 않는 우리의 응용 프로그램 논리에 대한 단위 테스트를 만들 수는 DOM이 존재해야합니까? 각도에서

, 그래 우리 는 이벤트 핸들러에 결코 DOM.The 문제로 참조를하지 않고 우리의 비즈니스 로직을 포함하는 컨트롤러를했다 쓸 수 있지만, 오히려 방법으로 우리는 이전에 자바 스크립트를 작성했습니다. 여기까지 작성한 모든 컨트롤러와이 책의 에는 DOM 또는 DOM 이벤트 에 대한 참조가 없습니다. DOM 없이도이 컨트롤러를 쉽게 만들 수 있습니다. 요소를 찾고 작업 이벤트를 처리하는 모든 은 범위 내에서 발생합니다.

단위 테스트를 작성할 때 먼저 중요합니다. DOM이 필요하면 테스트 설정에서 복잡성을 추가하고 테스트에 복잡도를 추가해야합니다.페이지가 변경되면 테스트를 위해 DOM을 변경해야하기 때문에 유지 관리가 더 많습니다. 마지막으로 DOM 액세스는 입니다. 느린 테스트는 느린 피드백과 결국 느린 릴리즈를 의미합니다. 각도 컨트롤러 테스트에는 이러한 문제가 없습니다.

여기에서 요점은 Angular의 인라인 핸들러가 원래의 핸들러와 다르다는 것입니다. 따라서 사용하는 것이 좋지 않습니다.