JavaScript 체인 구조 직렬화에 대한 자세한 설명

1. 개요

JavaScript에는 다음과 같이 체인 패턴 코드가 너무 많습니다.

if_else:

if(...){
    //TODO
}else if(...){
    //TODO
}else{
    //TODO
}

스위치:

switch(name){
    case ...:{
        //TODO
        break;
    }
    case ...:{
        //TODO
        break;
    }
    default:{
        //TODO    
    }
}

질문: 위의 체인 코드와 같이 평면화하여 연결하고 싶다면 어떻게 해야 할까요? 다음과 같습니다:

//fn1,f2,f3为处理函数
_if(fn1)._elseIf(fn2)._else(fn3);

함께 구현해 보도록 하겠습니다.

2. 체인 코드 평탄화

이제 다음과 같은 체인 코드가 있다고 가정합니다:

if(name === 'Monkey'){
    console.log('yes, I am Monkey');
}else if(name === 'Dorie'){
    console.log('yes, I am Dorie');
}else{
    console.log('sorry, over for ending!');
}

자, 이제 "단계적으로 평탄화"하겠습니다. ".

실제로 위의 코드를 보면 if...else 형식이 실제로는 데이터 구조에서 단일 연결 리스트라는 것을 쉽게 알 수 있습니다. 그런 다음 처음에는 JavaScript를 사용하여 단일 연결 목록을 구현합니다.

var thens = [];
thens.resolve = function(name){
    for(var i = 0, len = this.length; i < len;i++){
        if(this[i](name) !== &#39;next&#39;){
            break;
        }
    }
}
thens.push(f1, f2, f3);

그 중 f1, f2, f3은 판단 함수로, f1, f2, f3이 'next'를 반환하면 아래쪽으로 계속 검색한다고 가정하고 그렇지 않으면, 아래쪽으로 검색하는 것을 중지하겠습니다.

function f1(name){
    if(name === 'Monkey'){
        console.log('yes, I am Monkey');
    }else{
        return 'next';
    }
}
function f2(name){
    if(name === 'Dorie'){
        console.log('yes, I am Dorie');
    }else{
        return 'next';
    }
}
function f3(){
    console.log('sorry, over for ending!');
}

자, 이것이 연결리스트의 패턴입니다.

그런데 저희의 최종 목표는 다음과 같습니다.

//fn1,f2,f3为处理函数
_if(fn1)._elseIf(fn2)._else(fn3);

위 코드를 다음과 같이 변경하면 좋지 않을까요? ! !

thens.push(f1).push(f2).push(f3).resolve();

그러나 JavaScript의 push 메소드는 배열 객체가 아닌 배열의 새로운 길이를 반환합니다.

그래서 그러면 push와 동일한 효과를 가지지만 배열 객체를 반환하는 새로운 add 메소드만 작성할 수 있습니다.

thens.add = function(f){
    if(typeof f === 'function'){
        this.push(f);
        return this;        
    }        
}

테스트 코드는 다음과 같습니다.

var thens = [];
thens.add = function(f){
    if(typeof f === 'function'){
        this.push(f);
        return this;        
    }        
}
thens.resolve = function(name){
    for(var i = 0, len = this.length; i < len;i++){
        if(this[i](name) !== 'next'){
            break;
        }
    }    
}
thens.add(f1).add(f2).add(f3).resolve();

그러나 이는 add 및 해결 메소드를 전역 변수 thens에 바인딩하는 단점이 있습니다. 배열을 생성할 때마다 메소드를 복사하여 붙여넣을 수는 없으므로 리팩토링된 코드는 다음과 같습니다.

function Slink(){
    this.thens = [];
    this.thens.add = function(f){
        if(typeof f === 'function'){
            this.push(f);
            return this;        
        }        
    }
    this.thens.resolve = function(name){
        for(var i = 0, len = this.length; i < len;i++){
            if(this[i](name) !== &#39;next&#39;){
                break;
            }
        }    
    }
}

분명히 인스턴스화될 때마다 add 및 해결과 같은 공용 메소드를 생성하는 것은 옳지 않습니다. .과학적으로 프로토타입을 사용하여 원래대로 계속 변형하면 다음과 같습니다.

function Slink(){
    this.thens = [];
}
Slink.prototype = {
    add: function(f){
            if(typeof f === 'function'){
                this.thens.push(f);
                return this;        
            }        
    },
    resolve: function(name){
            for(var i = 0, len = this.thens.length; i < len; i++){
                if(this.thens[i](name) !== &#39;next&#39;){
                    break;
                }
            }    
    }
}

테스트 코드는 다음과 같습니다.

var thens = new Slink();
thens.add(f1).add(f2).add(f3);
thens.resolve();

나쁘진 않지만, 매번 실패합니다. 새 Slink를 수동으로 생성하는 것은 약간 번거롭기 때문에 새 Slink 프로세스를 jQuery와 마찬가지로 다음과 같이 함수로 캡슐화합니다.

function $go(f){
    return new Slink(f);
}
function Slink(f){
    this.thens = [];
    this.thens.push(f);
}
Slink.prototype = {
    add: function(f){
            if(typeof f === 'function'){
                this.thens.push(f);
                return this;        
            }        
    },
    resolve: function(name){
            for(var i = 0, len = this.thens.length; i < len; i++){
                if(this.thens[i](name) !== &#39;next&#39;){
                    break;
                }
            }    
    }
}

테스트 코드는 다음과 같습니다.

$go(f1).add(f2).add(f3).resolve();

자, 끝났습니다. 이제 구문 설탕 문제가 발생합니다.

function _if(f){
    return new Slink(f);
}
function Slink(f){
    this.thens = [];
    this.thens.push(f);
}
Slink.prototype = {
    _elseIf: function(f){
            if(typeof f === 'function'){
                this.thens.push(f);
                return this;        
            }        
    },
    _else: function(f){
            return this._elseIf(f);
    },
    resolve: function(name){
            for(var i = 0, len = this.thens.length; i < len; i++){
                if(this.thens[i](name) !== &#39;next&#39;){
                    break;
                }
            }
            return this;            
    }
}

테스트 코드는 다음과 같습니다.

_if(f1)._elseIf(f2)._else(f3).resolve();

물론, 이러한 방식으로 배열을 사용하는 것 외에도 다음과 같이 클로저를 사용하여 체인 평탄화 효과를 얻을 수도 있습니다.

var func = Function.prototype;
func._else = func._elseIf = function(fn){
    var _this = this;
    return function(){
        var res = _this.apply(this,arguments);
        if(res==="next"){  //值为Boolean
            return fn.apply(this,arguments);
        }
        return res;
    }
}

테스트 코드는 다음과 같습니다.

function f1(name){
    if(name === 'Monkey'){
        console.log('yes, I am Monkey');
    }else{
        return 'next';
    }
}
function f2(name){
    if(name === 'Dorie'){
        console.log('yes, I am Dorie');
    }else{
        return 'next';
    }
}
function f3(){
    console.log('sorry, over for ending!');
}
f1._elseIf(f2)._else(f3)('Dorie');

Three , Asynchronous code chain flattening

위에서 논의한 내용은 모두 동기 프로세스입니다. 호출 기능?

무슨 뜻인가요?

function f1(name){
    setTimeout(function(){
        if(name === 'Monkey'){
            console.log('yes, I am Monkey');
        }else{
            return 'next';
        }
    }, 2000);
}
function f2(name){
    if(name === 'Dorie'){
        console.log('yes, I am Dorie');
    }else{
        return 'next';
    }
}
function f3(){
    console.log('sorry, over for ending!');
}

위 코드의 논리에 따르면 f2 실행 여부를 판단하기 전에 f1이 완전히 실행(setTimeout 실행 포함)될 때까지 기다려야 하는데 이것이 무엇입니까? 정말 그럴까?

테스트 코드는 다음과 같습니다.

_if(f1)._elseIf(f2)._else(f3).resolve();

코드를 실행한 결과 아무것도 출력되지 않습니다.

왜요?

자바스크립트는 단일 스레드이기 때문입니다. 자세한 내용은 (여기)를 참조하세요

그럼 어떻게 해결할까요?

비동기 코드가 있고 후속 체인은 비동기 코드 다음에 처리되어야 하므로 다음과 같이 후속 체인을 실행하기 전에 비동기 코드가 완료될 때까지 기다립니다.

function f1(name){
    setTimeout(function(){
        if(name === 'Monkey'){
            console.log('yes, I am Monkey');
        }else{
            //处理后续链
            this.resolve(name, 1);//1代表下一个需处理函数在数组中的位置
        }
    }.bind(this), 2000);
}

좋아요, 함수에서는 Slink 객체를 나타내는 this를 사용하고, 해결 방법을 변경했기 때문에 Slink 생성자와 프로토타입 체인을 다음과 같이 미세 조정해야 합니다.

function Slink(f){
    this.thens = [];
    this.thens.push(f.bind(this));
}
Slink.prototype = {
    _elseIf: function(f){
            if(typeof f === 'function'){
                this.thens.push(f.bind(this));
                return this;        
            }        
    },
    _else: function(f){
            return this._elseIf(f.bind(this));
    },
    resolve: function(name, flag){
            for(var i = flag, len = this.thens.length; i < len; i++){
                if(this.thens[i](name) !== &#39;next&#39;){
                    break;
                }
            }
            return this;            
    }
}

테스트 코드는 다음과 같습니다. 팔로우:

function f1(name){
    setTimeout(function(){
        if(name === 'Monkey'){
            console.log('yes, I am Monkey');
        }else{
            //处理后续链
            this.resolve(name, 1);//1代表下一个需处理函数在数组中的位置
        }
    }.bind(this), 2000);
}
function f2(name){
    if(name === 'Dorie'){
        console.log('yes, I am Dorie');
    }else{
        return 'next';
    }
}
function f3(){
    console.log('sorry, over for ending!');
}
_if(f1)._elseIf(f2)._else(f3).resolve('',0);

ㅋㅋㅋ 프라미스 알면 이렇게 비슷할 것 같나요?

예, 비동기 코드를 평면화하는 목적을 달성하는 목적은 동일하지만 여기의 코드는 Promise보다 훨씬 간단합니다. Promise에 대한 자세한 내용은 (여기)를 참조하세요.

위 내용은 JavaScript 체인구조 직렬화에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!