1<select id="selAnimal">
 2    <option value="cat">cat</option>
 3    <option value="fish">fish</option>
 4    <option value="bird">bird</option>
 5</select>
 6<p id="whatDoesThisAnimalDo"></p>
 7
 8<script type="text/javascript">
 9document.getElementById('selAnimal').onchange = function() {
10    var thisAnimalDoes;
11    switch ( this.value ) {
12        case 'cat':
13            thisAnimalDoes = "cat meows";
14            break;
15        case 'fish':
16            thisAnimalDoes = "fish swims";
17            break;
18        case 'bird':
19            thisAnimalDoes = "bird flies";
20            break;
21        default:
22            thisAnimalDoes = "wuff?";
23    }
24    document.getElementById('whatDoesThisAnimalDo').innerHTML = thisAnimalDoes;
25}
26</script>

 1<select id="selAnimal">
 2    <option value="cat">cat</option>
 3    <option value="fish">fish</option>
 4    <option value="bird">bird</option>
 5</select>
 6<p id="whatDoesThisAnimalDo"></p>
 7
 8<script type="text/javascript">
 9// whatDoesAnimalDo 就是一个controller
10var whatDoesAnimalDo = {
11    // 选择视图
12    start: function() {
13        this.view.start();
14    },
15    // 将用户的操作映射到模型的更新上
16    set: function(animalName) {
17        this.model.setAnimal(animalName);
18    },
19};
20// whatDoesAnimalDo的数据model
21whatDoesAnimalDo.model = {
22    // animal的数据
23    animalDictionary: {
24        cat: "meows",
25        fish: "swims",
26        bird: "flies"
27    },
28    // 当前的animal，也就是这个application的状态
29    currentAnimal: null,
30    // 数据模型负责业务逻辑和数据存储
31    setAnimal: function(animalName) {
32        this.currentAnimal = this.animalDictionary[animalName] ? animalName : null;
33        this.onchange();
34    },
35    // 并且通知视图更新显示
36    onchange: function() {
37        whatDoesAnimalDo.view.update();
38    },
39    // 还需要响应视图对当前状态的查询
40    getAnimalAction: function() {
41        return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : "wuff?";
42    }
43};
44// whatDoesAnimalDo的视图
45whatDoesAnimalDo.view = {
46    // 用户输入触发onchange事件
47    start: function() {
48        document.getElementById('selAnimal').onchange = this.onchange;
49    },
50    // 该事件将用户请求发送给控制器
51    onchange: function() {
52        whatDoesAnimalDo.set(document.getElementById('selAnimal').value);
53    },
54    // 视图更新显示的方法，其中视图会向model查询当前的状态，并将其显示给用户
55    update: function() {
56        document.getElementById('whatDoesThisAnimalDo').innerHTML = whatDoesAnimalDo.model.getAnimalAction();
57    }
58};
59whatDoesAnimalDo.start();
60</script>