참새는 작지만 Dojo 사용자 정의 제어 application_dojo에 필요한 모든 기능을 갖추고 있습니다.-JS 튜토리얼-php.cn

이제 jQuery , Ext, 프로토타입, MooTools, Dojo 등과 같은 많은 Javascript 프레임워크 와 제어 라이브러리가 있습니다. 이들은 모두 Google에서 "javascript"를 검색하면 나열됩니다. 프레임워크" 한 페이지. 그 중 MooTools를 제외하고 나머지는 알고 있지만 프로젝트에서는 Ext와 Dojo만 사용해봤습니다. 하지만 저는 Ext를 그다지 좋아하지 않았습니다. 성능 문제가 있고 새 버전에도 요금이 부과됩니다.

또한 Ext에서 공식적으로 제공하는 예제는 모두 JavaScript를 사용하여 컨트롤을 생성하고 초기화합니다. 하나의 JavaScript가 하나의 HTML과 함께 사용되므로 관리가 매우 혼란스럽습니다. 그리고 공식적인 예는 Best Practice이므로 이 모델은 그다지 수용 가능하지 않습니다. 내 눈에 도장은 단점도 장점도 뛰어난 녀석이다.

단점:

1. 문서가 매우 열악합니다.

2. CodeBase는 매우 큽니다(장점, 단점?).

3. 버전이 빠르게 발전하고, 버전이 발전할 때마다 API가 많이 변경되어 아직 성숙되지 않았습니다.

장점:

1. 탁월한 제어 개발 프레임워크입니다.

2. 자바스크립트의 객체지향적 측면을 완벽하게 구현합니다.

EXT와 Dojo를 비교하면 EXT는 제어 라이브러리이고 Dojo는 프레임워크라고 생각합니다. 처음 Dojo를 접했을 때 버전 0.3이었는데 엄청난 변화를 겪었지만 이미 컨트롤에 대한 선입견이 있어서 이제는 더 이상 사용법에 대해 이야기할 생각이 없습니다. Dojo를 사용자 정의 컨트롤로 사용합니다. 도장은 매우 복잡하지만 간단히 3개의 레이어로 구성되어 있다고 생각하면 됩니다.

1. 가장 낮은 레벨이 핵심 API입니다

핵심 API에서 제공하는 메소드는 DOM, 문자열, CSS, 이벤트 등과 관련된 작업을 단순화합니다. 핵심 API는 또한 Java와 유사한 패키지 개념 및 가져오기 메커니즘을 구현하여 코드 구성 및 종속성 관리를 용이하게 합니다.

2. 핵심 API를 기반으로 '컨트롤 생명주기' 개념이 탄생했습니다

이는 제3자가 표준화된 방식으로 컨트롤을 개발할 수 있도록 하는 Dojo의 하이라이트입니다. Dojo를 기반으로 개발된 컨트롤은 강력한 응집력과 객체 지향 특성을 가지고 있습니다.

3. 2를 기반으로 개발된 다양한 컨트롤

Dojo에서 제공하는 컨트롤도 비교적 완벽하지만 역사적인 이유로 깊이 연구되지 않았습니다.

Dojo의 컨트롤을 총칭하여 DIJIT라고 합니다. Dojo 버전의 Hello World 컨트롤을 작성하려면 많은 것을 알 필요가 없습니다.

◆컨트롤은 JS 클래스입니다.

◆모든 컨트롤은 _Widget 또는 해당 하위 클래스에서 상속됩니다. _Widget 클래스는 컨트롤의 수명 주기 관리 기능을 제공합니다. ◆_Template을 동시에 상속할 수 있습니다. 이 클래스를 상속하면 컨트롤의 표시를 설명하는 템플릿을 컨트롤에 바인딩할 수 있습니다.

_Widget 기본 클래스 소개 1. 라이프 사이클 메소드 _Widget은 Dojo 프레임워크가 컨트롤을 초기화할 때 "라이프 사이클 메소드"라는 일련의 메소드를 제공합니다. 사용자 정의 컨트롤은 특정 메서드를 다시 작성하여 자체 초기화 논리를 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다. preamble(/*Object*/ params, /*DOMNode*/node) //일반적으로 사용되지 않는 메서드입니다. 이 메소드는 생성자의 입력 매개변수 param으로 사용됩니다. constructor(/*Object*/ params, /*DOMNode*/node) // 이 메소드는 Java 클래스 의 생성자와 동일합니다. // 이 클래스에서 초기화 작업을 수행합니다. postscript(/*Object*/ params, /*DOMNode*/node) //실제 컨트롤 생성 과정에서는 다음 메서드가 순서대로 호출됩니다(모두 가능) 재정의됨) _Widget.create(/*Object*/params, /*DOMNode*/node) _Widget.postMixInProperties( ) _Widget.buildRendering( ) _Widget.postCreate( ) //가장 많이 사용하는 메소드는 postCreate 메소드입니다. 이 메소드에서는 컨트롤이 초기화되고 인터페이스가 표시됩니다. //비즈니스 관련 처리는 주로 이 메소드에서 시작됩니다

2. 이 클래스의 몇 가지 중요한 속성(이를 통해 컨트롤에 액세스할 수 있음) ◆id: 사용자가 지정하지 않으면 Dojo는 컨트롤에 할당된 고유 번호입니다. 무작위로 하나를 만듭니다. ◆domNode: HTML에서 이 컨트롤에 해당하는 DOM 노드입니다. 가장 기본적인 사용자 정의 컨트롤 예: js 파일: ./hello/world.js(다음 파일 이름은 상대 경로와 관련되어 있으며, 여기서 ./는 "Dojo, dijit, Dojox"와 동일한 수준을 나타냅니다. 테이블 내용).

코드 복사 코드는 다음과 같습니다. //출력하는 클래스 이름 선언 Dojo.provide("hello.world") //Dojo.require("dijit._Widget")에 의존하는 클래스 이름 선언 ; Dojo.require("dijit._Template"); //Dojo.declare는 제어 클래스를 정의합니다. 첫 번째 매개변수: 클래스 이름, 두 번째 매개변수: 상위 클래스 배열, 세 번째 매개변수: 클래스 프로토타입 Dojo.declare("hello.world",[dijit._Widget,dijit._Template], { postCreate:function(){ this.domNode.innerHTML="hellow world" ; } } ); 이 컨트롤의 동작은 매우 간단합니다. postCreate 메소드에서 HTML 페이지의 해당 DOM 노드 내용을 hellow world로 설정합니다. . 코드 복사 코드는 다음과 같습니다. head> Hello World ; Dojo.require("Dojo.parser") Dojo.require("hello.world"); 사용자 정의 컨트롤 소개

&lt ;/body>

modulePaths의 특정 기능과 사용법을 보려면 Google을 방문하세요. 다음으로, 라벨을 작성할 때 이름을 매개변수로 전달할 수 있으며, 그러면 컨트롤에 HELLO XXX가 표시됩니다. 먼저 html 파일을

코드 복사 코드는 다음과 같습니다. Hello World ; Dojo.require("Dojo.parser"); Dojo.require("hello.world");

>모두 주목하세요. 라벨에 "yourName" 속성을 추가했습니다. 컨트롤에서 이 속성을 어떻게 사용하나요? 생성자 메소드에서 이 속성의 값을 받아 컨트롤 클래스 자체의 변수에 값을 할당한 후 postCreate에서 사용할 수 있습니다. JavaScript 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. Dojo.provide("hello.world") Dojo.require("dijit ._Widget"); Dojo.require("dijit._Template"); Dojo.declare("hello.world",[dijit._Widget,dijit._Template], { yourName:'world ', constructor:function(params, node) { this.yourName=params.yourName }, postCreate:function() { this. domNode.innerHTML="hellow " this.yourName; } } );

다음으로 컨트롤의 복잡성을 더욱 높이고 입력 상자를 추가하겠습니다. 이 입력란에 텍스트를 입력하는 동안 hello가 동적으로 업데이트됩니다. 예:

코드 복사

코드는 다음과 같습니다. Dojo.connect(inputText," onkey",this,"updateHello"); 이번에는 postCreate 중에 입력 상자를 동적으로 추가합니다. 이벤트를 입력 상자에 동적으로 바인딩합니다.

코드 복사

코드는 다음과 같습니다. Dojo.provide("hello.world"); Dojo.require("dijit._Widget") Dojo.require("dijit._Template") Dojo. 선언("hello.world",[dijit._Widget,dijit._Template], { yourName:'world', typeIn:null, echoDiv:null, 생성자:function(params ,노드) { this.yourName=params.yourName; }, postCreate:function(){ this.typeIn=document.createElement("input"); typeIn.type="text"; this.domNode.appendChild(this.typeIn); this.echoDiv=document.createElement("div") this.domNode.appendChild(this.echoDiv ; 안녕하세요 } , updateHello:function() { this.echoDiv.innerHTML="hello " this.typeIn.value; } );

HTML 파일의 컨트롤에 대한 참조는 변경할 필요가 없습니다. 엄밀히 말하면 yourName="jinxfei" 속성을 삭제해야 합니다. 이 약간 복잡한 제어로부터 우리는 이미 Dojo의 장점, 즉 진정한 객체 지향성을 볼 수 있습니다! 컨트롤 관리 범위 내의 DOM 요소는 클래스에 배치되고 속성으로 사용될 수 있습니다(this.xxx로 직접 참조됨). 이러한 방식으로 document.getElementByID()가 방지되고 컨트롤이 응집력이 있습니다. 이벤트에 응답하는 메서드도 클래스 메서드이므로 관리하기 어려운 페이지에 많은 수의 개별 함수를 선언하는 것을 방지합니다.