소개하다
이 기사에서 소개 한 일부 모드를 초기화 모드 및 성능 모드라고하며 주로 초기화 및 성능 향상에 사용됩니다. 일부 모드는 이전에 언급되었으므로 여기에 요약이 있습니다.
즉시 실행되는 기능
이 시리즈의 네 번째 장, "Now라고 불리는 기능 표현식"에서 비슷한 기능을 자세히 설명했습니다. 여기서 우리는 요약 할 두 가지 간단한 예를 제공 할 것입니다.
코드 사본은 다음과 같습니다.
// 함수를 선언 한 후 즉시 함수를 실행하십시오
(기능 () {
Console.log ( '조심!');
} ());
// 이런 식으로 선언 된 기능은 즉시 실행할 수 있습니다.
!기능 () {
Console.log ( '조심!');
} ();
// 다음 방법도 괜찮습니다
~ function () { / * code * /} ();
-nuction () { / * code * /} ();
+function () { / * code * /} ();
즉시 객체 초기화를 실행했습니다
이 패턴은 객체가 선언 될 때 (함수가 아닌), 객체의 메소드 중 하나가 즉시 실행되도록 초기화 작업을 수행한다는 것을 의미합니다. 일반적 으로이 패턴은 한 번에 실행 된 코드에서 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
({
// 여기에서 상수를 정의하고 다른 값을 설정할 수 있습니다.
Maxwidth : 600,
Maxheight : 400,
// 물론 유틸리티 방법을 정의 할 수도 있습니다
gimmemax : function () {
this.maxwidth + "x" + this.maxheight;
},
// 초기화
init : function () {
console.log (this.gimmemax ());
// 더 많은 코드 ...
}
}). init (); // 초기화가 시작됩니다
지점 초기화
분기 초기화는 다른 조건 (시나리오)에 따라 서로 다른 코드의 초기화를 의미하며, 이는 소위 조건부 명세서 할당입니다. 이벤트 처리를 수행하기 전에 일반적으로 다음과 같은 코드를 사용했습니다.
코드 사본은 다음과 같습니다.
var utils = {
AddListener : function (el, type, fn) {
if (typeof window.addeventListener === 'function') {
el.addeventListener (유형, fn, false);
} else if (typeof document.attachevent! == 'undefined') {
el.attachevent ( 'on' + type, fn);
} 또 다른 {
el [ 'on' + type] = fn;
}
},
removelistener : function (el, type, fn) {
}
};
개선합시다. 먼저 두 개의 인터페이스를 정의해야합니다. 하나는 이벤트 핸들을 추가하고 다른 하나는 이벤트 핸들을 제거하기위한 것입니다. 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var utils = {
AddListener : NULL,
removelistener : null
};
구현 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
if (typeof window.addeventListener === 'function') {
utils.addlistener = function (el, type, fn) {
el.addeventListener (유형, fn, false);
};
} else if (typeof document.attachevent! == 'undefined') {// IE
utils.addlistener = function (el, type, fn) {
el.attachevent ( 'on' + type, fn);
};
utils.removelistener = function (el, type, fn) {
el.detachevent ( 'on' + type, fn);
};
} else {// 다른 오래된 브라우저
utils.addlistener = function (el, type, fn) {
el [ 'on' + type] = fn;
};
utils.removelistener = function (el, type, fn) {
el [ 'on' + type] = null;
};
}
사용하기가 매우 편리하지 않습니까? 코드는 훨씬 더 우아합니다.
자기 선언하는 기능
일반적으로 동일한 이름의 함수 코드는 다음과 같은 기능 내부에서 다시 작성됩니다.
코드 사본은 다음과 같습니다.
var scarem = function () {
경고 ( "boo!");
scarme = function () {
경고 ( "더블 부!");
};
};
이런 종류의 코드는 매우 혼란 스럽습니다. 먼저 예제의 실행 결과를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
// 1. 새 속성을 추가합니다
scarme.property = "적절하게";
// 2. Scareme은 새 값을 할당합니다
var prank = scarme;
// 3. 메소드로 호출하십시오
var spooky = {
BOO : SCARME
};
// 새 변수 이름으로 호출합니다
충돌(); // "부!"
충돌(); // "부!"
Console.log (prank.property); // "제대로"
// 메소드를 사용하여 호출합니다
spooky.boo (); // "부!"
spooky.boo (); // "부!"
console.log (spooky.boo.property); // "제대로"
실행 결과를 통해 함수를 새 변수 (또는 내부 메서드)에 할당하는 것을 알 수 있으므로 코드는 과부하 된 스커머 코드를 실행하지 않으며 다음 예제는 정확히 반대입니다.
코드 사본은 다음과 같습니다.
// 자체 선반 기능을 사용합니다
scarme (); // 더블 부!
scarme (); // 더블 부!
Console.log (Scareme.property); // 한정되지 않은
이 모델을 사용하는 경우 매우 조심해야합니다. 그렇지 않으면 실제 결과가 기대하는 결과와 다를 수 있습니다. 물론이 스페셜을 사용하여 일부 특별 작전을 수행 할 수도 있습니다.
메모리 최적화
이 패턴은 주로 많은 수의 반복 계산을 피하기 위해 함수의 속성 특성을 사용합니다. 일반적인 코드 양식은 다음과 같습니다.
코드 사본은 다음과 같습니다.
var myfunc = function (param) {
if (! myfunc.cache [param]) {
var result = {};
// ... 복잡한 작동 ...
myfunc.cache [param] = 결과;
}
myfunc.cache [param]를 반환합니다.
};
// 캐시 저장소
myfunc.cache = {};
그러나 위의 코드에는 문제가 있습니다. 전달 된 매개 변수가 ToString 또는 객체와 유사한 몇 가지 일반적인 방법 인 경우 문제가 발생합니다. 현재 전설적인 HasownProperty 메소드를 사용해야합니다. 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var myfunc = function (param) {
if (! myfunc.cache.hasownproperty (param)) {
var result = {};
// ... 복잡한 작동 ...
myfunc.cache [param] = 결과;
}
myfunc.cache [param]를 반환합니다.
};
// 캐시 저장소
myfunc.cache = {};
또는 여러 매개 변수를 전달하는 경우 JSON의 Stringify 메소드를 사용하여 스토리지 용 캐시 키 값을 생성 할 수 있습니다. 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var myfunc = function () {
var cachekey = json.stringify (array.prototype.slice.call (arguments)),
결과;
if (! myfunc.cache [cachekey]) {
결과 = {};
// ... 복잡한 작동 ...
myfunc.cache [cachekey] = 결과;
}
myfunc.cache [Cachekey]를 반환합니다.
};
// 캐시 저장소
myfunc.cache = {};
또는 여러 매개 변수를 사용하면 Arguments.callee 기능을 사용할 수도 있습니다.
코드 사본은 다음과 같습니다.
var myfunc = function (param) {
var f = arguments.callee,
결과;
if (! f.cache [param]) {
결과 = {};
// ... 복잡한 작동 ...
f.cache [param] = 결과;
}
return f.cache [param];
};
// 캐시 저장소
myfunc.cache = {};
요약
요약 할 필요가 없습니다. 코드를주의 깊게 살펴보십시오.