使用点击功能将对象打印到html

Question

我试图将我的学生对象逐个添加到DOM。我现在已经在控制台上记录了我想要的所有内容，我只是想在点击按钮时逐个打印每个学生对象。一旦按钮被点击三次，我想禁用它。如果没有物体，我没有问题，但现在我被卡住了。我知道我已经抓住了所有的元素。我只是不知道它是否应该在原型中？感谢

objects.js：

var Student = function(name, street, city, state, gpa, date) { 
     this.name = name; 
     this.address = { 
      street: street, 
      city: city, 
      state: state 
     }; 
     this.gpa = gpa; 
     this.date = date; 


    }; 
    Student.prototype = { 

     print: function() { 
      console.log("Name: " + this.name); 
      console.log("Street: " + this.address.street); 
      console.log("City: " + this.address.city); 
      console.log("State: " + this.address.state); 
      console.log("Average GPA: " + this.getAverageGPA()); 
      console.log("Today's Date: " + this.date); 
     }, 

     getAverageGPA: function() { 
      var avgGPA = 0; 
      for (var j = 0; j < this.gpa.length; j++) { 
       avgGPA = avgGPA + this.gpa[j]; 
      } 
      avgGPA = avgGPA/this.gpa.length; 
      return avgGPA; 
     } 
    }; 


    function School() { 

     this.createdStudents = []; 
    } 
    School.prototype = { 

     addStudent: function(newStudent) { 
      this.createdStudents.push(newStudent); 

     }, 

     createStudent: function(name, street, city, state, gpa) { 
      var newStudent = new Student(name, street, city, state, gpa); 
      this.addStudent(newStudent); 
      return newStudent; 
     }, 

     printScores: function() { 
      for (var i = 0; i < this.createdStudents.length; i++) { 
       this.createdStudents[i].print(); 
      } 
     }, 

     printStudents: function(){ 
      var a = 0; 

      console.log(this.createdStudents[0]); 

     } 
    }; 

main.js：

(function(){ 
    console.log("start of function"); 

    /* Globals*/ 

     var clicks = 0; 
     var button = document.querySelector('a'); 
     var school = new School(); 

     school.addStudent(new Student(
      "Walker", 
      '123 South Drive', 
      'Sarasota', 
      'FL', 
      [ 
       3.0, 
       3.4, 
       3.8 
      ], date())); 

     school.addStudent(new Student("Pinky", 
      '876 Pebble Beach Lane', 
      'Orange County', 
      'CA', 
      [ 
       2.5, 
       2.4, 
       3.8 
      ], date())); 

     school.printScores(); 

     console.log('---------New Object Entered-------------'); 

     school.addStudent(new Student(
      "Marisa", 
      '5463 S Jersey Road', 
      'Atlantic City', 
      'NJ', 
      [ 
       3.8, 
       4.0, 
       2.3 
      ], date())); 

     school.printScores(); 

      //Gets the correct date 
      function date(){ 
      var today = new Date(); 
      var dd = today.getDate(); 
      var mm = today.getMonth()+1; //January is 0! 

      var yyyy = today.getFullYear(); 
      if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = mm+'/'+dd+'/'+yyyy; 
      return today; 
     }; 

    })(); 

Answer 1

好吧，我不认为它应该是Student的目标责任知道它是如何显示和它也不应该是School对象的责任。数据和演示应该尽可能松散耦合。我会建议你阅读约MVC。

如果无论如何由于某种原因想要保留这些对象本身的操作，至少应该从对象中提取打印策略。

E.g. FIDDLE

JS

function DOMConsole(el) { 
    this.el = el; 
} 

DOMConsole.prototype.log = function (obj) { 
    var output = typeof obj === 'object'? JSON.stringify(obj) : obj, 
     div = document.createElement('div'); 

    div.appendChild(document.createTextNode(output)); 

    this.el.appendChild(div); 
}; 

function MyPrintableObj(someProp) { 
    this.someProp = someProp; 
} 

MyPrintableObj.prototype.print = function (cons) { 
    cons.log(this.someProp); 
}; 

HTML

<div id="console"></div> 

<script> 
    (function() { 
     var cons = new DOMConsole(document.getElementById('console')), 
      pObj = new MyPrintableObject('test'); 

     pObj.print(cons); //print in DOM 
     pObj.print(console); //print in console 
    })(); 
</script>