Maison > interface Web > js tutoriel > Explication détaillée de l'exemple de code du calculateur d'appel de chaîne JavaScript

Explication détaillée de l'exemple de code du calculateur d'appel de chaîne JavaScript

黄舟
Libérer: 2017-03-18 14:52:23
original
2060 Les gens l'ont consulté

Un calculateur de syntaxe de chaîne classique ressemblerait à ceci :

FluentCalculator.one.plus.two // 1 + 2 = 3
FluentCalculator.one.plus.two.plus.three.minus.one.minus.two.minus.four //  -1
FluentCalculator.one.plus.ten - 10 // 1 + 10 - 10 = 1
Copier après la connexion

S'il est appelé anormalement, il retournera undéfini :

FluentCalculator.one.one // undefined,因为值不能调用值
FluentCalculator.one.plus.plus // undefined,操作不能连续调用
Copier après la connexion

Pour ce problème, nous devons avoir une idée déterminé : il y a des états passés entre les appels, et il y a deux états.

Lorsque l'appel de valeur (num) se termine, l'état de l'opération objet (OprStatus) est renvoyé.

Lorsque l'appel d'opération (opr) se termine, l'objet d'état de valeur (NumStatus) est renvoyé.

En d'autres termes, ces deux états sont alternés. S'il n'y a pas d'alternance, il est appelé anormalement et undéfini sera renvoyé.

"use strict";

var num = ["zero","one","two","three","four","five","six","seven","eight","nine","ten"];

var oprs = {plus : "+",minus : "-",times : "*",pidedBy : "/"};

var Magic = {};
//状态对象,父对象
function Status(value,opr){
	//当前运算结果
    this.value = value;
	//当前操作符
    this.opr = opr;
}
//值状态对象,继承状态对象
function NumStatus(value,opr){
    Status.call(this,value,opr);
}
//操作状态对象,继承状态对象
function OprStatus(value,opr){
    Status.call(this,value,opr);
}
//给值状态对象原型上绑定方法
for(let i=0;i<num.length;i++){
    Object.defineProperty(Magic,num[i],{
        get : function(){  
            var val;
            if(!this.opr){
                val = i;
            }
            else{              
                switch(this.opr){
                    case "+":val = this.value + i;break;
                    case "-":val = this.value - i;break;
                    case "*":val = this.value * i;break;
                    case "/":val = this.value / i;break;
                }
            }
			//返回操作状态对象
            return new OprStatus(val,null);
        }
    });
}
//给操作状态对象原型上绑定方法
for(let i in oprs){
    if(oprs.hasOwnProperty(i)){
        Object.defineProperty(OprStatus.prototype,i,{
            get : function(){
				//返回值状态对象
                return new NumStatus(this.value,oprs[i]);
            }
        });
    }
}

var FluentCalculator = Magic;

NumStatus.prototype = Magic;
//所有调用结束时,就会调valueOf打印,直接返回最终运算结果
OprStatus.prototype.valueOf = function(){
    return this.value;
};
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal