Beim Schreiben von JS-Code stoßen wir häufig auf komplexe logische Urteile. Normalerweise können Sie if/else oder switch verwenden, um mehrere bedingte Urteile zu implementieren, aber es wird eine geben Mit zunehmender Logik wird der if/else/switch im Code immer aufgeblähter und schwieriger zu verstehen. Dieser Artikel wird Ihnen also einen Versuch geben.
Schauen Sie sich zuerst einen Code an
/**
* 按钮点击事件
* @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
*/const onButtonClick = (status)=>{ if(status == 1){
sendLog('processing')
jumpTo('IndexPage')
}else if(status == 2){
sendLog('fail')
jumpTo('FailPage')
}else if(status == 3){
sendLog('fail')
jumpTo('FailPage')
}else if(status == 4){
sendLog('success')
jumpTo('SuccessPage')
}else if(status == 5){
sendLog('cancel')
jumpTo('CancelPage')
}else {
sendLog('other')
jumpTo('Index')
}
}复制代码Durch den Code können Sie die Klicklogik dieser Schaltfläche sehen: Führen Sie zwei Dinge entsprechend unterschiedlichen Aktivitätszuständen aus. Senden Sie Protokolle, um den Punkt zu begraben und zur entsprechenden Seite zu springen. Sie können problemlos einen Umschreibungsplan für diesen Code vorschlagen kleiner Tipp: Wenn die Logik von Fall 2 und Fall 3 gleich ist, können Sie die Ausführungsanweisung und Pause weglassen, und die Logik von Fall 3 wird automatisch in Fall 2 ausgeführt.
Zu diesem Zeitpunkt werden einige Schüler sagen, dass es eine einfachere Möglichkeit gibt, Folgendes zu schreiben:
/**
* 按钮点击事件
* @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
*/const onButtonClick = (status)=>{ switch (status){ case 1:
sendLog('processing')
jumpTo('IndexPage') break
case 2: case 3:
sendLog('fail')
jumpTo('FailPage') break
case 4:
sendLog('success')
jumpTo('SuccessPage') break
case 5:
sendLog('cancel')
jumpTo('CancelPage') break
default:
sendLog('other')
jumpTo('Index') break
}
}复制代码Der obige Code sieht sauberer aus, weil er die Beurteilungsbedingung berücksichtigt als Objekt Der Attributname verwendet die Verarbeitungslogik als Attributwert des Objekts. Wenn Sie auf die Schaltfläche klicken, wird nach den Attributen des Objekts gesucht. Diese Schreibmethode eignet sich besonders für unäre bedingte Beurteilungen.
Gibt es eine andere Möglichkeit, es zu schreiben? Einige:
const actions = { '1': ['processing','IndexPage'], '2': ['fail','FailPage'], '3': ['fail','FailPage'], '4': ['success','SuccessPage'], '5': ['cancel','CancelPage'], 'default': ['other','Index'],
}/**
* 按钮点击事件
* @param {number} status 活动状态：1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统取消
*/const onButtonClick = (status)=>{ let action = actions[status] || actions['default'],
logName = action[0],
pageName = action[1]
sendLog(logName)
jumpTo(pageName)
}复制代码Das Schreiben wie dieses verwendet das Map-Objekt in es6. Macht das nicht mehr Spaß? Was ist der Unterschied zwischen Kartenobjekt und Objektobjekt?
Ein Objekt hat normalerweise seinen eigenen Prototyp, daher hat ein Objekt immer einen „Prototyp“-Schlüssel.const actions = new Map([
[1, ['processing','IndexPage']],
[2, ['fail','FailPage']],
[3, ['fail','FailPage']],
[4, ['success','SuccessPage']],
[5, ['cancel','CancelPage']],
['default', ['other','Index']]
])/**
* 按钮点击事件
* @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
*/const onButtonClick = (status)=>{ let action = actions.get(status) || actions.get('default')
sendLog(action[0])
jumpTo(action[1])
}复制代码Verzeihen Ich bedanke mich dafür, dass ich nicht die spezifischen Details jeder Urteilslogik schreibe, weil der Code zu ausführlich ist.
Verzeihen Sie mir, dass ich noch einmal if/else verwende, denn ich sehe, dass viele Leute immer noch if/else verwenden, um so lange logische Urteile zu schreiben.
Aus dem obigen Beispiel können wir ersehen, dass sich Ihre Beurteilungsmenge verdoppelt und sich auch Ihre Codemenge verdoppelt, wenn Ihre Logik zu diesem Zeitpunkt aktualisiert wird.
/**
* 按钮点击事件
* @param {number} status 活动状态：1开团进行中 2开团失败 3 开团成功 4 商品售罄 5 有库存未开团
* @param {string} identity 身份标识：guest客态 master主态
*/const onButtonClick = (status,identity)=>{ if(identity == 'guest'){ if(status == 1){ //do sth
}else if(status == 2){ //do sth
}else if(status == 3){ //do sth
}else if(status == 4){ //do sth
}else if(status == 5){ //do sth
}else { //do sth
}
}else if(identity == 'master') { if(status == 1){ //do sth
}else if(status == 2){ //do sth
}else if(status == 3){ //do sth
}else if(status == 4){ //do sth
}else if(status == 5){ //do sth
}else { //do sth
}
}
}复制代码Die Kernlogik des obigen Codes besteht darin, die beiden Bedingungen zu einer Zeichenfolge zusammenzufügen und das Map-Objekt unter Verwendung der bedingten Zeichenfolge als Schlüssel und der Verarbeitungsfunktion als Wert zu suchen und auszuführen mehrfach verwendet Dies ist besonders nützlich, wenn bedingte Urteile gefällt werden.
Wenn der obige Code mit einem Object-Objekt implementiert wird, sieht er natürlich ähnlich aus:
const actions = new Map([
['guest_1', ()=>{/*do sth*/}],
['guest_2', ()=>{/*do sth*/}],
['guest_3', ()=>{/*do sth*/}],
['guest_4', ()=>{/*do sth*/}],
['guest_5', ()=>{/*do sth*/}],
['master_1', ()=>{/*do sth*/}],
['master_2', ()=>{/*do sth*/}],
['master_3', ()=>{/*do sth*/}],
['master_4', ()=>{/*do sth*/}],
['master_5', ()=>{/*do sth*/}],
['default', ()=>{/*do sth*/}],
])/**
* 按钮点击事件
* @param {string} identity 身份标识：guest客态 master主态
* @param {number} status 活动状态：1 开团进行中 2 开团失败 3 开团成功 4 商品售罄 5 有库存未开团
*/const onButtonClick = (identity,status)=>{ let action = actions.get(`${identity}_${status}`) || actions.get('default')
action.call(this)
}复制代码Wenn einige Schüler das Gefühl haben, dass es etwas umständlich ist, die Abfragebedingungen in eine Zeichenfolge zu buchstabieren , dann gibt es eine andere Lösung, die darin besteht, ein Map-Objekt zu verwenden und das Object-Objekt als Schlüssel zu verwenden:
const actions = { 'guest_1':()=>{/*do sth*/}, 'guest_2':()=>{/*do sth*/}, //....}const onButtonClick = (identity,status)=>{ let action = actions[`${identity}_${status}`] || actions['default']
action.call(this)
}复制代码Ist es nicht etwas fortgeschrittener?
Der Unterschied zwischen Karte und Objekt ist auch hier zu sehen. Karte kann jede Art von Daten als Schlüssel verwenden.
Lassen Sie uns nun den Schwierigkeitsgrad ein wenig erhöhen. Was ist, wenn die Verarbeitungslogik von Status 1-4 im Gastfall dieselbe ist:
const actions = new Map([
[{identity:'guest',status:1},()=>{/*do sth*/}],
[{identity:'guest',status:2},()=>{/*do sth*/}], //...])const onButtonClick = (identity,status)=>{ let action = [...actions].filter(([key,value])=>(key.identity == identity && key.status == status))
action.forEach(([key,value])=>value.call(this))
}复制代码Eine bessere Art zu schreiben Es ist die Verarbeitungslogikfunktion im Cache:
const actions = new Map([
[{identity:'guest',status:1},()=>{/* functionA */}],
[{identity:'guest',status:2},()=>{/* functionA */}],
[{identity:'guest',status:3},()=>{/* functionA */}],
[{identity:'guest',status:4},()=>{/* functionA */}],
[{identity:'guest',status:5},()=>{/* functionB */}], //...])复制代码Das Schreiben auf diese Weise kann bereits den täglichen Bedarf decken, aber im Ernst, es ist immer noch etwas umständlich, FunktionA oben viermal neu zu schreiben. Wenn die Beurteilungsbedingung besonders kompliziert wird, Zum Beispiel hat die Identität 3 Zustände und der Status 10. Dann müssen Sie 30 Verarbeitungslogiken definieren, und oft ist das etwas, was ich nicht akzeptieren möchte So implementiert:
const actions = ()=>{ const functionA = ()=>{/*do sth*/} const functionB = ()=>{/*do sth*/} return new Map([
[{identity:'guest',status:1},functionA],
[{identity:'guest',status:2},functionA],
[{identity:'guest',status:3},functionA],
[{identity:'guest',status:4},functionA],
[{identity:'guest',status:5},functionB], //...
])
}const onButtonClick = (identity,status)=>{ let action = [...actions()].filter(([key,value])=>(key.identity == identity && key.status == status))
action.forEach(([key,value])=>value.call(this))
}复制代码Hier kommen die Vorteile von Map stärker zur Geltung. Reguläre Typen können als Schlüssel verwendet werden, was unbegrenzte Möglichkeiten eröffnet. Wenn sich die Nachfrage ändert, muss für alle Gastsituationen ein Log-Vergrabungspunkt gesendet werden , und unterschiedliche Statussituationen erfordern auch eine separate logische Verarbeitung, dann können wir es so schreiben:
const actions = ()=>{ const functionA = ()=>{/*do sth*/} const functionB = ()=>{/*do sth*/} return new Map([
[/^guest_[1-4]$/,functionA],
[/^guest_5$/,functionB], //...
])
}const onButtonClick = (identity,status)=>{ let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
action.forEach(([key,value])=>value.call(this))
}复制代码Mit anderen Worten, unter Verwendung der Eigenschaften von Array-Schleifen wird eine Logik ausgeführt, die die regulären Bedingungen erfüllt kann öffentliche Logik und individuelle Logik gleichzeitig ausführen. Da es reguläre Regeln gibt, können Sie Ihrer Fantasie freien Lauf lassen. Um weitere Spielmöglichkeiten freizuschalten, werde ich in diesem Artikel nicht näher darauf eingehen.
Zusammenfassung
Wenn Sie an diesem Artikel interessiert sind, folgen Sie bitte dem öffentlichen WeChat-Konto des Autors: „大 Zhuanzhuanfe“ Empfohlenes Tutorial: „
JavaScript-Grundlagen-TutorialDas obige ist der detaillierte Inhalt vonElegante Möglichkeit, komplexe Urteile in JavaScript zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
