<h3>javascript simple MVC</h3> <div> <select name="" id="setAnimal"> <option value="cat">cat</option> <option value="fish">fish</option> <option value="bird">bird</option> </select> </div> <p id="animalDo"></p> <script> // controller Animal = { start : function() { this.view.start();//从视图触发 }, set : function(animalName) { this.model.setAnimal(animalName); //controller 改变 model } }; // model Animal.model = { animalDictionary : { car : 'meows', fish : 'swims', bird : 'flies' }, currentAnimal : null, setAnimal : function(name) { this.currentAnimal = this.animalDictionary[name] ? name : null; this.onchange(); }, onchange : function() { Animal.view.update(); //model传递结果到View(个人觉得这里可以由Controller来专递,最好不要直接操作视图) }, getAnimalAction : function() { return this.currentAnimal ? this.currentAnimal + ' ' + this.animalDictionary[this.currentAnimal] : 'unknow'; } }; // view Animal.view = { start : function() { document.getElementById('setAnimal').onchange = this.onchange; //视图绑定事件 }, onchange : function() { Animal.set(document.getElementById('setAnimal').value); //视图执行操作,调用Controller }, update : function() { //视图执行最后的更新响应 console.log(Animal.model.getAnimalAction()); document.getElementById('animalDo').innerHTML = Animal.model.getAnimalAction(); } }; Animal.start();//入口 </script>