Knockout.js 란 무엇입니까?
Knockout은 우수한 JavaScript 라이브러리로, 깨끗하고 깔끔한 기본 데이터 모델을 사용하여 디스플레이 및 편집 기능이 우수한 사용자 인터페이스 리치 텍스트를 작성하는 데 도움이됩니다. 언제든지 로컬 UI 컨텐츠를 자동으로 업데이트해야합니다 (예 : 사용자 동작의 변경 또는 외부 데이터 소스의 변경에 따라) KO를 쉽게 구현할 수 있으며 유지 관리가 매우 쉽습니다.
1. 주요 범주 관계 다이어그램
II. 수업 책임
2.1. 관찰 가능 (일반 모니터링 객체 클래스)
관찰 가능의 내부 구현 (기타 기능) :
1. 먼저 관찰 가능한 이름의 FN을 선언합니다 (이것은 수업이라고 할 수 있습니다)
2. ko 고유 한 최신 값 속성을 추가하여 매개 변수가 전달한 값을 저장합니다.
3. 기본 __proto__ 속성이 지원되는 경우, hasOwnProperty를 사용하여 속성이 상속 될지 여부를 결정하고 __proto__ 코드 (Utils 클래스)를 판단합니다.
var cansetprototype = ({__proto__ : []} instanceof array);
4. KO.SubScribebable의 FN 속성의 초기 방법은 관찰 가능한 것을 초기화합니다 (주로 구독을 추가하고 관련 속성을 게시).
5. 관찰 가능한 그런 다음 관찰 가능한 FN 관련 속성 및 방법을 상속합니다 (관찰 가능한 FN은 값이 변경되기 전과 값 변경 후에 실행 전략을 포함합니다)
// ObservablesVar의 프로토 타입 정의 vercipablefn = { 'EqualityComparer': valuesAreprimitiveAndequal, peek : function () {reture this [veriencableTestValue]; . }, valueWillMutate : function () {this [ 'notifysubScriber'] (this [weantmentestValue], 'beforechange'); }};6. 관찰 가능한 방법의 구현을 반환합니다 (들어오는 매개 변수가 설정되고 매개 변수가없는 경우 얻을 수 있습니다).
7.이 클래스는 또한 지정된 인스턴스 에이 특성을 갖는지 여부를 결정하기 위해 hasprototype를 제공합니다 (지정된 인스턴스가 모니터링 객체인지 확인하기 위해), iswritableBservable (쓰기 가능한 모니터링 객체인지 결정).
2.2. ObservableArray (배열 모니터링 객체 클래스)
1. 먼저 ko.observable 메소드를 실행하여 객체를 모니터링 가능한 클래스 (결과)로 만들 수 있습니다.
2. 그런 다음 KO.ObservableArray에서 FN 객체를 확장합니다 (KO.OBSERVABLEARRAY의 FN은 제거, 푸시 등과 같은 배열 관련 작동 방법을 다시 작성합니다).
3. Extends (TrackArraychanages, 자세한 내용은 2.5 참조)를 통해 메소드를 확장하십시오.
4. 확장 된 결과 객체를 반환합니다.
ko.observablearray = function (InitialValues) {initialValues = initialValues || []; if (InitialValues! = 'object'||! ko.observablearray [ 'fn']); return result.extend ({ 'trackArraychanges': true});};2.3. 구독 (구독 객체 클래스)
1. 가입 및 출판을위한 기능 모듈은 관찰 가능하고 관찰 가능한 기본 클래스입니다.
2. 여기에는 객체 변경 모니터링을 구독하는 데 사용되는 방법이 있습니다. 개발의 경우이 상속 지점을 사용하여 입력 할 수 있습니다.
구독 : 함수 (콜백, 콜백 타구, 이벤트) {var self = this; event = event || defaultevent; var boundCallback = CallbackTarget? Callback.bind (CallbackTarget) : 콜백; var 구독 = 새로운 ko.subscription (self, boundCallback, function () {ko.utils.arrayremoveItem (self._subscriptions [event], subscription); if (self.aftersubscriptionremove) self.aftersubscriptionremove (}); (self.beforesubscriptionAdd) self.beforesubscriptionAddd (이벤트); if (! self._subscriptions [event]) self._subscriptions [event] = []; self._subscriptions [event] .push (구독); return subscription;}3. extend :이 방법은 확장 메소드 (예 : ObservableArray.Changetracking Extension 클래스)에 의해 추가 된 확장 클래스를 추가하는 데 사용됩니다.
4. 확장 확장 방법은 모니터링 객체가 등록 된 직후에 실행됩니다. 전달 된 매개 변수는 대상 (현재 객체) 및 옵션 (확장자가 호출 될 때 전달되는 매개 변수)입니다.
5. extend는 확장자를 설치하는 방법이며 즉시 확장자에서 코드를 실행합니다.
2.4. 확장 (확장 모니터링 객체 클래스)
1. KO의 기본 확장 컬렉션
2. 확장자를 설치하기 위해 applyExtenders 방법을 제공하십시오
function applyextenders (requesteDextenders) {var target = this; if (requesteDextenders) {ko.utils.ObjectORCH (requestEdextEnders, function (key, value) {var extenderHandler = ko.extenders [key]; if (typeof extenderHandler == 'function') {target, values (target, value)} |} |} |};2.5. ObservableArray.Changetracking (확장 모니터링 객체의 특정 구현)
1.이 확장은 주로 배열 변경 모니터링을 구현 한 다음 배열의 차이를 계산하고 관련 구독 이벤트를 트리거합니다.
2. CachediffforkNownoperation : 차이 비교를위한 배열의 캐시 작업
3. BeforesubscriptionAddd 및 AftersubscriptionRemove 관련 구독 (아직 완전히 이해되지 않음).
위는 편집자가 소개 한 녹아웃 소스 코드 분석에 대한 심층 분석입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!