Knockout.js가 무엇인가요?
Knockout은 훌륭한 Javascrip 라이브러리입니다명확하고 깔끔한 기본 데이터 모델만을 사용하여 텍스트가 풍부한 사용자 인터페이스를 만드는 데 도움을 줍니다. 로컬 UI 콘텐츠가 자동으로 업데이트되어야 할 때(예: 사용자 행동 변화나 외부 데이터 출처에 따라) KO는 쉽게 구현할 수 있고 유지보수도 매우 쉽습니다.
KO의 주요 특징:
우아한 의존성 추적 - 데이터 소스 모델이 변경될 때마다 UI의 지정된 콘텐츠를 자동으로 업데이트할 수 있습니다.
선언적 바인딩 - UI를 데이터 소스 모델에 간단하고 간단하게 바인딩하며, 중첩된 구조 템플릿을 사용해 복잡한 동적 인터페이스를 만들 수 있습니다.
좋은 확장성 - 몇 줄의 간단한 코드로 새로운 선언으로 커스텀 동작을 구현할 수 있습니다.
기타 장점:
Pure Javascrip{filtering}t 라이브러리 - 모든 서버 및 클라이언트 기술과 호환됩니다.
기존 애플리케이션에도 잘 적용할 수 있으며, 프로그램의 주요 아키텍처를 변경할 필요가 없습니다.
단순함 - Gzip 압축 후 단 13K 만에 가능합니다.
주요 브라우저(예: 6+, Firefox 2+, Chrome, Safari 등)와 호환됩니다.
포괄적인 명세 세트(행동 기반 개발 포함) – 이는 새로운 브라우저나 플랫폼에서 쉽게 검증할 수 있음을 의미합니다.
Ruby on Rails, Asp.net MVC 또는 기타 MVC 기술에 익숙한 개발자들은 이를 선언적 구문을 가진 MVC 실시간 형태로 볼 수 있습니다. 다시 말해, KO는 JSON 데이터를 편집해 UI 사용자 인터페이스를 만드는 방법이라고 생각할 수 있습니다... 그게 너한테 하는 거 뭐든지.
어떻게 사용하나요?
가장 빠르고 재미있게 시작하는 방법은 인터랙티브 지도이며, 가장 기본적인 기술을 익히고 온라인 인스턴스를 익히면 프로젝트를 시작할 준비가 된 것입니다.
KO와 Jquery(프로토타입 등)가 서로 경쟁하는 건가요, 아니면 함께 사용할 수 있나요?
모두가 Jquery를 좋아해요! 과거에는 다양한 일관성 없는 DOM 객체 조작 API 메서드를 견뎌야 했지만, Jquery의 등장은 과거의 투박한 프레임워크에 대한 훌륭한 대안으로, 유연하고 사용하기 쉽게 만들어졌습니다. Jquery는 웹 페이지 요소 조작과 이벤트 처리에 훌륭하고 사용하기 쉬운 반면, KO는 다른 문제를 해결합니다.
UI 인터페이스가 약간 더 복잡하고 비슷한 동작을 일부 포함하고 있다면, Jquery만 사용한다면 UI가 생각보다 복잡하고 어려울 것이며, 유지 관리에도 상당한 비용이 듭니다. 예를 들어, 테이블에 항목 목록을 표시하고, 테이블 내 리스트 수를 표시하며, 아이템 목록 수가 5개 미만일 때 "추가" 버튼을 활성화하는 경우를 생각해 보세요. 그렇지 않으면 비활성화됩니다. Jquery는 기본적인 데이터 모델 개념이 없어서, 프로젝트 리스트 수를 얻으려면 테이블/tr/div 숫자에서 추론해야 합니다. 특정 SPANS에서 데이터 양을 표시해야 한다면, 새 데이터를 추가할 때 SPAN의 텍스트도 업데이트하는 것을 잊지 마세요. 물론, 총 수가 >=5일 때는 추가 버튼을 비활성화해야 한다는 점도 기억해야 합니다. 그리고 삭제 기능을 구현하려면 클릭 후 어떤 DOM 요소를 변경해야 하는지 알려야 합니다.
녹아웃과 함께 하는 것은 어떻게 다른가요?
KO에서는 모든 것이 매우 간단해집니다. 이 시스템은 결과적으로 발생하는 데이터 불일치에 대한 걱정 없이 프로젝트의 복잡성을 쉽게 확장할 수 있게 해줍니다. 단순히 데이터를 Javascrip{filter}t 배열로 변환한 후, foreach를 사용해 데이터 배열을 테이블이나 페이지 내 div 집합에 바인딩합니다. 데이터 배열이 바뀌면 UI가 자동으로 반응합니다(새 행을 어디에 넣는지 지정할 필요는 없고), 나머지는 UI 데이터 동기화입니다. 예를 들어, 데이터량을 표시하기 위해 다음과 같은 SPAN을 선언할 수 있습니다:
그거에요! 업데이트하기 위해 코드를 작성할 필요는 없고, 업데이트는 myItems 배열의 변경에 따라 달라집니다. 마찬가지로, 추가 버튼의 활성화 및 비활성화는 myItems 배열 길이에 따라 다릅니다.
그 다음에는 "삭제" 기능을 구현해야 한다면 UI 요소를 어떻게 조작할지 지정할 필요 없이 데이터 모델만 수정하면 됩니다.
요약: KO는 jQuery 및 유사한 DOM 조작 프레임워크와 경쟁할 의도가 없습니다. KO는 데이터 모델과 사용자 UI 인터페이스를 고수준으로 연관시키는 방법을 제공합니다.KO는 jQuery 자체에 의존하지 않지만, jQuery를 함께 사용할 수 있습니다생생하고 부드러운 UI 변경은 jQuery를 사용해야 합니다.
리소스:
http://www.aizhengli.com/knockoutjs/50/knockout.html
http://knockoutjs.com/
|
게시됨 2017. 8. 11. 오후 12:24:27
|
|
|
