Angular는 MVVM 프레임 워크에서 좋지만 크고 포괄적 인 프레임 워크를 사용하면 배우기가 좋지 않으며 시작하는 데 적어도 1-2 주가 걸립니다. Knockoutjs는 데이터 바인딩에 중점을두고 1-2 일 만에 사용될 수 있으므로 학습 비용이 너무 낮지 않아야합니다! 프론트 엔드 진화가 너무 빨라지는 시대에는 학습 비용도 고려해야 할 요소입니다. 여러 번 우리의 프로젝트는 그렇게 복잡하지 않으며 보편적 인 프레임 워크가 필요하지 않습니다. 간단하고 쉬운 도구가 필요합니다.
녹아웃 전에
주문 시스템을 구축하고 제품의 단가를 표시해야한다고 가정 한 다음 입력 수량에 따라 총 가격을 계산하여 표시 할 수 있습니다. 기본 코드로도 달성하기 쉽습니다. 효과는 다음과 같습니다.
코드는 다음과 같습니다.
<!-html code-> price : <span id = "price"> < /span> <br /> 계정 : <input type = "text"id = "account"value = ""placeholder = "reter를 입력하십시오" /> <br /> sum : <span sum "> <// js codevar pricenode = document. document.getElementById ( '계정'), sumnode = document.getElementById ( 'sum'), price = 100, 계정 = 11, sum = price * account; // 초기화. pricenode.innertext = price; accountnode.value = ac
글쎄, 그것은 아주 간단합니다! 그건 그렇고, 우리는 한 번에 50 개의 항목을 표시하며 10 가지 유형의 디스플레이와 오카모토 5 상자를 구매하고 튀긴 반죽 막대기를 얻는 것과 같은 다양한 프로모션이 있습니다 ...
따라서 기본 구현 문제를 알고 있습니다.
• UI 및 데이터 상호 작용이 증가함에 따라 코드의 양이 빠르게 성장했으며 유지하기가 어렵습니다.
• dom 쿼리, ID 또는 클래스를 기반으로 한 이름을 관리하기 어렵습니다.
• 높은 코드 커플 링, 재사용이 어렵습니다
Knockoutjs 소개
Knockoutjs (이하 KO라고하는 이하)는 위의 문제를 해결하는 것으로 나타났습니다. 데이터 및 뷰의 바인딩 구현에 중점을 둔 가벼운 MVVM 라이브러리입니다. UI 클래스와 라우팅 기능을 제공하지 않으며 시작하는 것이 매우 빠릅니다. 동시에 KO는 몇 년 동안 외출 한 이후로 비교적 성숙한 프레임 워크가되었습니다. 더 역동적으로 표시되는 일부 페이지를 수행 할 때 KO는 의심 할 여지없이 더 나은 선택입니다. 나는 MVVM에 대해별로 말하지 않고 혼동하는 사진입니다.
KO는 세 가지 핵심 기능 (공식 웹 사이트 소개)을 기반으로합니다.
1. 관찰 및 의존성 추적 : 관찰 가능성을 사용하여 데이터 변환 및 바인딩을 위해 모델 데이터 사이에 암시 적 관계 체인을 설정하십시오.
2. 선언 적 바인딩 : 간단하고 읽기 쉬운 구문을 사용하여 모델 데이터를 DOM 요소에 쉽게 바인딩합니다.
3. 템플릿 : 내장 템플릿 엔진, 모델 데이터에 대한 복잡한 UI 프레젠테이션을 빠르게 작성하십시오.
KO를 사용하는 것은 매우 간단합니다. 공식 웹 사이트 (http://knockoutjs.com/index.html)로 직접 다운로드하고 <cript>와 함께 소개하십시오.
관찰 가능한 물체
KO를 사용하여 위의 예를 다시 작성하십시오 (어린 시절 소원 중 하나 인 Custom Price) :
코드는 다음과 같습니다.
<!-html code-> <div id = "one"> price : <input type = "text"data-bind = "value : price"placeholder = "단가를 입력하십시오" /> <br /> 계정 : <input type = "text"data-bind = "value : 계정"placeholder = "please number" /> <br /> sum : <text : sum "> < /js cod"> ViewModel = function (p, a) {// 관찰 가능한 객체로 설정하고 this.price = ko.observable (p); this.account = ko.observable (a); // ko 함수를 호출 할 때 이것은 전달됩니다. 그렇지 않으면 ko.purecomputed의 내부 코드를 실행할 때 ko와 prisce ()가 오류를보고합니다. this.sum = ko.purecomputed (function () {// 관측 가능한 객체가 함수 객체이기 때문에 가격 ()을 사용하여 현재 값을 읽어야합니다. // 가격 (newValue)을 사용하여 값을 설정하고 체인 쓰기를 지원합니다. 10); //이 바인딩을 적용하면 결합이 적용되기 시작합니다.1) 먼저 HTML 코드를 살펴 보겠습니다.
Data-Bind = "XX : OO"와 같은 키 값 쌍이 각 태그에 추가 된 것을 알 수 있습니다. 이것은 KO의 바인딩 구문입니다. XXOO는 무엇을 대표합니까? (XXOO? 저자는 여전히 어린이입니다 ...) 예에서 XX의 속성이 태그, 텍스트, 값, 클래스, 확인 등과 같은 태그 속성이 될 수 있으며 실제로 클릭, 초점,로드 및 기타 DOM 이벤트 일 수도 있습니다. OO는 변수처럼 보이지만 변수가 아니라 함수 객체입니다. 이 함수를 실행하면 (()와 함께) 해당 결합 값을 얻을 수 있습니다. XXOO를 통해 요소의 속성 또는 이벤트는 JS의 기능 객체에 바인딩 될 수 있습니다 (XXOO는 서로 책임이 있어야합니다). 이것은 KO의 선언적 바인딩입니다. 바인딩의 정의는 실제로 관찰자 모드이지만 이것은 양방향 바인딩입니다. 게시자와 가입자는 서로의 메시지를 구독합니다. 이것은 MVVM의 양방향 결합입니다. KO 양방향 바인딩의 결과는 한 당사자가 변경하여 다른 당사자를 자동으로 업데이트 할 수 있다는 것입니다. 결합 효과는 다음과 유사합니다.
2) JS 코드를 살펴 보겠습니다.
ViewModel 객체가 JS에 정의되어 있고 HTML에 바인딩 된 OO가 객체에서 작동 함을 알 수 있습니다. 여기에는 두 가지 주요 작업이 있습니다 : Ko.observable () 및 Ko.purecomputed ().
• ko.observable (p) : 이름을 참조하십시오. 이것은 관찰 가능한 객체를 설정하는 방법입니다. 전달 된 매개 변수 P는 초기화 된 값입니다. 여기의 매개 변수는 기본 데이터 유형 또는 JSON 객체 일 수 있습니다. 관찰 가능한 것으로 설정된 후에는 시스템 이이 값을 항상 관찰 할 것임을 의미합니다. ViewModel의 P 또는 바운드 객체 변경의 P가 새로 고침 이벤트를 유발하는지 이벤트를 사용하는 모든 장소가 최신 상태로 업데이트됩니다. 분명히, 관찰 가능한 객체는 상대적으로 성능이 작용하므로, 동적 변화가 필요하지 않은 값 (예 : 가격)은 관찰 가능한 객체로 설정하지 않습니다. 물론 중앙 집중식 초기화를 위해 여전히 뷰 모델에 넣어야합니다.
• 참고 : KO.Observable (P)에 의해 반환 된 관찰 가능한 객체는 함수 객체이므로 Price ()를 사용하여 관찰 가능한 객체를 읽어야합니다. 마찬가지로 관찰 가능한 물체를 설정하려면 가격 (NewValue)을 사용하려면 가격 (NewValue)이 필요합니다. 더 사려 깊은 것은 설정시 체인 쓰기를 지원한다는 것입니다 : viewmodel.price (100) .account (10).
• ko.purecomputed ()는 소위 종속성 추적입니다. 단가는 다음과 같습니다. 수량은 총 가격과 같습니다. this.sum = this.price () * this.account (); 합계를 지정합니다. 이 쓰기 방법은 바운드 객체를 동적으로 새롭게 새로 고칠 수는 없지만 합계 변수를 동적으로 변경하지만 바운드 객체를 새로 고치려면 다른 작업이 필요합니다. 따라서 계산과 관련된 결합 값은 KO의 계산 함수를 사용하여 설정해야합니다. 물론 반환 된 기능 객체도 함수 객체입니다. 또한 KO에는 계산 된 기능이있어 설정할 수 있지만 Pure를 사용하여 성능을 향상시키는 것이 좋습니다.
• 작성 방법에주의하십시오. KO.PURECOMPUTED (FN, this), 즉 viewModel 범위에 FN을 바인딩하는데, 이는 실제로 JS에서 Call/Apply입니다. 이것은 KO 내부 함수를 실행할 때 KO 객체이기 때문에 ViewModel 객체의 범위를 얻으려면 위의 쓰기 방법으로 전달해야합니다. 물론 KO 함수 외부의 뷰 모델 객체를 저장 한 다음 KO 함수 내부를 사용하여 뷰 모델 객체를 호출 할 수도 있습니다. 이와 같이:
var that = this; this.sum = ko.perecomputed (function () {return that.price () * that.account ();});ViewModel 생성자를 정의한 후, 뷰 모델 객체가 인스턴스화 된 다음 KO.AppLyBindings () 메소드를 사용하여 바인딩을 적용합니다. 이 단계를 놓치지 마십시오.
KO를 사용한 간단한 페이지 모드 :
<!-html code-> <span data-bind = "text : bindtext"> </span> // js codevar viewmodel = {bindtext : ko.observable ( 'initvalue'}}}; ko.applybindings (viewmodel);요약하면 다음과 같습니다. Data-Bind = "XX : OO"를 사용하여 HTML에서 바인딩을 선언하고 JS에서 뷰 모델을 작성하고 관찰 가능한 객체를 설정하고 결합을 적용합니다.
관찰 가능한 객체 배열
관찰 가능한 객체 배열의 사용법을 살펴 보겠습니다. KO에서는 배열 및 변수를 JS처럼 혼합 할 수 없습니다. 배열 객체의 경우 ko.observablearray ([…,…])를 같은 방식으로 사용해야합니다. 마찬가지로 배열 요소는 기본 유형 또는 JSON 객체 일 수 있습니다. KO의 관찰 가능한 객체 배열에는 slice (), sort (), push () 등과 같은 일련의 배열 작동 방법이 있습니다. 효과는 기본 JS 배열 작동 방법과 동일합니다. KO 메소드를 통한 변경 사항 간의 유일한 차이점은 가입자에게 인터페이스를 새로 고치도록 알리지만 JS 메소드는 인터페이스를 새로 고치지 않습니다. 간단한 예는 다음과 같습니다.
<!-html code-> <data-bind = "옵션 : 목록"> </select> // js codevar vm = {// list : ko.observablearray () 목록 : ko.observablearray ([ 'luffy', 'Zoro', 'sanji']}; ko.applybindings (vm);요점 : KO는 요소 자체의 상태가 아니라 배열의 상태를 모니터링합니다. 즉, 배열 상태가 변경 될 때 (요소 추가) KO 이벤트가 트리거되면 바운드 객체가 새로 고쳐 지지만 배열 내의 요소의 변경 사항 (예 : 값 변경)은 모니터링되지 않으며 KO 이벤트를 트리거 할 수 없습니다. 예를 들어:
기본 방법을 사용하여 콘솔에서 Luffy를 Luffy로 동적으로 변경하면 UI 페이지가 새로 고침되지 않으며 KO의 배열을 사용하여 배열을 변경하면 페이지가 즉시 새로 고침됩니다. 새로 고침 될 때 이전 변경 사항도 새로 고침 될 것입니다 (Luffy> Lucy). 다시 말해, JS 메모리의 변수는 실제로 변경되었지만 여전히 DOM을 새로 고치는 조치가 부족합니다. 여기에서 볼 수 있듯이 배열을 읽는 방법은 vm.list () [0]입니다. 목록도 기능 객체이기 때문에 리턴 값을 실행하는 것이 원하는 목록 내용입니다. 마찬가지로 vm.list ([ "girl", "girl"])를 통해 Observable 객체 배열을 재설정하고 즉시 UI를 새로 고칠 수 있습니다.
배열 요소의 변경 사항을 UI로 동적으로 반응 해야하는 경우 배열 요소를 관찰 가능한 객체로 설정 한 다음 KO 메소드를 사용하여 배열 요소 값을 변경해야합니다. KO의 메소드 list () [0] ( "Lucy")을 사용하는 것입니다!
관찰 가능한 객체 어레이를 작동하는 두 가지 유형의 방법이 있습니다. 하나는 팝, 푸시, 시프트, 시프트, 리버스, 정렬, 스플 라이스와 같은 원시 JS 배열 방법과 동일합니다. 이 부분은 기본 JS 방법의 사용 및 효과와 동일하므로 다시 반복하지 않습니다.
다른 방법은 주로 다음과 같이 JS에서 사용할 수 없습니다.
• 제거 (sodeem) - 모든 요소 항목을 동일한 값으로 일부 요소로 삭제하고 배열 양식으로 반환합니다. 여기서 의미하는 바는 첫 번째 항목 목록을 직접 삭제할 수 없다는 것입니다. remove (0)이지만 양식 목록 (list () [0])를 사용하여 삭제하십시오. 요컨대, 전달 된 매개 변수는 요소 항목의 값이어야합니다. list () [0]의 형태로 사용할 수 있거나 값 문자열 (예 : "Luffy")을 직접 입력 할 수 있습니다.
• 제거 (function (item) {return item.age <18;}) - 연령 속성이 18 세 미만인 모든 요소 항목을 삭제하고 배열로 반환합니다. 이 사용법은 일반 배열 고차 기능과 다르지 않습니다. 항목은 고차 기능의 매개 변수로 전달됩니다. 배열을 반복 할 때 고차 함수의 반환 값이 실제 값 일 때 항목이 삭제됩니다. 그렇지 않으면 다음 항목으로 이동합니다.
• removeall ([ 'chad', 132, undefined]) - 'chad'또는 123과 같은 값의 모든 요소 항목을 제거하고 배열로 반환합니다.
• removeall () - 모든 항목을 제거하고 배열로 반환합니다.
팁 : 관찰 가능한 물체를 다룰 때, 많은 객체와 빈번한 상호 작용이있는 경우, 각 변경에 즉시 새로 고침하면 성능이 소비됩니다. 현재 확장자 MyObservableArray.extend ({ratelimit : 1000})를 사용하여 지연된 새로 고침을 설정할 수 있습니다. 예를 들어, 관찰 가능한 배열에 요소를 지속적으로 삽입 할 때, 1000ms의 사이클 시간을 설정하여 1000ms 이내의 모든 작업을 자주 DOM 작동으로 인한 성능 악화를 피하기 위해 1000ms 내의 모든 작업을 새로 고침에 집중시킬 수 있습니다.
요약
이 기사는 주로 Knockoutjs : Observable Objects (Array)에서 가장 중요한 개념을 소개합니다. 관찰 가능한 객체는 본질적으로 기능 객체입니다. KO 메소드를 통해 관측 가능한 객체를 작동 할 때 UI를 동적으로 새로 고칠 수 있습니다. 권장 방법입니다. 동시에, 기본 JS 메소드를 통해 관찰 가능한 객체를 작동 할 수도 있지만, 기본 메소드는 UI 디스플레이를 새로 고치지 않으므로 다음 새로 고침 이벤트가 UI로 새로 고침 될 때까지 기다려야합니다.