JavaScript 설계 패턴의 역할은 코드의 재사용 성과 가독성을 향상시켜 코드를 더 쉽게 유지 관리하고 확장 할 수 있도록하는 것입니다.
JavaScript에서 함수는 객체의 클래스이며, 이는 다른 함수로 매개 변수로 전달 될 수 있음을 의미합니다. 또한 함수는 범위를 제공 할 수도 있습니다.
함수 생성을위한 구문
이름이 지정된 기능 표현
코드 사본은 다음과 같습니다.
// 이름 함수 표현식
var add = 함수 추가 (a, b) {
A+B를 반환합니다.
};
기능 표현
코드 사본은 다음과 같습니다.
// 익명 함수라고도합니다
var add = 함수 (a, b) {
A+B를 반환합니다.
};
변수 추가에 할당 된 값은 함수 정의 자체입니다. 이런 식으로 ADD는 어디서나 호출 할 수있는 함수가됩니다.
기능 선언
코드 사본은 다음과 같습니다.
함수 foo () {
// 여기에서 코드
} // 여기서 세미콜론이 필요하지 않습니다
후행 세미콜론에서는 기능 표현이 항상 세미콜론을 사용해야하며 기능 선언에서 세미콜론의 종말이 필요하지 않습니다.
기능 선언 및 표현
기능 프로모션 (호이 스팅)
함수 선언의 동작은 명명 된 함수 표현식과 같지 않습니다. 차이점은 호이 스팅 거동입니다. 다음 예를 참조하십시오.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
// 글로벌 기능
function foo () {alert ( "Global foo!");}
function bar () {alert ( 'global bar');}
함수 호이스트 () {
console.log (foo typeof); // 함수
Console.log (유형); // 정의되지 않은
foo (); // local foo!
bar (); // typeerror : 'undefined'는 함수가 아닙니다
// 변수 foo 및 구현자가 홍보됩니다
함수 foo () {
경고 ( 'local foo! ');
}
// 변수 막대 만 홍보되며 기능 구현 부분이 홍보되지 않습니다.
var bar = function () {
경고 ( ' local bar!');
};
}
감아 올리기();
</스크립트>
신체에서 선언되는 모든 변수의 경우 내부적으로 기능의 상단으로 홍보됩니다. 함수의 일반적인 적용 이유는 함수가 변수에 할당 된 객체 일뿐입니다.
이름에서 알 수 있듯이 개선은 다음과 같은 것들을 맨 위에 언급하는 것을 의미합니다. JS에서는 다음 (변수 또는 함수)에 정의 된 내용을 이전 정의로 업그레이드하는 것입니다. 위의 예에서 알 수 있듯이 함수 내부 기능 호이스트의 Foo 및 Bar는 상단으로 이동하여 글로벌 FOO 및 막대 함수를 덮습니다. 로컬 기능 바와 FOO의 차이점은 FOO가 상단으로 홍보되고 정상적으로 실행될 수 있다는 것입니다. Bar ()의 정의는 개선되지 않았으며 선언 만 촉진됩니다. 따라서 Bar ()가 실행되면 결과가 함수로 사용되는 대신 정의되지 않습니다.
실시간 기능 모드
함수는 또한 개체이므로 리턴 값으로 사용할 수 있습니다. 자체 이행 함수를 사용하는 장점은 익명 함수를 직접 선언하고 즉시 사용하여 한 번 사용되지 않는 함수를 정의하지 않도록하고 갈등을 명명하는 문제를 피하는 것입니다. JS에는 네임 스페이스 개념이 없으므로 기능 이름 충돌이 쉽습니다. 일단 명명 충돌이 이루어지면, 마지막 선언 된 충돌이 우세해야합니다.
모드 1 : 모드 1.
코드 사본은 다음과 같습니다.
<cript>
(기능 () {
var a = 1;
return function () {
경고 (2);
};
} () ()); // 팝 2, 첫 번째 괄호가 스스로 실행되고 두 번째 괄호는 내부 익명 함수를 실행합니다.
</스크립트>
패턴 2 : 자체 이행 함수 변수의 포인팅
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var result = (function () {
반환 2;
}) (); // 함수가 여기에서 실행되었습니다
경고 (결과); // 결과가 자체 실행 된 함수의 리턴 값 2를 가리 킵니다. 결과 ()가 나타나면 오류가 발생합니다.
</스크립트>
패턴 3 : 중첩 된 기능
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var result = (function () {
return function () {
반환 2;
};
}) ();
Alert (result ()); // 2 alert (result)가 나타납니다. function () {return 2}
</스크립트>
모드 4 : 자체 실행 함수 리턴 값을 변수에 할당합니다.
코드 사본은 다음과 같습니다.
var abc = (function () {
var a = 1;
return function () {
반환 ++ a;
}
}) (); // 자체 추적 함수는 변수로 돌아온 후 함수를 반환합니다.
Alert (abc ()); // Alert (ABC) 인 경우 return 문의 코드가 나타납니다. ABC () 인 경우 반환 후 기능이 실행됩니다.
패턴 5 : 함수는 내부적으로 재귀 적으로 실행됩니다
코드 사본은 다음과 같습니다.
// 이것은 자체 실행 함수이며, 함수는 내부적으로 재귀 적으로 실행됩니다.
함수 abc () {abc (); }
콜백 모드
콜백 함수 : 함수 write ()를 다른 함수 콜에 인수로 전달하면 전화 ()가 어느 시점에서 write ()를 실행 (또는 호출) 할 수 있습니다. 이 경우 write ()를 콜백 함수라고합니다.
비동기 이벤트 리스너
예를 들어, 이벤트 리스너가 페이지의 요소에 첨부 될 때 콜백 모드에는 많은 용도가 있습니다. 실제로 이벤트가 발생할 때 호출되는 콜백 함수에 대한 포인터를 제공합니다. 좋다:
코드 사본은 다음과 같습니다.
document.addeventListener ( "클릭", console.log, false);
위의 코드 예제는 문서가 클릭 할 때 버블 모드에서 콜백 함수 console.log ()를 보여줍니다.
콜백 모드는 비동기 적으로 실행하는 프로그램을 지원하기 때문에 JavaScript는 특히 이벤트 중심 프로그래밍에 적합합니다.
타임 아웃
콜백 모드를 사용하는 또 다른 예는 브라우저의 Window 객체에서 제공 한 시간 초과 방법을 사용할 때 : settimeout () 및 setInterval ()과 같은 것입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var call = function () {
Console.log ( "100ms가 요청됩니다 ...");
};
settimeout (Call, 100);
</스크립트>
라이브러리의 콜백 모드
JS 라이브러리를 설계 할 때는 콜백 기능이 유용합니다. 라이브러리의 코드는 재사용 가능한 코드를 가능한 한 많이 사용해야하며 콜백은 이러한 일반화를 달성하는 데 도움이 될 수 있습니다. 우리가 거대한 JS 라이브러리를 설계 할 때, 사실은 사용자가 대부분이 필요하지 않다는 것입니다. 핵심 기능에 집중하고 "후크 양식"으로 콜백 기능을 제공 할 수있어 라이브러리 방법을 쉽게 빌드, 스케일 및 사용자 정의 할 수 있습니다.
카레
카레는 여러 매개 변수를 함수 본체로 채우면 함수를 새로운 단순화 된 (더 적은 매개 변수) 함수로 변환하는 기술입니다. - - JavaScript에 능숙하다
간단히 말해서, 카레화는 전환 프로세스, 즉 기능 변환 과정입니다. 다음 예에서 볼 수 있듯이 :
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
// 카레 기반 add () 함수
함수 추가 (x, y) {
var OldX = X, Oldy = y;
if (typeof oldy == "undefined") {
반환 기능 (Newy) {
Oldx + Newy를 반환합니다.
};
}
// 전체 응용 프로그램
x+y를 반환합니다.
}
//시험
add add (5); // 출력 "함수"
추가 (3) (4); // 7
// 새 기능을 만들고 저장합니다
var add2000 = Add (2000);
add2000 (10); // output 2010
</스크립트>
Add ()가 처음으로 요구되면 반환 된 내부 기능에 대한 폐쇄가 생성됩니다. 이 클로저는 원래 x 및 y 값을 개인 변수 Oldx와 Oldy에 저장합니다.
이제 우리는 임의의 기능 카레 공통 방법을 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
// 일반 함수
함수 추가 (x, y) {
x + y를 반환합니다.
}
// 새로운 기능을 얻는 기능을 카레
var newadd = test (Add, 5);
Newadd (4); // 9
// 다른 옵션은 새 함수를 직접 호출합니다
테스트 (추가, 6) (7); // 출력 13
</스크립트>
카레를 사용하는시기
동일한 함수가 호출되고 대부분의 전달 된 매개 변수가 동일하다는 것이 발견되면, 함수는 카레화를위한 좋은 후보가 될 수 있습니다.