$(function () { var model = new Mode(['PHP', 'JavaScript']), view = new View(model, { 'list' : $('#list'), 'addButton' : $('#plusBtn'), 'delButton' : $('#minusBtn') }), controller = new Controller(model, view); view.show(); });
代码分析如下：
先分析下我们是要实现什么样的功能，基本功能有：
一个下拉框，通过用户输入的操作来实现用户增加一项及用户选中一项后删除一项的功能;
当然也添加了用户切换到那一项的事件;
比如我们现在来增加一条数据的时候，在视图层上添加监听事件，如下代码：
// 添加按钮绑定事件 this._elements.addButton.click(function(e){ that.addButtonClicked.notify(); });
然后调用观察者类Event中的方法notify(发布一个事件) that.addButtonClicked.notify();大家都知道，观察者模式又叫发布-订阅模式，让多个观察者对象同时监听某一个主题对象，当某一个主题对象发生改变的时候，所有依赖它的对象都会得到通知;
因此在控制层(Controller)我们可以使用如下代码对发布者进行监听操作：
this._view.addButtonClicked.attach(function(){ that.addItem(); });
之后调用自身的方法addItem();代码如下：
addItem: function(){ var item = window.prompt('Add item:', ''); if (item) { this._model.addItem(item); } }
调用模型层(model)的方法addItem();把一条数据插入到select框里面去;model(模型层)的addItem()方法代码如下：
// 增加一项 addItem: function(elem) { this._elems.push(elem); this.itemAdd.notify({elem:elem}); },
如上代码 增加一项后，通过 this.itemAdd 发布一个消息，然后在视图层(View)上通过如下代码来监听这个消息;代码如下：
// 绑定模型监听器 this._model.itemAdd.attach(function(){ that.rebuildList(); });
最后监听到模型上(Model)的数据发生改变后，及时调用自身的方法rebuildList()去更新页面上的数据;
模型层(Model)最主要做业务数据封装操作。视图层(View)主要发布事件操作及监听模型层上的数据，如果模型层上有数据改变的时候，及时更新页面操作，最后显示给页面上来，控制层(Controller)主要监听视图层(View)的事件，调用模型层(Model)的方法来更新模型上的数据，模型层数据更新后，会发布一条消息出去，最后视图层(View)通过监听模型层(Model)的数据变化，来更新页面的显示; 如上是MVC的基本流程。
MVC的优点：
1. 耦合性低：视图层和业务层分离了，如果页面上显示改变的话，直接在视图层更改即可，不用动模型层和控制层上的代码;也就是视图层 与 模型层和控制层
已经分离了;所以很容易改变应用层的数据层和业务规则。
2. 可维护性：分离视图层和业务逻辑层也使得WEB应用更易于维护和修改。
MVC的缺点：
个人觉得适合于大型项目，对于中小型项目并不适合，因为要实现一个简单的增删改操作，只需要一点点JS代码，但是MVC模式代码量明显增加了。
对于学习成本也就提高了，当然如果使用一些封装好的MVC库或者框架就好了。
以上就是关于javascript中的MVC模式实现方法，优缺点的详细分析，希望对大家的学习有所帮助。
您可能感兴趣的文章: