Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-Techniken zum Schreiben komplexer Urteilslogiken

不言
Freigeben: 2019-03-05 14:25:08
nach vorne
2506 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit Schreibtechniken für komplexe Beurteilungslogik in JavaScript. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

In einigen Szenarien können wir auf mehrere Beurteilungsbedingungen stoßen. In diesem Fall verwenden wir normalerweise if/else/switch für die Verarbeitung, aber bei mehreren Beurteilungen wie diesem wird eine Menge Code im Weg stehen Schreiben. Wie kann ich es lösen? Bitte lesen Sie weiter unten. Nehmen wir zunächst if/esle als Beispiel. Ich werde die Switch-Schreibmethode nicht noch einmal schreiben Durch die Beurteilung unterschiedlicher Status werden unterschiedliche Methoden ausgeführt. Der Nachteil besteht darin, dass die Menge an Code groß ist und die Lesbarkeit nicht förderlich ist Beurteilungsbedingungen dieser Methode, wie viele Methoden aufgerufen werden müssen. Um dies zu wissen, müssen Sie die gesamte Methode lesen. Hier sind einige weitere optimierte Methoden. Dieser Artikel konzentriert sich auf die Vue-Schreibmethode

checkStatus(status) {
 if (status == 1) {
    function1();
  } else if (status == 2) {
    function2();
  } else if (status == 3) {
    function3();
  } else if (status == 4) {
    function4();
  } else if (status == 5) {
    function5();
  }
}
Nach dem Login kopieren

. Diese Schreibmethode bindet den Methodennamen an den zu beurteilenden Typwert Attributnamen und rufen Sie die entsprechende Methode auf. Die Methode ist einfach und klar geschrieben. Was ist, wenn wir unter unserer Erweiterung mehr als eine Methode aufrufen müssen, wenn der Typ 1 ist? Bitte sehen Sie unten:

const actions = {
  '1': 'function1',
  '2': 'function2',
  '3': 'function3',
  '4': 'function4',
  '5': 'function5'
 }
 function checkStatus(status) {
   let action = actions[status];
  this[action]()
 }
Nach dem Login kopieren

Wir können die Methoden schreiben, die aufgerufen werden müssen, wenn der Typ 1 im Array ist. , dann können Sie es beim Aufruf wie folgt verwenden:

const actions = {
 '1': ['function1','function2'],
 '2': ['function3','function4'],
 '3': ['function5','function6'],
}
Nach dem Login kopieren

Die beiden oben genannten Methoden werden für die Ein-Yuan-Beurteilung verwendet. Die spezifische Verwendung hängt vom jeweiligen Szenario ab.

Was ist, wenn es sich um ein Mehrfachurteil handelt? Wenn wir beispielsweise den Status als 1 beurteilen, müssen wir auch beurteilen, ob der Typwert 1 ist und so weiter. . .

Die Bedingung entspricht

function checkStatus(status) {
  let action = actions[status];
   this[action[0]]()
  this[action[1]]()
 }
Nach dem Login kopieren

Wenn Sie in diesem Geschäftsszenario das traditionelle if/else verwenden, ist die Menge an Code unvorstellbar. Sehen wir uns als Nächstes an, wie Sie diese Situation optimieren können

if (status == 1 && type == 1) {
    //do someThing
} else if (status == 2 && type == 2) {
   //do someThing
} else if (status == 3 && type == 3) {
   //do someThing
} else if (status == 4 && type == 4) {
   //do someThing
} else if (status == 5 && type == 5) {
   //do someThing
}
Nach dem Login kopieren

Hier muss erklärt werden, dass Map jede Art von Daten als Schlüssel verwenden kann. Wir können direkt feststellen, ob der Schlüssel unsere Bedingungen erfüllt, und die entsprechende Verarbeitungsmethode kann in den entsprechenden Vulue-Wert geschrieben werden. Diese Schreibweise kann grundsätzlich die meisten Urteilslogiken erfüllen. . . Der Schwierigkeitsgrad wird unten erhöht. . .
Wir haben oben erwähnt, dass die entsprechende Methode ausgeführt wird, wenn Typ und Status eins zu eins übereinstimmen. Wenn Typ 1 ist, ist ststus 2 und 3, und beide müssen dieselbe Methode ausführen Müssen 1. und 2 auch dieselbe Methode ausführen? Die obige Methode kann auch wie folgt verwendet werden:

  const actions = new Map([
   [{type:'1',status:1},()=>{/*do sth*/}],
   [{type:'2',status:2},()=>{/*do sth*/}],
   //...
  ])

  function checkStatus(type,status)=>{
   let action = [...actions].filter(([key,value])=>(key.type == type && key.status == status))
   action.forEach(([key,value])=>value.call(this))
  }
Nach dem Login kopieren

Ein solches Schreiben kann bereits den täglichen Bedarf decken, aber es ist immer noch etwas unangenehm, den Status zweimal auf 2 umzuschreiben. Wenn die Beurteilungsbedingung besonders kompliziert wird. Beispielsweise hat der Typ 3 Zustände und der Status 10. Dann müssen Sie 30 Verarbeitungslogiken definieren, und oft sind viele dieser Logiken gleich. Es scheint schwierig, die obige Schreibmethode zu akzeptieren, also können Sie sie so schreiben:

const actions = new Map([
  [{type:'1',status:2},()=>{functionA}],
  [{type:'3',status:3},()=>{/functionB}],
  [{type:'2',status:1},()=>{functionC}],
  [{type:'1',status:3},()=>{functionA}],
  //...
 ])
Nach dem Login kopieren

Das heißt, unter Verwendung der Eigenschaften von Array-Schleifen wird Logik ausgeführt, die reguläre Bedingungen erfüllt. Aufgrund der Existenz regulärer Regeln können dann öffentliche Logik und individuelle Logik ausgeführt werden. Sie können Ihrer Fantasie freien Lauf lassen und weitere Spielmöglichkeiten freischalten. Wenn Sie die Funktionen von ES6Map nicht verstehen, können Sie die obige Verwendung in der Tat für eine große Menge an Beurteilungslogik optimieren. .

Ich hoffe, dass es in Zukunft mehr als nur if/else/switch geben wird. . . .

Das obige ist der detaillierte Inhalt vonJavaScript-Techniken zum Schreiben komplexer Urteilslogiken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage