//global variable
var memArray  =[];

//object    
function member(id, password){

  this.id          = id; 
  this.pwd         = password
  }
  var memObj1=new member("m001","123");
  memArray.push(memObj1);

Wie sende ich eine Warnung aus, um jedes Objekt, das an memArray gesendet wird, aufzufordern und zu bearbeiten?

0
fendi 23 Feb. 2020 im 09:56

3 Antworten

Beste Antwort

Wenn Sie es anpassen möchten, versuchen Sie, Ihre eigenen Modalitäten anstelle von window.prompt zu verwenden und nur Werte mit bearbeitbaren Textfeldern anzuzeigen. Erfassen Sie beim Senden diese Werte und ändern Sie sie im Array.

var memArray = [];


//object    
function member(id, password) {

  this.id = id;
  this.pwd = password
}
var memObj1 = new member("m001", "123");
var memObj2 = new member("m002", "123");
var memObj3 = new member("m031", "123");
memArray.push(memObj1);
memArray.push(memObj2);
memArray.push(memObj3);
memArray.forEach((val, ind) => {
  memArray[ind] = JSON.parse(window.prompt("want to edit values?", JSON.stringify(memArray[ind])));
});

console.log(memArray)
2
pavan kumar 23 Feb. 2020 im 07:09

Für mich sind Warnungen nur Modelle im Browser, um einem bestimmten Benutzer informatives Feedback zu seinen Aktionen zu geben. Daher denke ich, dass es erforderlich ist, entweder ein Dialogmodell oder ein Formular zu verwenden, um die Objekte in memArray zu bearbeiten.

0
Malintha Ranasinghe 23 Feb. 2020 im 07:15

Pavans Antwort ist gut, aber um dies in automatisierten Tests testbar zu machen:

// I would name these fields in your API 
// by making the constructor take an object.
// Capitalise the name to signal that it can be newed    
function Member({id, password}) {
  this.id = id;
  this.pwd = password
}

// Name the array for what it is
const members = [ 
  new Member({id: "m001", password: "123"}),
  new Member({id: "m002", password: "123"}),
  new Member({id: "m031", password: "123"})
]

const editInBrowserFn = member => JSON.parse(window.prompt("want to edit values?", JSON.stringify(member)));

const updateMembers = editFn => array => array.map(editFn)

// To get an update
const updatedMembers = updateMembers(editInBrowserFn)(members)

console.log(updatedMembers)

// You can now test it by making an testing editFn that doesn't need user interaction

const testEditFn = m => new Member({id: m.id, password: 'test'})

const testMembers = updateMembers(testEditFn)(members)
console.log(testMembers)

Siehe diesen Artikel für eine ausführliche Erklärung dieses Ansatzes.

Um dies auf diese Weise zu tun, müssen Sie es aus dem globalen Bereich herausnehmen. Das ist eine gute Disziplin, um sich zu entwickeln. Als ersten Schritt können Sie ein Objekt im globalen Bereich erstellen, das die neueste Mitgliederliste enthält:

const Members = (() => {
   let _members = []
   return {
      setMembers: members => _members = [...members],
      getMembers: () => [..._members]
   }
})()

Jetzt können Sie die Mitglieder folgendermaßen aktualisieren:

const updateFn = updateMembers(editInBrowser)

function updatePasswords() {
   const members = Members.getMembers()
   Members.setMembers(updateFn(members))
}

Nichts kann das Mitgliederarray jetzt versehentlich löschen oder mutieren, so dass die Fehleroberfläche beseitigt wird.

So wird React setState entworfen. Es ist inspiriert von funktionalen Programmierideen und Unveränderlichkeit.

Sie möchten wahrscheinlich nur ein Mitglied aktualisieren können, also:

const Members = (() => {
   let _members = []
   return {
      setMembers: members => _members = [...members],
      getMembers: () => [..._members],
      updateMember: updated => 
         this.members = _members.map(m =>
            m.id === updated.id ? updated : m)
   }
})()

Jetzt befindet sich Ihre gesamte Array-Mutation an einem einzigen Ort, und Sie müssen sie dort nur noch fehlerfrei machen. Andernfalls wird Ihr globaler Status offengelegt und Sie müssen überall Fehler beheben, die damit zusammenhängen. Ohne dies sind alle Ihre aufrufenden Funktionen dafür verantwortlich, den globalen Status der Anwendung korrekt zu verwalten. Komplex.

Kristallisieren Sie die Komplexität an einem Ort.

Ich habe einen Artikel und eine vollständige Implementierung des Stores geschrieben (in 40 Codezeilen). hier .

1
Josh Wulf 24 Feb. 2020 im 14:31