유지 관리 가능한 객체 지향 JavaScript 코드 작성 [번역]_js 객체 지향

유지 관리 가능한 객체 지향(OO) JavaScript를 작성하면 비용을 절약하고 인기를 얻을 수 있습니다. 나를 믿지 못합니까? 당신이나 다른 누군가가 돌아와서 당신의 코드를 작업할 가능성이 높습니다. 가능한 한 고통스럽지 않은 경험을 만들면 시간이 절약될 것입니다. 이는 우리 모두가 알고 있듯이 돈에 해당합니다. 또한 방금 골치 아픈 일을 겪은 사람들의 호의를 얻게 될 것입니다. 하지만 유지 관리 가능한 OO JavaScript를 작성하기 전에 OO가 무엇인지 간단히 살펴보겠습니다. OO에 대해 이미 알고 계시다면 다음 섹션을 건너뛰셔도 됩니다.

OO란 무엇인가요?
객체 지향 프로그래밍은 기본적으로 코드에서 작업하려는 물리적인 실제 객체를 나타냅니다. 객체를 생성하려면 먼저 클래스라는 것을 작성하여 객체를 정의해야 합니다. 클래스는 계정, 직원, 탐색 메뉴, 차량, 식물, 광고, 음료 등 거의 모든 것을 나타낼 수 있습니다. 그런 다음 작업할 객체를 생성할 때마다 클래스에서 객체를 인스턴스화합니다. 즉, 작업할 개체를 제공하는 클래스의 인스턴스를 만듭니다. 실제로 객체를 사용하기에 가장 좋은 시기는 무엇이든 둘 이상을 처리할 때입니다. 그렇지 않으면 간단한 기능적 프로그램도 마찬가지로 작동할 것입니다. 객체는 본질적으로 데이터의 컨테이너입니다. 따라서 직원 개체의 경우 직원 번호, 이름, 시작 날짜, 직위, 급여, 연공서열 등을 저장할 수 있습니다. 개체에는 해당 데이터를 처리하는 함수(메서드라고 함)도 포함됩니다. 데이터 무결성을 보장하기 위해 방법이 중개자로 사용됩니다. 또한 데이터를 저장하기 전에 데이터를 변환하는 데에도 사용됩니다. 예를 들어, 메서드는 임의 형식의 날짜를 수신한 다음 이를 저장하기 전에 표준화된 형식으로 변환할 수 있습니다. 마지막으로 클래스는 다른 클래스로부터 상속받을 수도 있습니다. 상속을 사용하면 다양한 유형의 클래스에서 코드를 재사용할 수 있습니다. 예를 들어, 은행 계좌와 비디오 가게 계좌 클래스는 모두 프로필 정보, 계좌 생성 날짜, 지점 정보 등에 대한 필드를 제공하는 기본 계좌 클래스에서 상속할 수 있습니다. 그런 다음 각각은 데이터 구조를 처리하는 자체 거래 또는 대여를 정의합니다. 및 방법.

경고: JavaScript OO는 다릅니다
이전 섹션에서는 고전적인 객체 지향 프로그래밍의 기본에 대해 설명했습니다. 제가 고전적이라고 말하는 이유는 JavaScript가 이러한 규칙을 제대로 따르지 않기 때문입니다. 대신 JavaScript 클래스는 실제로 함수로 작성되고 상속은 프로토타입입니다. 프로토타입 상속은 기본적으로 클래스에서 클래스를 상속하는 것이 아니라 프로토타입 속성을 사용하여 객체에서 상속하는 것을 의미합니다.

객체 인스턴스화
다음은 JavaScript의 객체 인스턴스화 예입니다.

复system代码 代码如下:

// Employee 클래스 정의
function Employee(num, fname, lname) {
this.getFullName = function () {
return fname " " 이름;
}
};
// Employee 개체 인스턴스화
var john = new Employee("4815162342", "John", "Doe");
alert("직원의 전체 이름은 " john.getFullName())입니다.

여기서 주목해야 할 세 가지 중요한 사항이 있습니다.

"class" 함수의 첫 글자를 대문자로 표시했습니다. 이러한 중요한 구별을 통해 사람들은 그것이 인스턴스화를 위한 것이며 일반 함수로 호출되지 않는다는 것을 알 수 있습니다.
인스턴스화할 때 new 연산자를 사용합니다. 이를 그대로 두면 단순히 함수를 호출하여 문제가 발생할 수 있습니다.
getFullName은 this 연산자에 할당되었기 때문에 공개적으로 사용할 수 있지만 fname 및 lname은 그렇지 않습니다. Employee 함수에 의해 생성된 클로저는 fname 및 lname에 대한 getFullName 액세스를 제공하는 동시에 다른 모든 사람에게는 비공개로 유지되도록 허용합니다.
프로토타입 상속
다음은 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 = new Human();

// Employee 객체 인스턴스화
var john = new Employee("4815162342");
john.setName("John", "Doe");
alert(john.getFullName() "의 직원 번호는 " john.getNum())입니다.

이번에는 인간에게 공통적인 속성을 포함하는 Human 클래스를 만들었습니다. 직원뿐만 아니라 모든 인간이 이름을 갖고 있으므로 fname과 lname을 거기로 옮겼습니다. 그런 다음 프로토타입 속성에 Human 개체를 할당하여 Employee 클래스를 확장했습니다.

상속을 통한 코드 재사용
이전 예에서는 원래 Employee 클래스를 두 개로 분할했습니다. 모든 인간에게 공통적인 모든 속성을 Human 클래스로 옮긴 다음 Employee가 Human에서 상속받도록 했습니다. 이렇게 하면 Human에 배치된 속성을 Student, Client, Citizen, Visitor 등과 같은 다른 개체에서 사용할 수 있습니다. 지금까지 알 수 있듯이 이는 코드를 구분하고 재사용하는 좋은 방법입니다. 인간을 다루는 모든 단일 유형의 객체에 대해 이러한 모든 속성을 다시 생성하는 대신 인간에서 상속하여 이미 사용 가능한 것을 사용할 수 있습니다. 게다가 중간 이름과 같은 속성을 추가하고 싶다면 한 번만 수행하면 Human에서 상속받은 모든 사람이 즉시 사용할 수 있습니다. 반대로 중간 이름 속성을 하나의 개체에만 추가하려는 경우 Human에 추가하는 대신 해당 개체에서 직접 수행할 수 있습니다.

Public과 Private
클래스에서 public과 private 변수에 대한 주제를 다루고 싶습니다. 개체의 데이터로 수행하는 작업에 따라 해당 개체를 비공개 또는 공개로 설정할 수 있습니다. 사유 재산이 반드시 사람들이 이에 접근할 수 없다는 것을 의미하지는 않습니다. 당신은 그들이 당신의 방법 중 하나를 먼저 거치기를 원할 수도 있습니다.

읽기 전용
객체가 생성되는 순간에 한 번만 정의된 값만 원하는 경우가 있습니다. 일단 생성되면 누구도 해당 값을 변경하는 것을 원하지 않습니다. 이를 수행하려면 개인 변수를 생성하고 인스턴스화 시 해당 값을 설정해야 합니다.

复system代码 代码如下:

기능 동물(유형) {
var 데이터 = [];
데이터['유형'] = 유형;
this.getType = function () {
return data['type'];
}
}

var 솜털 = new Animal('개');
fluffy.getType(); // '개' 반환

이 예에서는 Animal 클래스 내에 data라는 로컬 배열을 만듭니다. Animal 객체가 인스턴스화되면 유형 값이 전달되어 데이터 배열에 설정됩니다. 이 값은 비공개이므로 덮어쓸 수 없습니다(Animal 함수가 해당 범위를 정의함). 객체가 인스턴스화되면 유형 값을 읽는 유일한 방법은 명시적으로 노출한 getType 메서드를 호출하는 것입니다. getType은 Animal 내부에 정의되어 있으므로 Animal이 생성한 클로저 덕분에 데이터에 액세스할 수 있습니다. 이런 방식으로 사람들은 객체의 유형을 읽을 수 있지만 변경할 수는 없습니다.

객체가 상속되면 "읽기 전용" 기술이 작동하지 않는다는 점에 유의하는 것이 중요합니다. 상속이 수행된 후 인스턴스화된 모든 개체는 해당 읽기 전용 변수를 공유하고 서로의 값을 덮어씁니다. 가장 간단한 해결책은 클래스의 읽기 전용 변수를 공개 변수로 변환하는 것입니다. 그러나 비공개로 유지해야 하는 경우 Philippe이 의견에서 지적한 기술을 사용할 수 있습니다.

공개
그러나 속성 값을 마음대로 읽고 쓸 수 있어야 하는 경우가 있습니다. 그렇게 하려면 this 연산자를 사용하여 속성을 노출해야 합니다.

复主代码 代码如下:

function Animal() {
this.mood = '';
}

var 솜털 = new Animal();
fluffy.mood = '행복';
푹신한.분위기; // 'happy'를 반환합니다

이번에 Animal 클래스는 마음대로 쓰고 읽을 수 있는 분위기라는 속성을 노출합니다. 이전 예제의 getType 함수와 같은 공용 속성에 함수를 동일하게 할당할 수 있습니다. getType과 같은 속성에 값을 할당하지 않도록 주의하세요. 그렇지 않으면 해당 값과 함께 속성이 삭제됩니다.

완전히 비공개
마지막으로, 완전히 비공개인 지역 변수가 필요한 시나리오에 직면하게 될 수도 있습니다. 이 경우 첫 번째 예와 동일한 패턴을 사용하고 사람들이 액세스할 수 있는 공개 메서드를 만들지 않을 수 있습니다.

复제대码 代码如下:

function Animal() {
var secret = " 넌 절대 모를 거야!"
}
var furry = new Animal();

유연한 API 작성
이제 클래스 생성을 다루었으므로 제품 요구 사항 변경 사항을 따라잡기 위해 미래에도 대비해야 합니다. 프로젝트 작업을 수행했거나 제품을 장기간 유지관리해 본 적이 있다면 요구 사항이 변경된다는 것을 알고 계실 것입니다. 그것은 삶의 사실입니다. 다르게 생각하는 것은 코드가 작성되기도 전에 노후화되는 것을 의미합니다. 갑자기 탭 콘텐츠에 애니메이션을 적용하거나 Ajax 호출을 통해 데이터를 가져와야 할 수도 있습니다. 미래를 정확하게 예측하는 것은 불가능하지만 합리적으로 미래를 증명할 수 있을 만큼 유연한 코드를 작성하는 것은 가능합니다.

Saner 매개변수 목록
미래 보장을 수행할 수 있는 한 가지 장소는 매개변수 목록을 설계할 때입니다. 이는 코드를 구현하는 사람들의 주요 연락 지점이며 잘 설계되지 않으면 문제가 될 수 있습니다. 피하고 싶은 것은 다음과 같은 매개변수 목록입니다:

复aze代码 代码如下:

function 사람(직원 ID, fname, lname, 전화번호, 팩스, 이메일, 이메일2, dob) {
};

이 수업은 매우 취약합니다. 코드를 공개한 후 중간 이름 매개변수를 추가하려면 순서가 중요하므로 목록 맨 끝에 추가해야 합니다. 그러면 작업하기가 불편해집니다. 또한 각 매개변수에 대한 값이 없으면 작업하기가 어렵습니다. 예:

复aze代码 代码如下:

var ara = new Person(1234, " 아라", "펠리바니아어", "514-555-1234", null, null, null, "1976-05-17");

매개변수 목록에 접근하는 더 깔끔하고 유연한 방법은 다음 패턴을 사용하는 것입니다. > 代码如下:

function Person(employeeId, data) { }; 첫 번째 매개변수는 필수이므로 존재합니다. 나머지는 작업하기에 매우 유연할 수 있는 객체로 함께 묶입니다.

复主代码

代码如下:

var ara = new Person(1234, { fname: "Ara", lname: "Pehlivanian", tel: "514-555-1234", dob: "1976-05-17" });

이 패턴의 장점은 읽기 쉽고 유연성이 높다는 점입니다. 팩스, 이메일 및 이메일2가 어떻게 완전히 제외되었는지 확인하세요. 또한 객체는 특정 순서가 아니기 때문에 중간 이름 매개변수를 추가하는 것은 편리한 곳에 던지는 것만큼 쉽습니다:




复system代码

代码如下:

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'];
};

data['fname']이 값을 반환하면 값이 설정됩니다. 그렇지 않으면 작동하지 않으며 아무 것도 깨지지 않습니다.

플러그 가능하게 만들기
시간이 지남에 따라 제품 요구 사항에 따라 클래스에 추가 동작이 필요할 수 있습니다. 그러나 이러한 동작은 클래스의 핵심 기능과 전혀 관련이 없는 경우가 많습니다. 또한 다른 탭의 외부 데이터를 가져오는 동안 한 탭 패널의 콘텐츠가 페이드 인되는 것과 같이 클래스의 한 구현에만 요구 사항일 가능성이 높습니다. 이러한 능력을 클래스에 포함시키고 싶은 유혹을 느낄 수도 있지만 클래스에 속하지는 않습니다. 탭 표시줄의 역할은 탭을 관리하는 것입니다. 애니메이션과 데이터 가져오기는 완전히 별개의 두 가지 작업이므로 탭 표시줄 코드 외부에 보관해야 합니다. 탭 표시줄을 미래에 대비하고 모든 추가 기능을 외부에 유지하는 유일한 방법은 사람들이 코드에 동작을 연결할 수 있도록 하는 것입니다. 즉, onTabChange, afterTabChange, onShowPanel, afterShowPanel 등과 같은 이벤트를 생성하여 사람들이 코드의 중요한 순간을 포착할 수 있도록 하세요. 이렇게 하면 onShowPanel 이벤트에 쉽게 연결할 수 있고 해당 패널의 내용이 사라지는 핸들러를 작성할 수 있으며 모두가 만족합니다. JavaScript 라이브러리를 사용하면 이 작업을 충분히 쉽게 수행할 수 있지만 스스로 해결하는 것은 그리 어렵지 않습니다. 다음은 YUI 3을 사용한 간단한 예입니다.

复代码 代码如下:

이 예제에는 showPanel 메소드를 사용하는 간단한 TabStrip 클래스가 있습니다. 이 메소드는 onShowPanel 및 afterShowPanel이라는 두 가지 이벤트를 실행합니다. Y.EventTarget으로 클래스를 확장하면 그렇게 할 수 있습니다. 완료되면 TabStrip 개체를 인스턴스화하고 여기에 여러 이벤트 핸들러를 할당합니다. 이는 실제 클래스를 건드리지 않고 이 인스턴스의 고유한 동작을 처리하기 위한 사용자 정의 코드입니다.

요약

동일한 페이지, 웹사이트 또는 여러 프로젝트에서 코드를 재사용할 계획이라면 클래스별로 패키징하고 정리하는 것이 좋습니다. 객체 지향 JavaScript는 자연스럽게 더 나은 코드 구성 및 재사용에 적합합니다. 또한 약간의 사전 고려를 통해 코드를 작성한 후에도 오랫동안 사용할 수 있을 만큼 유연성이 있는지 확인할 수 있습니다. 재사용 가능하고 미래 지향적인 JavaScript를 작성하면 귀하와 귀하의 팀, 회사의 시간과 비용이 절약됩니다. 그러면 확실히 당신이 인기를 얻게 될 거예요.