소개하다
이 기사는 주로 객체를 만드는 패턴의 다음 기사를 소개합니다. 다양한 기술을 사용하면 오류를 크게 피하거나 매우 간소화 된 코드를 작성할 수 있습니다.
패턴 6 : 기능 구문 설탕
기능 구문 설탕은 객체에 방법 (함수)을 신속하게 추가하기위한 확장입니다. 이것은 주로 프로토 타입의 특성을 사용합니다. 코드는 비교적 간단합니다. 먼저 구현 코드를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
if (typeof function.prototype.method! == "function") {
function.prototype.method = function (이름, 구현) {
this.prototype [name] = 구현;
이것을 반환하십시오;
};
}
객체를 확장 할 때 다음과 같이 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
var person = function (name) {
this.name = 이름;
}
.method ( 'getName',
기능 () {
이 this.name;
})
.method ( 'setName', function (name) {
this.name = 이름;
이것을 반환하십시오;
});
이런 식으로, 우리는 사람 함수에 getName과 setName의 두 가지 방법을 추가합니다. 다음으로 결과를 확인해 봅시다.
코드 사본은 다음과 같습니다.
var a = 새로운 사람 ( 'Adam');
console.log (a.getName ()); // '아담'
console.log (a.setName ( 'eve'). getName ()); // '이브'
패턴 7 : 객체 상수
물체 상수는 객체에 정의 된 세트에 의해 제공된 다양한 방법의 실시 예입니다. 또한, 세트 메소드는 첫 번째 객체 세트 만 유지하고 이후 설정은 유효하지 않아 다른 사람들이 과부하 할 수없는 목적을 달성했습니다. 구현 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var constant = (function () {
var 상수 = {},
OwnProp = Object.Prototype.HasOwnProperty,
//이 세 가지 유형의 값만 허용됩니다
허용 = {
문자열 : 1,
번호 : 1,
부울 : 1
},
prefix = (math.random () + "_"). 슬라이스 (2);
반품 {
// 이름 이름으로 속성을 설정합니다
세트 : 함수 (이름, 값) {
if (this.isdefined (name)) {
거짓을 반환합니다.
}
if (! onderprop.call (허용, typeof value)) {
거짓을 반환합니다.
}
상수 [접두사 + 이름] = 값;
진실을 반환하십시오.
},
// 이름이라는 속성이 있는지 여부를 결정합니다
isdefined : function (name) {
return onselfrop.call (상수, 접두사 + 이름);
},
// 이름이 이름이라는 속성을 가져옵니다
get : function (name) {
if (this.isdefined (name)) {
반환 상수 [접두사 + 이름];
}
널 리턴;
}
};
} ());
확인 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
// 존재하는지 확인하십시오
console.log (constant.isdefined ( "maxwidth")); // 거짓
// 정의
console.log (constant.set ( "maxwidth", 480)); // 진실
//리스트
console.log (constant.isdefined ( "maxwidth")); // 진실
// 재정의를 시도하십시오
console.log (constant.set ( "maxwidth", 320)); // 거짓
// 원래 정의가 여전히 존재하는지 확인하십시오
console.log (constant.get ( "maxwidth")); // 480
모드 8 : 샌드 박스 모드
샌드 박스 모드는 다른 모듈의 컨텍스트에 영향을 미치지 않고 하나 이상의 모듈에 대해 별도의 컨텍스트를 제공합니다. 예를 들어, 3 가지 메소드 이벤트 인 Dom 및 Ajax가있는 샌드 박스가 있습니다. 그들 중 두 명이 환경을 형성하도록 요청되면 세 가지 환경에 대한 간섭이 없습니다. 샌드 박스 구현 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
함수 sandbox () {
// 매개 변수를 배열로 변환합니다
var args = array.prototype.slice.call (인수),
// 마지막 매개 변수는 콜백입니다
콜백 = args.pop (),
// 마지막 매개 변수를 제외하고 다른 모든 모듈을 선택합니다.
modules = (args [0] && typeof args [0] === "string")? Args : Args [0],
나;
// 새 연산자를 강제합니다
if (! (이 인스턴스 샌드 박스)) {
새로운 샌드 박스 (모듈, 콜백)를 반환합니다.
}
// 속성을 추가합니다
this.a = 1;
this.b = 2;
//이 개체에 모듈을 추가합니다
// 모듈이 없거나 전달 된 매개 변수가 "*"인 경우 모든 모듈이 전달됩니다.
if (! modules || modules == '*') {
모듈 = [];
for (i in sandbox.modules) {
if (sandbox.Modules.HasOwnProperty (i)) {
modules.push (i);
}
}
}
// 필요한 모듈을 초기화합니다
for (i = 0; i <modules.length; i += 1) {
sandbox.Modules [modules [i]] (this);
}
// 콜백 호출
콜백 (this);
}
// 기본적으로 프로토 타입 객체를 추가합니다
sandbox.prototype = {
이름 : "내 신청서",
버전 : "1.0",
getName : function () {
이 this.name;
}
};
그런 다음 기본 초기 모듈을 정의합니다.
코드 사본은 다음과 같습니다.
sandbox.modules = {};
sandbox.modules.dom = function (box) {
box.getElement = function () {
};
box.getstyle = function () {
};
box.foo = "bar";
};
sandbox.modules.event = function (box) {
// 필요한 경우 샌드 박스 프로토 타입에 액세스하십시오.
// box.constructor.prototype.m = "mmmm";
box.attachevent = function () {
};
box.detachevent = function () {
};
};
sandbox.modules.ajax = function (box) {
box.makerequest = function () {
};
box.getResponse = function () {
};
};
통화 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
// 메소드를 호출합니다
샌드 박스 ([ 'ajax', 'event'], function (box) {
console.log (typeof (box.foo));
// dom 선택이 없으므로 box.foo가 존재하지 않습니다.
});
샌드 박스 ( 'ajax', 'dom', function (box) {
console.log (typeof (box.attachevent));
// 선택된 이벤트가 없으므로 이벤트에 정의 된 첨부 장치가 없습니다.
});
샌드 박스 ( '*', 함수 (box) {
Console.log (Box); // 위에서 정의 된 모든 방법은 액세스 할 수 있습니다
});
세 가지 다른 호출 방법을 통해 세 가지 방법의 컨텍스트가 다르다는 것을 알 수 있습니다. 첫 번째는 foo가 없습니다. 두 번째는 Ajax와 Dom 만로드되었지만 이벤트가로드되지 않기 때문에 첨부 이벤트가 없습니다. 세 번째는 모든 것을로드하지 않습니다.
패턴 9 : 정적 멤버
정적 멤버는 함수 또는 객체가 제공하는 정적 특성으로 C# 또는 Java의 공개 정적 및 개인 정적과 마찬가지로 개인 및 공개로 나눌 수 있습니다.
먼저 공개 회원을 살펴 보겠습니다. 공개 회원은 매우 간단합니다. 우리가 선언하는 방법과 기능은 일반적으로 다음과 같은 공개입니다.
코드 사본은 다음과 같습니다.
// 생성자
var gadget = function () {
};
// 공개 정적 방법
gadget.isshiny = function () {
"You Bet"을 반환합니다.
};
// 프로토 타입을 추가 할 일반 방법
gadget.prototype.setprice = function (가격) {
this.price = 가격;
};
// 정적 메소드를 호출합니다
console.log (gadget.isshiny ()); // "당신은"
// 인스턴스를 작성하고 메소드를 호출합니다
var iPhone = 새로운 가제트 ();
iPhone.setPrice (500);
Console.log (Gadget.setPrice 타입); // "한정되지 않은"
Console.log (iPhone.isshiny 타입); // "한정되지 않은"
gadget.prototype.isshiny = gadget.isshiny;
Console.log (iPhone.isshiny ()); // "당신은"
개인 정적 멤버의 경우 폐쇄 기능을 사용하여 구현할 수 있습니다. 다음은 두 가지 구현 방법입니다.
첫 번째 구현 방법 :
코드 사본은 다음과 같습니다.
var gadget = (function () {
// 정적 변수/속성
var 카운터 = 0;
// Closure는 생성자의 새로운 구현을 반환합니다
return function () {
Console.log (카운터 += 1);
};
} ()); // 즉시 실행됩니다
var g1 = 새로운 가제트 (); // 로그 1
var g2 = 새로운 가제트 (); // 로그 2
var g3 = 새로운 가제트 (); // 로그 3
매일 새로운 객체이지만 숫자가 여전히 증가하여 정적 멤버의 목적을 달성한다는 것을 알 수 있습니다.
두 번째 방법 :
코드 사본은 다음과 같습니다.
var gadget = (function () {
// 정적 변수/속성
var 카운터 = 0,
NewGadget;
// 새로운 생성자 구현
newGadget = function () {
카운터 += 1;
};
// 메소드 액세스 권한을 부여합니다
newGadget.prototype.getLastId = function () {
반환 카운터;
};
// 생성자를 덮어 쓰십시오
NewGadget을 반환하십시오.
} ()); // 즉시 실행하십시오
var iPhone = 새로운 가제트 ();
iPhone.getLastId (); // 1
var iPod = 새로운 가제트 ();
iPod.getLastId (); // 2
var iPad = 새로운 가제트 ();
iPad.getLastId (); // 3
숫자도 증가하여 내부 승인 방법의 폐쇄 기능을 사용하여 달성됩니다.
요약
이것은 객체 생성 모드의 다음 기사입니다. 두 기사에는 함께 9 개의 패턴이 있습니다. 그것들은 우리가 일일 JavaScript 프로그래밍에서 자주 사용하는 객체 제작 모드입니다. 다른 시나리오는 다른 역할을합니다. 모든 사람이 각각의 요구에 따라 해당 모드를 선택하기를 바랍니다.