참새는 작지만 Dojo 사용자 정의 제어 application_dojo에 필요한 모든 기능을 갖추고 있습니다.
이제 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 프레임워크가 컨트롤을 초기화할 때 "라이프 사이클 메소드"라는 일련의 메소드를 제공합니다. 사용자 정의 컨트롤은 특정 메서드를 다시 작성하여 자체 초기화 논리를 추가할 수 있습니다.
constructor(/*Object*/ params, /*DOMNode*/node)
// 이 메소드는 Java 클래스
의 생성자와 동일합니다. // 이 클래스에서 초기화 작업을 수행합니다.
postscript(/*Object*/ params, /*DOMNode*/node)
//실제 컨트롤 생성 과정에서는 다음 메서드가 순서대로 호출됩니다(모두 가능) 재정의됨)
_Widget.create(/*Object*/params, /*DOMNode*/node)
_Widget.postMixInProperties( )
_Widget.buildRendering( )
_Widget.postCreate( )
//가장 많이 사용하는 메소드는 postCreate 메소드입니다. 이 메소드에서는 컨트롤이 초기화되고 인터페이스가 표시됩니다.
//비즈니스 관련 처리는 주로 이 메소드에서 시작됩니다
◆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>
>모두 주목하세요. 라벨에 "yourName" 속성을 추가했습니다. 컨트롤에서 이 속성을 어떻게 사용하나요? 생성자 메소드에서 이 속성의 값을 받아 컨트롤 클래스 자체의 변수에 값을 할당한 후 postCreate에서 사용할 수 있습니다. JavaScript 코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
this.yourName=params.yourName
},
postCreate:function()
{
this. domNode.innerHTML="hellow " this.yourName;
}
}
);
다음으로 컨트롤의 복잡성을 더욱 높이고 입력 상자를 추가하겠습니다. 이 입력란에 텍스트를 입력하는 동안 hello가 동적으로 업데이트됩니다. 예:
코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
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()가 방지되고 컨트롤이 응집력이 있습니다. 이벤트에 응답하는 메서드도 클래스 메서드이므로 관리하기 어려운 페이지에 많은 수의 개별 함수를 선언하는 것을 방지합니다.

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

간단한 자바 스크립트 함수는 날짜가 유효한지 확인하는 데 사용됩니다. 기능 isValidDate (s) { var 비트 = s.split ( '/'); var d = 새로운 날짜 (비트 [2]/'비트 [1]/'비트 [0]); return !! (d && (d.getmonth () 1) == 비트 [1] && d.getDate () == 숫자 (비트 [0]); } //시험 var

이 기사에서는 jQuery를 사용하여 DOM 요소의 내부 마진 및 마진 값, 특히 요소의 외부 마진 및 내부 마진의 특정 위치를 얻고 설정하는 방법에 대해 설명합니다. CSS를 사용하여 요소의 내부 및 외부 마진을 설정할 수는 있지만 정확한 값을 얻는 것이 까다로울 수 있습니다. // 설정 $ ( "div.header"). css ( "margin", "10px"); $ ( "Div.Header"). CSS ( "패딩", "10px"); 이 코드는 생각할 수 있습니다

이 기사는 10 개의 탁월한 jQuery 탭과 아코디언을 탐구합니다. 탭과 아코디언의 주요 차이점은 콘텐츠 패널이 표시되고 숨겨진 방식에 있습니다. 이 10 가지 예를 살펴 보겠습니다. 관련 기사 : 10 JQuery Tab 플러그인

웹 사이트의 역학 및 시각적 매력을 높이기 위해 10 개의 탁월한 jQuery 플러그인을 발견하십시오! 이 선별 된 컬렉션은 이미지 애니메이션에서 대화식 갤러리에 이르기까지 다양한 기능을 제공합니다. 이 강력한 도구를 탐색합시다. 관련 게시물 : 1

HTTP-Console은 HTTP 명령을 실행하기위한 명령 줄 인터페이스를 제공하는 노드 모듈입니다. 웹 서버, 웹 서비스에 대해 만들어 졌는지 여부에 관계없이 HTTP 요청과 함께 어떻게 진행되고 있는지 정확하게 보는 데 유용합니다.

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

다음 jQuery 코드 스 니펫은 DIV 내용이 컨테이너 요소 영역을 초과 할 때 스크롤 바를 추가하는 데 사용될 수 있습니다. (데모 없음, FireBug에 직접 복사하십시오) // d = 문서 // w = 창 // $ = jQuery var contentArea = $ (this), wintop = contentArea.scrolltop (), docheight = $ (d) .height (), winheight = $ (w) .height (), divheight = $ ( '#c
