소개하다
이 기사는 주로 기능에 사용 된 몇 가지 기술 (1 부)을 소개합니다. 기능 기능을 사용하면 매우 흥미로운 코드를 많이 쓸 수 있습니다. 이 기사에는 주로 콜백 모드, 구성 객체, 반환 기능, 배포 프로그램 및 카레링이 포함됩니다.
콜백 함수
JavaScript에서 함수 A가 다른 함수 B의 매개 변수 중 하나 인 경우 함수 A를 콜백 함수라고합니다. 즉, A는 함수 B (시작, 중간 및 끝) 내에 실행될 수 있습니다.
예를 들어, 노드를 생성하는 함수가 있습니다
코드 사본은 다음과 같습니다.
var complexcomputation = function () { /* 내부적으로 처리하고 노드를 반환* /};
모든 노드를 찾은 다음 콜백 콜백을 통해 코드를 실행하기위한 FindNodes 함수 선언이 있습니다.
코드 사본은 다음과 같습니다.
var findnodes = function (콜백) {
var 노드 = [];
var node = complexcomputation ();
// 콜백 함수를 사용할 수 있으면 실행하십시오
if (callback typeof === "function") {
콜백 (노드);
}
노드 .push (노드);
리턴 노드;
};
콜백의 정의와 관련하여 사용하기 위해 미리 정의 할 수 있습니다.
코드 사본은 다음과 같습니다.
// 콜백을 정의합니다
var hide = function (노드) {
node.style.display = "none";
};
// 노드를 찾고 모든 노드를 숨 깁니다
var hiddennodes = findnodes (숨기기);
다음과 같이 호출 할 때 익명의 정의를 직접 사용할 수도 있습니다.
코드 사본은 다음과 같습니다.
// 익명 함수를 사용하여 콜백을 정의합니다
var blocknodes = findnodes (function (node) {
node.style.display = 'block';
});
가장 일반적으로 사용되는 것은 아마도 JQuery의 Ajax 방법에 대한 호출 일 것입니다. done/faild의 콜백을 정의함으로써 Ajax 호출이 성공하거나 실패 할 때 추가 처리 할 수 있습니다. 코드는 다음과 같습니다 (이 코드는 jQuery 버전 1.8을 기반으로합니다) :
코드 사본은 다음과 같습니다.
var menuid = $ ( "ul.nav"). first (). attr ( "id");
var request = $ .ajax ({
URL : "script.php",
유형 : "Post",
데이터 : {id : menuid},
데이터 유형 : "HTML"
});
// 통화가 성공하면 콜백 처리
request.done (function (msg) {
$ ( "#log"). html (msg);
});
// 호출이 실패하면 콜백 처리
request.fail (function (jqxhr, textstatus) {
ALERT ( "요청 실패 :" + TextStatus);
});
구성 객체
함수 (또는 메소드)의 매개 변수가 하나의 매개 변수 만 있고 매개 변수가 객체 리터럴 인 경우이 패턴을 구성 객체 패턴이라고합니다. 예를 들어 다음 코드 :
코드 사본은 다음과 같습니다.
var conf = {
사용자 이름 : "Shichuan",
첫째 : "Chuan",
마지막 : "Shi"
};
AddPerson (conf);
AddPerson에서는 일반적으로 초기화 작업에 사용되는 Conf의 가치를 의지 할 수 있습니다. 예를 들어, jQuery의 AjaxSetup은 이러한 방식으로 구현됩니다.
코드 사본은 다음과 같습니다.
// 초기 값을 미리 설정합니다
$ .AjaxSetup ({
URL : "/xmlhttp/",
글로벌 : 거짓,
유형 : "게시"
});
// 다시 전화하십시오
$ .ajax ({data : mydata});
또한 많은 jQuery 플러그인에는 이러한 형태의 매개 변수 전송이 있지만 전송할 수도 없습니다. 통과하지 않으면 기본값이 사용됩니다.
반환 기능
함수를 반환하면 한 함수의 리턴 값이 다른 함수 일 때 특정 조건에 따라 유연하게 생성되는 새로운 기능을 나타냅니다. 또는 특정 조건에 따라 새로운 기능이 유연하게 생성됩니다. 예제 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var setup = function () {
Console.log (1);
return function () {
Console.log (2);
};
};
// 설정 함수를 호출합니다
var my = setup (); // 출력 1
나의(); // 출력 2
// 또는 직접 전화 할 수도 있습니다
설정()()();
또는 폐쇄 기능을 사용하여 설정 기능에서 개인 카운터 번호를 기록하고 각 호출마다 카운터를 늘릴 수 있습니다. 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var setup = function () {
var count = 0;
return function () {
반환 ++ 카운트;
};
};
// 용법
var next = setup ();
다음(); // 반환 1
다음(); // 반환 2
다음(); // 반환 3
해당되는
여기서 부분 응용 프로그램은 실제로 들어오는 매개 변수를 분리하는 것입니다. 때로는 일련의 작업에 항상 하나 또는 여러 개의 매개 변수가있을 수 있습니다. 그런 다음 부분 함수를 먼저 정의한 다음이 기능을 실행할 수 있습니다 (나머지 다른 매개 변수는 실행 중에 전달됩니다).
예를 들어, 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
var partialany = (function (aps) {
//이 함수는 기능 표현식을 자신의 실행 결과이며 partialany 변수에 할당됩니다.
함수 func (fn) {
var argsorig = aps.call (인수, 1);
return function () {
var args = [],
argspartial = aps.call (인수),
i = 0;
// 모든 원래 매개 변수 세트,
// 매개 변수가 partialany._ 자리 표시자인 경우 다음 함수 매개 변수에 해당하는 값을 사용하십시오.
// 그렇지 않으면 원래 매개 변수에서 값을 사용하십시오
for (; i <argsorig.length; i ++) {
args [i] = argsorig [i] === func._
? argspartial.shift ()
: Argsorig [i];
}
// 추가 매개 변수가 있으면 끝에 추가하십시오.
return fn.apply (this, args.concat (argspartial));
};
}
// 자리 표시 자 설정의 경우
func._ = {};
반환 핵;
}) (array.prototype.slice);
사용 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
// 처리 함수를 정의합니다
기능 16 진수 (R, G, B) {
반환 '#' + r + g + b;
}
// 부분 함수를 정의하고 16 진수의 첫 번째 매개 변수 r을 변하지 않은 매개 변수 값 FF로 가져옵니다.
var redmax = partialany (16 진, 'ff', partialany._, partialany._);
// 새 기능의 호출 메소드는 다음과 같습니다. 2 개의 매개 변수 만 필요합니다.
Console.log (Redmax ('11 ','22 ')); // "#ff1122"
partialany._가 너무 길다고 생각되면 대신 __을 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
var __ = partialany._;
var greenmax = partialany (hex, __, 'ff');
Console.log (Greenmax ('33 ','44 '));
var bluemax = partialany (hex, __, __, 'ff');
Console.log (Bluemax ('55 ','66 '));
var magentamax = partialany (16 진, 'ff', __, 'ff');
Console.log (Magentamax ('77 '));
이렇게하면 훨씬 간단합니다.
카레
카레 링은 기능적 프로그래밍의 기능으로, 여러 매개 변수의 처리를 체인 호출과 유사하게 단일 매개 변수의 처리로 변환합니다.
추가 기능의 간단한 예를 들어 보겠습니다.
코드 사본은 다음과 같습니다.
함수 추가 (x, y) {
var OldX = X, Oldy = y;
if (typeof oldy === "undefined") {// 부분
반환 기능 (Newy) {
Oldx + Newy를 반환합니다.
}
}
x + y를 반환합니다.
}
이렇게하면 다음과 같은 여러 가지 방법이 있습니다.
코드 사본은 다음과 같습니다.
// 시험
유형 add (5); // "기능"
추가 (3) (4); // 7
// 이것은 또한 가능합니다
var add2000 = Add (2000);
add2000 (10); // 2010
다음으로보다 일반적인 카레 기능을 정의해 봅시다.
코드 사본은 다음과 같습니다.
// 첫 번째 매개 변수는 적용 할 함수이며 두 번째 매개 변수는 전달할 최소 매개 변수 수입니다.
기능 카레 (func, minargs) {
if (minargs == 정의되지 않은) {
Minargs = 1;
}
기능 funcwithargsfrozen (frozenargs) {
return function () {
// 최적화 처리, 호출 할 때 매개 변수가 없으면 함수 자체를 반환하십시오.
var args = array.prototype.slice.call (인수);
var newargs = frozenargs.concat (args);
if (newargs.length> = minargs) {
반환 func.apply (this, newargs);
} 또 다른 {
FUNCWITHARGSFROZEN (NewArgs);
}
};
}
반환 funcwithargsfrozen ([]);
}
이런 식으로, 우리는 첨가 정의와 같은 비즈니스 행동을 마음대로 정의 할 수 있습니다.
코드 사본은 다음과 같습니다.
var plus = curry (function () {
var result = 0;
for (var i = 0; i <arguments.length; ++ i) {
결과 += 인수 [i];
}
반환 결과;
}, 2);
사용하는 방법은 실제적이고 다양합니다.
코드 사본은 다음과 같습니다.
플러스 (3, 2) // 일반 호출
Plus (3) // 적용, 반환 함수 (반환 값은 3+ 매개 변수 값입니다)
Plus (3) (2) // 응용 프로그램 완료 (5로 돌아 가기)
plus () (3) () () (2) // 반환 5
Plus (3, 2, 4, 5) // 여러 매개 변수를받을 수 있습니다
Plus (3) (2, 3, 5) // 유사하게
다음은 뺄셈의 예입니다
코드 사본은 다음과 같습니다.
var minus = 카레 (function (x) {
var result = x;
for (var i = 1; i <arguments.length; ++ i) {
결과 -= 인수 [i];
}
반환 결과;
}, 2);
또는 매개 변수 순서를 교체하려면 이와 같이 정의 할 수 있습니다.
코드 사본은 다음과 같습니다.
var flip = curry (function (func) {
카레를 반환합니다 (기능 (a, b) {
반환 핵 (b, a);
}, 2);
});
요약
JavaScript의 기능에는 많은 특수 기능이 있으며, 클로저 및 인수 매개 변수 특성을 사용하여 다양한 기술을 구현할 수 있습니다. 다음 기사에서는 초기화를 위해 기능을 사용하는 기술을 계속 소개합니다.