유지 관리 가능한 객체 지향 JavaScript 코드를 작성하는 방법

유지 관리 가능한 객체 지향 JavaScript 코드를 작성할 수 있으면 비용을 절약할 수 있을 뿐만 아니라 인기도 높아질 것입니다. 믿을 수 없나요? 귀하 또는 다른 사람이 언젠가 다시 방문하여 귀하의 코드를 재사용할 가능성이 있습니다. 이 경험을 가능한 한 덜 고통스럽게 만들 수 있다면 많은 시간을 절약할 수 있습니다. 지구상의 모든 사람들은 시간이 돈이라는 것을 알고 있습니다. 마찬가지로, 당신은 누군가의 골치 아픈 일을 덜어줌으로써 누군가의 호의를 얻을 수도 있습니다. 하지만 유지 관리 가능한 객체 지향 JavaScript 코드를 작성하는 방법을 살펴보기 전에 객체 지향이 무엇인지 간단히 살펴보겠습니다. 객체지향 개념을 이미 이해하고 있다면 다음 섹션을 바로 건너뛰어도 됩니다.
객체지향이란 무엇인가요?
객체 지향 프로그래밍은 주로 코드를 통해 현실 세계의 물리적 객체를 표현합니다. 객체를 생성하려면 먼저 객체를 정의하는 "클래스"를 작성해야 합니다. 클래스는 계정, 직원, 탐색 메뉴, 자동차, 식물, 광고, 음료 등 거의 모든 것을 나타낼 수 있습니다. 그리고 객체를 만들고 싶을 때마다 클래스에서 객체를 인스턴스화하세요. 즉, 클래스의 인스턴스가 객체로 생성됩니다. 실제로 객체는 일반적으로 동일한 유형의 두 개 이상의 항목을 처리할 때 사용됩니다. 게다가 단순한 기능적 프로그램만으로도 훌륭한 작업을 수행할 수 있습니다. 객체는 본질적으로 데이터의 컨테이너입니다. 따라서 직원 개체에는 직원 번호, 이름, 입사 날짜, 직위, 급여, 직위 등을 저장하고 싶을 수 있습니다. 개체에는 데이터를 처리하는 함수("메서드"라고도 함)도 포함되어 있습니다. 방법은 데이터 무결성을 보장하고 저장하기 전에 데이터를 변환하는 중개자로 사용됩니다. 예를 들어, 메서드는 모든 형식의 날짜를 허용하고 이를 저장하기 전에 표준화된 형식으로 변환할 수 있습니다. 마지막으로 클래스는 다른 클래스로부터 상속받을 수도 있습니다. 상속을 사용하면 다른 클래스에서 동일한 코드를 재사용할 수 있습니다. 예를 들어, 은행계좌와 비디오가게 계좌 모두 개인정보, 계좌 개설일, 지점 정보 등이 포함된 기본 계정 클래스를 상속받을 수 있습니다. 그런 다음 각각은 거래 또는 대출 처리를 위한 자체 데이터 구조와 방법을 정의할 수 있습니다.
경고: JavaScript 객체 지향은 동일하지 않습니다.
이전 섹션에서는 고전적인 객체 지향 프로그래밍의 기본 사항에 대해 설명했습니다. JavaScript가 이러한 규칙을 따르지 않기 때문에 내가 고전적이라고 말하는 것입니다. 이에 비해 JavaScript 클래스는 함수로 작성되고 프로토타입을 통해 상속이 구현됩니다. 프로토타입 상속은 기본적으로 클래스에서 클래스를 상속하는 대신 프로토타입 속성을 사용하여 객체의 상속을 구현하는 것을 의미합니다.
객체 인스턴스화
다음은 JavaScript의 객체 인스턴스화 예입니다.
// 직원 클래스 정의
　function Employee(num, fname, lname) {
　　this.getFullName = function ( ) {
Fname + "" + LNAME;
}
};

// 인스턴스화된 직원 객체
var John = New Employeee ("4815162342", "John" "" " , "Doe");
Alert("직원의 전체 이름은 " + john.getFullName())입니다;
여기서 세 가지 중요한 사항에 유의해야 합니다.
1 "의 첫 번째 문자 class' 함수 이름 문자는 대문자로 시작해야 합니다. 이는 함수가 일반 함수처럼 호출되지 않고 인스턴스화되도록 의도되었음을 나타냅니다.
2 인스턴스화 중에 new 연산자가 사용됩니다. new를 생략하고 함수만 호출하면 많은 문제가 발생합니다.
3 이 연산자에 getFullName이 할당되어 있으므로 공개적으로 사용할 수 있지만 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;
}
}

// 직원 클래스 정의
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 클래스가 두 부분으로 나누어졌습니다. 모든 일반적인 인간 속성은 Human 클래스로 이동되었으며 Employee는 Human을 상속 받았습니다. 이 경우 Human의 속성은 Student, Client, Citizen, Visitor 등과 같은 다른 개체에서 사용될 수 있습니다. 이제 이것이 코드를 분할하고 재사용하는 좋은 방법이라는 것을 눈치챘을 것입니다. Human 개체를 다룰 때 각각의 다른 개체를 하나씩 다시 만드는 대신 Human 개체를 상속하여 기존 속성을 사용하기만 하면 됩니다. 또한 "중간 이름" 속성을 추가하려는 경우 한 번만 추가하면 되며 Human 클래스를 상속받은 사용자는 즉시 사용할 수 있습니다. 반대로 "중간 이름" 속성을 개체에 추가하려는 경우 Human 클래스에 추가하지 않고 해당 개체에 직접 추가할 수 있습니다.
1. 공개 및 비공개
다음 주제로는 클래스의 공개 변수와 비공개 변수에 대해 이야기하고 싶습니다. 객체에서 데이터가 처리되는 방식에 따라 데이터는 비공개 또는 공개로 처리됩니다. 사유 재산이 반드시 다른 사람이 해당 재산에 접근할 수 없다는 것을 의미하지는 않습니다. 어쩌면 특정 방법만 사용해야 할 수도 있습니다.
● 읽기 전용
객체를 생성할 때 값만 원하는 경우가 있습니다. 일단 생성되면 다른 사람이 이 값을 변경하는 것을 원하지 않습니다. 이렇게 하려면 개인 변수를 만들고 인스턴스화 중에 값을 할당합니다.
function Animal(type) {
var data = [];
data['type'] = type;
this.getType = function() {
return data['type' ];
}
}

var wool = new Animal('dog');
fluffy.getType(); // 'dog'을 반환합니다.
이 예에서는 A 로컬 배열 데이터는 Animal 클래스에서 생성됩니다. Animal 객체가 인스턴스화되면 유형의 값이 전달되고 해당 값이 데이터 배열에 배치됩니다. 비공개이므로 값을 덮어쓸 수 없습니다(Animal 함수가 해당 범위를 정의함). 객체가 인스턴스화되면 유형 값을 읽는 유일한 방법은 getType 메소드를 호출하는 것입니다. Animal에 getType이 정의되어 있으므로 getType은 Animal이 생성한 클로저로 데이터를 입력할 수 있습니다. 이 경우, 객체의 타입을 읽을 수는 있지만 변경할 수는 없습니다.
매우 중요한 점 중 하나는 객체가 상속될 때 "읽기 전용" 기술을 사용할 수 없다는 것입니다. 상속이 수행된 후 인스턴스화된 각 개체는 해당 읽기 전용 변수를 공유하고 해당 값을 덮어씁니다. 가장 간단한 해결책은 클래스의 읽기 전용 변수를 공용 변수로 변환하는 것입니다. 하지만 비공개로 유지해야 합니다. Philippe이 댓글에서 언급한 기술을 사용할 수 있습니다.
● 공개
물론 특정 속성의 값을 마음대로 읽고 쓰고 싶을 때가 있습니다. 이를 달성하려면 this 연산자를 사용하십시오.
function Animal() {
this.mood = '';
}

var wool = new Animal();
wool.mood = 'happy';
wool.mood; // 'happy'를 반환합니다
이번에 Animal 클래스는 마음대로 읽고 쓸 수 있는 분위기라는 속성을 노출합니다. 마찬가지로 이전 예제의 getType 함수와 같은 공용 속성에 함수를 할당할 수 있습니다. getType에 값을 할당하지 않도록 주의하세요. 그렇지 않으면 값이 삭제됩니다.
완전 비공개
마지막으로 완전 비공개 지역 변수가 필요할 수도 있습니다. 이렇게 하면 공개 메서드를 만들지 않고도 첫 번째 예와 동일한 패턴을 사용할 수 있습니다.
function Animal() {
var secret = "당신은 결코 알지 못할 것입니다!"
}

var wool = new Animal();
유연한 API 작성
이제 클래스 생성에 대해 이야기했으므로 제품 요구 사항의 변경 사항을 동기화하려면 코드를 최신 상태로 유지해야 합니다. 이미 일부 프로젝트를 수행했거나 오랫동안 제품을 유지 관리했다면 요구 사항이 변경된다는 점을 알아야 합니다. 이것은 논쟁의 여지가 없는 사실입니다. 그렇게 생각하지 않는다면, 여러분의 코드는 작성되기도 전에 망가질 것입니다. 갑자기 탭의 내용에 애니메이션을 적용하거나 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, "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는 완전히 무시됩니다. 뿐만 아니라 객체는 특별한 순서가 없으므로 편리한 곳에 중간 이름 매개변수를 추가하는 것이 매우 쉽습니다.
var ara = new Person(1234, {
fname: "Ara",
mname: "Chris",
lname: "Pehlivanian",
tel: "514-555-1234",
dob: "1976-05-17"
});
class 코드 내부 값은 인덱스를 통해 액세스할 수 있으므로 중요하지 않습니다.
function Person(employeeId, data) {
this.fname = data['fname'];
};
if data ['fname']은 값을 반환한 다음 설정됩니다. 그렇지 않으면 제대로 설정되지 않으면 손실이 없습니다.
● 코드를 삽입 가능하게 만들기
시간이 지남에 따라 제품 요구 사항에 따라 클래스에 더 많은 동작이 필요할 수 있습니다. 하지만 이 동작은 클래스의 핵심 기능과는 아무런 관련이 없습니다. 또한 다른 탭에서 외부 데이터를 가져올 때 한 탭 패널의 콘텐츠를 회색으로 표시하는 것과 같이 클래스의 유일한 구현일 수도 있습니다. 이러한 함수를 클래스 안에 넣고 싶을 수도 있지만 클래스에 속하지 않습니다. 탭 표시줄의 책임은 탭 관리에 있습니다. 애니메이션을 적용하는 것과 데이터를 가져오는 것은 완전히 다른 두 가지 작업이므로 탭 표시줄의 코드와 분리되어야 합니다. 추가 기능을 제외하지 않고 탭 표시줄을 미래에 대비할 수 있는 유일한 방법은 동작을 코드에 포함시키는 것입니다. 즉, 이벤트를 생성하고 onTabChange, afterTabChange, onShowPanel, afterShowPanel 등과 같은 코드의 주요 순간에 연결되도록 합니다. 이렇게 하면 onShowPanel 이벤트에 쉽게 연결하고 패널 콘텐츠를 회색으로 표시하는 핸들러를 작성할 수 있으며 모두가 만족합니다. JavaScript 라이브러리를 사용하면 이 작업을 쉽게 수행할 수 있지만 직접 작성하는 것은 그리 어렵지 않습니다. 다음은 YUI 3을 사용한 예입니다.


이 예제에는 showPanel 메서드가 포함된 간단한 TabStrip 클래스가 있습니다. 이 메소드는 onShowPanel 및 afterShowPanel이라는 두 가지 이벤트를 실행합니다. 이 기능은 Y.EventTarget으로 클래스를 확장하여 달성됩니다. 완료되면 TabStrip 개체를 인스턴스화하고 여기에 여러 처리기를 할당합니다. 이는 현재 클래스를 복잡하게 하지 않고 인스턴스의 유일한 동작을 처리하는 일반적인 코드입니다.
요약
동일한 페이지, 동일한 웹사이트, 프로젝트 전반에서 코드를 재사용하려는 경우 클래스 내에서 코드를 패키징하고 정리하는 것을 고려해 보세요. 객체 지향 JavaScript는 자연스럽게 더 나은 코드 구성 및 코드 재사용을 달성하는 데 도움이 됩니다. 그 외에도 약간의 통찰력을 가지고 코드를 작성한 후에도 오랫동안 지속될 수 있을 만큼 유연한 코드를 확보할 수 있습니다. 재사용 가능하고 미래 지향적인 JavaScript 코드를 작성하면 귀하, 귀하의 팀, 회사의 시간과 비용이 절약됩니다. 이것은 확실히 당신을 히트하게 만들 것입니다.