JavaScript 디자인 모델과 개발 실천 - 독서노트 1.고급 함수(상)

부끄럽게도 4개월여 동안 갱신되지 않았다.4월 이후부터 바빠지기 시작했습니다. 논문, 필설, 졸업여행 등 칠팔구 일이 많은 시간을 차지했고 졸업 후 바쁜 일을 시작했습니다. 그동안 블로그를 쓰고 싶었지만 마음을 가라앉히지 못했습니다.그동안'JavaScript 디자인 모델과 개발 실천'을 보면서 좋은 느낌을 받았고 적지 않은 이익을 얻었다.
이 글은 고급 함수가 무엇인지, 고급 함수가 어떤 작용을 하는지 등 몇 가지 측면을 중심으로 소개한다.
무엇이 고급 함수입니까?
고급 함수는 적어도 다음 조건 중 하나를 충족하는 함수입니다.
　　1.함수는 매개 변수로 전달될 수 있다
　　2.함수는 반환값으로 출력할 수 있다
　　
　　1.함수는 매개 변수로 전달된다. 그러면 우리는 변화하기 쉬운 업무 논리의 일부를 추출하고 이 부분의 업무를 함수 매개 변수에 놓을 수 있다. 그러면 업무 코드의 변화와 변하지 않는 부분을 분리할 수 있다.일반적인 형식은 다음과 같습니다.
1) 콜백 함수
흔히 볼 수 있는 리셋은 aax에서 보냅니다. 우리가 aax를 사용하여 요청을 보내지만, 요청이 되돌아오는 정확한 시간을 알 수 없습니다. 우리는 리셋을 사용하여 해결할 수 있습니다. 콜백을 매개 변수로 aax가 요청한 방법에 전송하고, 요청이 끝난 후에 실행할 수 있습니다.

function getData(id, callback){
    $.ajax({
        type: 'GET',
        url: 'http://163.com/?getData='+id,
        dataType: 'json',
        success: function(data){
            callback(data);
        }
    })
}

getData(12345, function(data){console.log(data)})

콜백 함수는 비동기 요청에만 사용할 수 있습니다.
만약 우리가 페이지에 100개의div 노드를 만들고 이 노드를 숨김으로 설정하려면 이렇게 할 수 있다

function appendDiv(){
    for(var i = 0; i < 100; i++){
        var div = document.createElement('div');
        div.innerHTML = i;
        document.body.append(div);
        div.style.display = 'none';
    }
}
appendDiv()

이렇게 쓰는 것은 문제가 없을 것 같지만, 다음에 필요에 따라 100개의div를 배경색으로 바꾸면 이 코드는 다시 사용하기 어렵다.우리는 이렇게 할 수 있다.

function appendDiv(callback){
    for(var i = 0; i < 100; i++){
        var div = document.createElement('div');
        div.innerHTML = i;
        document.body.append(div);
        if(callback && typeof callback === 'function'){
            callback(div)
        }
    }
}
appendDiv(function(node){
    node.style.display = 'none'
})

리셋을 사용하여 업무 코드를 리셋 함수에서 일부 업무 코드를 추출할 수 있어 코드 복용에 큰 도움이 된다.만약 후기에 수요를 수정하고 색을 바꾸며 크기를 바꾸는 등 리셋 함수만 다시 쓰면 된다.
　　2)Array.prototype.sort, 이 방법은 하나의 함수를 매개 변수로 받아들인다. 이 함수는 Array의 정렬 규칙을 알려주고 서로 다른 방법을 정의하여 서로 다른 정렬을 실현하여sort를 매우 유연하게 한다.

[1, 3, 4, 2].sort(function(a, b){
    return a-b;
})
//  [1, 2, 3, 4]

[1, 3, 4, 2].sort(function(a, b){
    return b-a;
})
//  [4, 3, 2, 1]

 
　　2.함수를 반환값으로 출력
1) 데이터의 유형 판단
앞의 문장과 같다http://www.cnblogs.com/ppforever/p/4362102.html하나의 js 대상이 수조인지 아닌지를 판단하고 함수를 반환값으로 합니다.확장성:

var isType = function(type){
        //       
    return function(obj){
        return Object.prototype.toString.call(obj) === '[object '+ type +']';
    }
}
var isArray = isType('Array');
var isString = isType('String');
var isNumber = isType('Number');

console.log(isArray([1, 6, 3]))
//true

또한 반복 문을 사용하여 isType 메서드를 대량 등록할 수도 있습니다.

var Type = {};

for(var i = 0, type; type = ['String', 'Array', 'Number'][i++]; ){
    (function(type){
        Type['is'+type] = function(obj){
　　　　　　　　
            return Object.prototype.toString.call(obj) === '[object '+ type +']';
        }
    })(type)
}

Type.isArray([]); 
//true
Type.isString('abc');
//true
Type.isNumber(123);
//true
Type.isArray(123);
//false

상부에서는 주로 고급 함수의 흔한 형식을 소개하고, 다음 부분에서는 고급 함수의 고급 응용에 중심을 둘 것이다.