유지 관리 가능한 객체 지향 JavaScript 코드를 작성할 수 있으면 돈을 절약할 수 있을 뿐만 아니라 인기가 있습니다. 안 믿어? 너 자신이나 다른 사람이 언젠가 돌아와서 너의 코드를 중용할 수도 있다. 이 경험을 최대한 덜 고통스럽게 할 수 있다면 많은 시간을 절약할 수 있다. 지구인들은 시간이 돈이라는 것을 알고 있다. 마찬가지로, 당신은 누군가의 두통을 덜어주는 과정을 도와서 그의 편애를 얻을 수 있을 것이다. (윌리엄 셰익스피어, 템페스트, 희망명언) 그러나 유지 관리 가능한 객체 지향 JavaScript 코드를 작성하는 방법을 살펴보기 전에 객체 지향이 무엇인지 빠르게 살펴보겠습니다. 객체 지향 개념을 이미 알고 있다면 다음 섹션을 바로 건너뛸 수 있습니다.
객체 지향이란 무엇입니까?
객체 지향 프로그래밍은 주로 코드를 통해 실제 실제 객체를 나타냅니다. 객체를 작성하려면 먼저 "클래스" 를 작성하여 정의해야 합니다. 클래스는 계정, 직원, 내비게이션 메뉴, 자동차, 식물, 광고, 음료 등 거의 모든 것을 대표할 수 있다. 객체를 만들 때마다 클래스에서 객체를 인스턴스화합니다. 즉, 클래스의 인스턴스를 객체로 만드는 것입니다. 사실, 일반적으로 하나 이상의 동종 사물을 처리할 때 대상을 사용합니다. 또한 간단한 함수식 절차만 있으면 잘 할 수 있다. 객체는 기본적으로 데이터의 컨테이너입니다. 따라서 employee 대상에서 직원 번호, 이름, 입사일, 직함, 임금, 스펙 등을 저장해야 할 수도 있습니다.
객체에는 데이터를 처리하는 함수 ("메서드" 라고도 함) 도 포함됩니다. 메서드는 데이터 무결성을 보장하고 저장하기 전에 데이터를 변환하는 매체로 사용됩니다. 예를 들어 메서드는 임의의 형식의 날짜를 수신한 다음 저장하기 전에 표준화된 형식으로 변환할 수 있습니다. 마지막으로 클래스는 다른 클래스를 상속할 수 있습니다. 상속을 통해 다른 클래스에서 동일한 코드를 재사용할 수 있습니다. 예를 들어, 은행 계좌와 비디오 가게 계좌는 모두 개인 정보, 계좌 개설 날짜, 지부 정보 등을 포함한 기본적인 계좌 클래스를 상속할 수 있습니다. 그런 다음 각각 자체 거래 또는 대출 처리와 같은 데이터 구조와 방법을 정의할 수 있습니다.
경고: JavaScript 객체 지향은 다릅니다.
이전 섹션에서는 클래식 객체 지향 프로그래밍의 기본 사항에 대해 간략하게 설명했습니다. 고전을 말하는 것은 자바스크립트가 이러한 규칙을 따르지 않기 때문이다. 반대로 JavaScript 의 클래스는 함수로 쓰여지고 상속은 프로토타입을 통해 이루어집니다. 프로토타입 상속은 기본적으로 클래스에서 클래스를 상속하는 대신 프로토타입 속성을 사용하여 객체 상속을 구현하는 것을 의미합니다.
객체 인스턴스화
다음은 JavaScript 에서 객체 인스턴스화의 예입니다.
//Employee 클래스 정의
Function Employee(num, fname, lname) {
This.getfullname = function () {
Return fname+""+lname；;
}
}
//Employee 객체 인스턴스화
Var John = new employee ("4815162342", "John", "doe");
Alert ("the employee's full name is"+john.get full name ()); 여기서 주의해야 할 세 가지 요점이 있습니다.
1' class' 함수 이름의 첫 글자는 대문자로 써야 한다. 즉, 이 함수의 목적은 일반 함수처럼 호출되는 것이 아니라 인스턴스화되는 것입니다.
2 인스턴스화할 때 new 연산자를 사용했습니다. New 를 생략하고 함수만 호출하면 많은 문제가 발생할 수 있습니다.
3 getFullName 은 this 연산자에 할당되므로 공개 * * * 를 사용할 수 있지만 fname 과 lname 은 사용할 수 없습니다. Employee 함수에 의해 생성된 클로저는 getFullName 에서 fname 및 lname 으로 진입할 수 있지만 다른 클래스에 대해서는 여전히 비공개입니다.
프로토타입 상속
다음은 JavaScript 에서 프로토타입 상속의 예입니다.
//Human 클래스 정의
Function Human() {
This.setName = function (fname, lname) {
This.fname = fname；;
This.lname = lname；;
}
This.getfullname = function () {
Return this.fname+""+this.lname;
}
}
//Employee 클래스 정의
Function Employee(num) {
This.getNum = function () {
Return num；;
}
}
//Employee 가 Human 클래스 상속
Employee.prototype = newhuman ();
//Employee 객체 인스턴스화
Var John = new employee ("4815162342");
John.setName("John ","doe ");
Alert (john.getfullname ()+"'s employee number is"+john.getnum ()); 이번에 만든 Human 클래스에는 인류의 모든 것이 포함되어 있습니다. * * * 속성도 있습니다. 저도 fname 과 lname 을 넣었습니다. 직원뿐만 아니라 모든 사람이 이름을 가지고 있기 때문입니다. 그런 다음 Human 객체를 해당 prototype 속성에 할당합니다.
상속을 통한 코드 재사용
앞의 예에서 원래의 Employee 클래스는 두 부분으로 분해되었다. 모든 인간 공통 속성이 Human 클래스로 옮겨져 Employee 가 Human 을 상속하도록 합니다. 이렇게 하면 Human 안의 속성은 Student, Client, Citizen, Visitor 등 다른 대상에 의해 사용될 수 있다. 이제 보시다시피 코드를 분할하고 재사용하는 좋은 방법입니다. Human 객체 작업을 할 때는 Human 을 상속하기만 하면 기존 속성을 사용할 수 있습니다. 각 개별 객체에 대해 개별적으로 다시 만들 필요가 없습니다. 또한 "중간 이름" 속성을 추가하려면 한 번만 추가하면 Human 클래스를 상속하는 속성을 즉시 사용할 수 있습니다.
반대로, 만약 우리가 단지 하나의 개체에' 중간 이름' 의 속성을 더하고 싶다면, 우리는 Human 클래스 안에 추가하지 않고 그 대상에 직접 추가할 것이다.
1. 공용 및 전용
다음 항목에서는 클래스의 공용 및 전용 변수에 대해 이야기하고 싶습니다. 객체에서 데이터를 처리하는 방식에 따라 데이터는 개인 또는 공용으로 처리됩니다. 개인 속성이 반드시 다른 사람이 액세스할 수 없다는 것을 의미하지는 않습니다. 어떤 방법에만 필요할 수도 있습니다.
읽기 전용
때로는 개체를 만들 때 값을 갖고 싶을 때도 있습니다. 일단 만들어지면 다른 사람이 이 값을 다시 바꾸지 않기를 바란다. 이를 위해 전용 변수를 만들어 인스턴스화할 때 값을 지정할 수 있습니다.
Function animal (유형) {
Vardata = [];
데이터 ['유형'] = 유형;
This.getType = function () {
Return data ['type'];
}
}
Var fluffy = new animal ('dog');
Fluffy.gettype ();
//반환' dog' 이 예제에서 Animal 클래스는 로컬 배열 data 를 만듭니다. Animal 객체가 인스턴스화되면 type 값이 전달되어 data 배열에 배치됩니다. 개인용이므로 이 값을 덮어쓸 수 없습니다 (Animal 함수는 해당 범위를 정의합니다). 객체가 인스턴스화된 후에는 type 값을 읽는 유일한 방법은 getType 메서드를 호출하는 것입니다. GetType 은 Animal 에 정의되어 있기 때문에 Animal 에서 생성된 클로저로 getType 은 data 로 들어갈 수 있습니다. 이 경우 대상의 유형을 읽을 수는 있지만 변경할 수는 없습니다.
한 가지 중요한 점은 객체가 상속될 때 "읽기 전용" 기술을 사용할 수 없다는 것입니다. 상속을 수행한 후 인스턴스화된 각 오브젝트는 이러한 읽기 전용 변수를 즐기고 해당 값을 덮어씁니다. 가장 간단한 해결 방법은 클래스의 읽기 전용 변수를 공용 * * * 변수로 변환하는 것입니다. 하지만 당신은 그들을 비공개로 유지해야 합니다. Philippe 가 논평에서 언급한 기술을 사용할 수 있습니다.
공용
물론 어떤 속성의 값을 임의로 읽고 쓰고자 하는 경우도 있습니다. 이를 위해서는 this 연산자를 사용해야 합니다.
Function Animal() {
This.mood ='';
}
Var fluffy = new animal ();
Fluffy.mood =' happy';
Fluffy.mood；;
//돌아가기' happy'
이번에 Animal 클래스는 mood 라는 속성을 공개해 자유롭게 읽고 쓸 수 있다. 마찬가지로 이전 예제의 getType 함수와 같은 공용 속성에 함수를 할당할 수도 있습니다. 단지 getType 에 값을 할당하지 않도록 주의해야 한다. 그렇지 않으면 너는 그것을 망칠 것이다.
완전 개인
마지막으로, 완전히 사유화된 지역 변수가 필요하다는 것을 알게 될 것입니다. 이렇게 하면 공용 메서드를 만들지 않고도 첫 번째 예와 동일한 패턴을 사용할 수 있습니다.
Function Animal() {
Var secret = "You'll never know! "
}
Var fluffy = new animal ();
2. 유연한 API 쓰기
지금까지 클래스 작성에 대해 설명했습니다. 제품 요구 사항의 변화와 동기화를 유지하기 위해서는 코드를 시기적절하게 유지해야 합니다. 이미 특정 프로젝트를 수행했거나 제품을 장기간 유지 관리해 본 적이 있다면, 수요가 변화했다는 것을 알아야 한다. (존 F. 케네디, 노력명언) 이것은 논쟁의 여지가 없는 사실이다. 만약 네가 그렇게 생각하지 않는다면, 너의 코드는 아직 쓰기 전에 황폐해질 것이다. 갑자기 탭의 내용을 애니메이션으로 만들거나 Ajax 호출을 통해 데이터를 얻어야 할 수도 있습니다. 미래를 정확하게 예측하는 것은 불가능하지만, 미래의 불시의 수요에 대비하여 코드를 유연하게 쓸 수 있다.
Saner 매개 변수 목록
매개 변수 목록을 디자인할 때 코드를 사전 예방적으로 만들 수 있습니다. 매개 변수 목록은 다른 사람이 코드를 구현할 수 있도록 하는 주요 접촉점이며, 제대로 설계되지 않았다면 문제가 될 것입니다. 다음과 같은 매개 변수 목록을 피해야 합니다.
Function Person(employeeId, fname, lname, tel, fax, email, email2, dob) {
}
이 클래스는 매우 취약합니다. 코드를 게시한 후 중간 이름 매개 변수를 추가하려면 순서 문제 때문에 목록 끝에 추가해야 합니다. 이것은 일을 어색하게 만든다. 각 매개 변수에 값을 할당하지 않으면 매우 어려울 것입니다. 예:
Var Ara = new Person(1234, "ara", "Pehlivanian", "514-555-1234", null, null, null 조작 매개 변수 목록이 더 깔끔하고 유연한 방법은 이 모드를 사용하는 것입니다.
Function Person(employeeId, data) {
} 첫 번째 매개 변수는 필수이기 때문입니다. 나머지는 대상의 안에 섞여서 유연하게 사용할 수 있다.
Var ara = new Person(1234, {
Fname： "Ara ",
Lname： "Pehlivanian ",
인텔: "514-555-1234",
Dob: "1976-05-17"
}); 이 모델의 아름다움은 읽기가 편리하고 매우 유연하다는 것이다. 팩스, 전자 메일 및 전자 메일 2 는 완전히 무시되었습니다.
뿐만 아니라 오브젝트에는 특정 순서가 없으므로 중간 이름 매개변수를 쉽게 추가할 수 있습니다.
Var ara = new Person(1234, {
Fname： "Ara ",
Mname： "Chris ",
Lname： "Pehlivanian ",
인텔: "514-555-1234",
Dob: "1976-05-17"
}); 클래스 내의 코드는 중요하지 않습니다. 내부 값은 인덱스를 통해 액세스할 수 있기 때문입니다.
Function Person(employeeId, data) {
This.fname = data ['fname'];
} 데이터 ['fname'] 가 값을 반환하면 그는 설정됩니다. 그렇지 않으면, 설정되지 않았고, 손실도 없었다.
코드를 포함할 수 있도록
시간이 지날수록 제품 수요는 너의 행동에 더 많은 요구를 할 수 있다. 이 행동은 당신 클래스의 핵심 기능과는 반푼의 관계가 없다. (알버트 아인슈타인, 도전명언) 한 탭의 패널에서 다른 탭의 외부 데이터를 가져올 때 이 탭 패널의 내용을 회색으로 바꾸는 것과 같은 클래스의 유일한 구현일 수도 있습니다. 이러한 기능을 클래스 안에 넣으려고 할 수도 있지만, 그것들은 거기에 속하지 않는다. 탭 모음의 책임은 탭을 관리하는 것입니다. 애니메이션과 데이터 획득은 완전히 다른 두 가지이며 탭 바의 코드와 분리되어야 합니다. 탭 표시줄을 만들 수 있는 유일한 방법은 경우에 따라 추가 기능을 제외하는 것입니다. 코드에 동작을 포함할 수 있도록 하는 것입니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 탭명언) 즉, 이벤트를 만들어 코드에 onTabChange, afterTabChange, onShowPanel, afterShowPanel 등과 같은 중요한 순간에 연결할 수 있습니다. 이 경우 onShowPanel 이벤트와 쉽게 연결하여 패널 내용을 회색으로 바꾸는 프로세서를 쓸 수 있어 모두 즐거워할 수 있다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 스포츠명언) 자바스크립트 라이브러리는 이 일을 충분히 쉽게 할 수 있게 해 주지만, 직접 쓰는 것도 그리 어렵지 않다. (윌리엄 셰익스피어, 자바스크립트, 독서명언) 다음은 유이 3 사용의 예입니다.
Lt; Script type = "text/JavaScript" src = "/combo? 3.2.0/빌드/yui/yui-min.js "gt; Lt; /스크립트 gt;
Lt; Script type = "text/JavaScript" gt;
Yui (). use ('이벤트', function (Y) {
Function TabStrip() {
This.showPanel = function () {
This.fire ('on show panel');
//패널 코드 표시
This.fire ('aftershowpanel');
}
}
//TabStrip 이 자주 사용하는 이벤트를 발생시킬 수 있도록 허용
Y.augment(TabStrip, y.eventtarget);
Var ts = new tabstrip ();
//TabStrip 의 이 인스턴스에 대한 공통 시간 프로세서 생성
Ts.on('onShowPanel', function () {
//패널을 보여주기 전에 해야 할 일
});
Ts.on('onShowPanel', function () {
//패널을 보여주기 전에 해야 할 다른 일
});
Ts.on('afterShowPanel', function () {
//패널 표시 후 할 일
});
Ts.showpanel ();
});
Lt; /스크립트 gt; 이 예제에는 showPanel 메서드가 있는 간단한 TabStrip 클래스가 있습니다. 이 메서드는 onShowPanel 과 afterShowPanel 이라는 두 가지 이벤트를 발생시킵니다. 이 능력은 Y.EventTarget 으로 클래스를 확장함으로써 이루어진다. 일단 완성되면, 우리는 TabStrip 개체를 인스턴스화하고 프로세서 더미를 모두 할당했다. 이 코드는 인스턴스를 처리하는 유일한 동작이며 현재 클래스의 혼란을 피할 수 있는 공통 코드입니다.
요약
코드를 재사용하려는 경우, 같은 웹 페이지, 같은 웹 사이트 또는 프로젝트 간에 코드를 재사용하려면 클래스 내에서 패키지화하고 구성하는 것을 고려해 보십시오. 객체 지향 JavaScript 는 자연스럽게 더 나은 코드 구성 및 코드 재사용을 지원합니다. 게다가, 약간의 선견지명이 있으면 코드를 충분히 융통성 있게 쓸 수 있고, 코드를 다 쓴 후에도 오랫동안 계속 사용할 수 있다. (윌리엄 셰익스피어, 윈스턴, 원초적, 원초적, 원초적, 원초적) 재사용 가능한 JavaScript 코드를 작성하면 당신, 팀, 그리고 당신 회사의 시간과 돈을 절약할 수 있습니다. 이것은 확실히 너를 크게 환영받게 할 것이다.