让我们来讲一下如何使用MVC模式进行JavaScript程序开发的完整攻略。先来了解一下什么是MVC模式吧。

什么是MVC模式

MVC模式拆分JavaScript应用程序为Model、View和Controller三个部分。M表示数据模型(model)，V表示用户界面(view)，C表示控制逻辑(controller)。这种将应用程序分解成三个独立的部分的方式可以提高代码组织的质量和可维护性。下面简单介绍一下MVC的三个部分：

Model（数据模型）

Model是应用程序中处理数据逻辑的部分，通过这个模型对象的定义，我们可以操作从数据库获取的数据，同时我们还可以定义对这个数据的操作，如增加数据、修改数据、查询数据等等。其中这些操作大多数是异步的，会因数据量的增大而变得越来越复杂。但也没什么可担心的，我们只需要让Model角色处理这些细节就行了。

View（用户界面）

View是应用程序中的用户界面，从用户角度来看，视图层是看到和感受到的部分。这个层级决定了视图会是什么样子，由哪些参与之才令其成为视图。另外，这个层级还得掌管绑定到页面上的事件处理应用程序中的处理逻辑。值得一提的是，用户可以与视图交互，甚至改变其样子而不影响应用程序的其他部分。

Controller（控制器）

Controller是应用程序中的控制逻辑，负责处理用户事件、更新数据模型和更新视图UI。Controller层级承接了Model层级和View层级之间的通信，实现了应用程序流程的控制。很多时候，Controller层级只需要很简单的驱动力就可以操纵其他两个层级。与View类似，Controller也会处理用户请求。

如何进行MVC模式的JavaScript程序开发

下面我们来介绍一下如何进行MVC模式的JavaScript程序开发流程。

分离代码

把Javascript代码拆分成3部分，分别是Model、View、Controller，把相关的代码一一对应放到相应的js文件中，做到模块化。这样既方便后期维护，也便于代码重用。

|-- js/
|   |-- models/
|   |   |-- user.js
|   |   |-- product.js
|   |-- views/
|   |   |-- userView.js
|   |   |-- productView.js
|   |-- controllers/
|   |   |-- userController.js
|   |   |-- productController.js
|   |-- main.js

数据模型（Model）

在Model层中，我们定义了一种数据结构来存储数据状态，封装了操作数据的一些方法。在Model层中通常会有以下几个方法：

add: 新增数据
edit: 修改数据
delete: 删除数据
fetch: 获取数据

以下面一个User的Model对象为例：

// js/models/user.js

(function() {
  var User = function(firstName, lastName, email) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
  };

  User.prototype.getFullName = function() {
    return this.firstName + ' ' + this.lastName;
  };

  window.User = User;
}());

代码中使用了IIFE将User对象的定义包装起来，以防止污染全局命名空间。User对象有三个属性（firstName、lastName、email）和一个方法（getFullName），方法用来获取用户的全名。该User对象将被保存到window对象的User属性中，以便其他模块可以使用它。

视图（View）

视图是根据数据创建动态UI的逻辑集合。在视图层中，我们要重新创建页面上的元素，然后绑定一些事件，当用户触发这些事件时，将会执行Controller层中的一些行为并反映到页面上。在View层中通常会有以下几个方法：

render: 渲染模板并更新视图中的元素
bind: 绑定事件到元素

以下是一个UserView的代码：

// js/views/userView.js

(function() {
  window.UserView = function(userModel) {
    this.userModel = userModel;
    this.$el = $('<div>');
  };

  UserView.prototype.render = function() {
    this.$el.html(this.userModel.getFullName());
    return this;
  };

  UserView.prototype.bind = function(eventName, handler) {
    this.$el.on(eventName, handler);
  };
}());

代码中，我们定义了一个UserView对象，该对象接受一个UserModel对象作为其构造器的参数并将其保存到userModel属性上。UserView对象有两个方法，render方法用来渲染模板并更新页面中的元素，bind方法用来绑定事件到元素。这样我们就将数据模型和视图分开了。

控制器（Controller）

在Controller层中，我们会实现一些响应用户事件并控制Model和View进行更新的方法。在Controller层中通常会有以下几个方法：

add: 新增数据，并更新页面视图
edit: 修改数据，并更新页面视图
delete: 删除数据，并更新页面视图

以下是UserController的代码：

// js/controllers/userController.js

(function() {
  window.UserController = function(userModel, userView) {
    this.userModel = userModel;
    this.userView = userView;
  };

  UserController.prototype.init = function() {
    this.userView.bind('click', function() {
      alert('Clicked!');
    });

    this.userModel.on('change', this.render, this);
    this.render();
  };

  UserController.prototype.render = function() {
    this.userView.render();
  };
}());

代码中实现了一个UserController，该对象接受一个UserModel对象和一个UserView对象作为其构造函数的参数，并将两个模块保存在userModel和userView属性中。UserController对象有两个方法，init方法用来绑定事件并在用户模型发生更改时控制视图进行更新，render方法用来更新视图。

示例说明

下面我们来使用一个这样一个示例来说明MVC模式的使用。

用户列表的展示

我们使用一个简单的例子，我们在网页上展示一个用户列表，要求能够实现以下功能：

渲染用户列表
添加新的用户
修改用户信息
删除用户信息

端口代码分离成3部分：

Model：该部分处理数据存储逻辑，等价于数据库操作
View：该部分负责界面展示，与用户有交互，等价于HTML页面呈现
Controller：该部分负责逻辑处理，等价于JavaScript代码块

以下是实现代码：

// js/models/user.js

(function() {
  var User = function(firstName, lastName, email) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.email = email;
  };

  User.prototype.getFullName = function() {
    return this.firstName + ' ' + this.lastName;
  };

  window.User = User;

  // 数据存储逻辑
  var users = [], listeners = [];

  function addUser(user) {
    users.push(user);
    notifyListeners();
  }

  function editUser(user, index) {
    users[index] = user;
    notifyListeners();
  }

  function deleteUser(index) {
    users.splice(index, 1);
    notifyListeners();
  }

  function fetchUsers() {
    return users;
  }

  function notifyListeners() {
    listeners.forEach(function(listener) {
      listener(users);
    });
  }

  function registerListener(listener) {
    listeners.push(listener);
  }

  window.userModel = {
    User: User,
    addUser: addUser,
    editUser: editUser,
    deleteUser: deleteUser,
    fetchUsers: fetchUsers,
    registerListener: registerListener
  };
}());

// js/views/userView.js

(function() {
  window.UserView = function(userModel) {
    var that = Object.create(UserView.prototype);
    that.userModel = userModel;
    that.$el = $('<div>');
    that.$el.html(that.renderList());

    userModel.registerListener(function(users) {
      that.$el.html(that.renderList());
    });

    return that;
  };

  UserView.prototype = {
    renderList: function() {
      var userList = $('<ul>');
      this.userModel.fetchUsers().forEach(function(user) {
        var userView = $('<li>');
        userView.text(user.getFullName());
        userList.append(userView);
      });

      return userList;
    }
  };
}());

// js/controllers/userController.js

(function() {
  window.UserController = function(userModel, userView) {
    var that = Object.create(UserController.prototype);
    that.userModel = userModel;
    that.userView = userView;

    userView.$el.on('click', '#addUser', function() {
      var firstName = $('#firstName').val(),
          lastName = $('#lastName').val(),
          email = $('#email').val();
      var newUser = new userModel.User(firstName, lastName, email);
      userModel.addUser(newUser);

      $('#firstName').val('');
      $('#lastName').val('');
      $('#email').val('');
    });

    userView.$el.on('click', '.editUser', function() {
      var firstName = $(this).parents('li').find('.firstName').val(),
          lastName = $(this).parents('li').find('.lastName').val(),
          email = $(this).parents('li').find('.email').val(),
          index = $(this).data('id');
      var user = new userModel.User(firstName, lastName, email);
      userModel.editUser(user, index);
    });

    userView.$el.on('click', '.deleteUser', function() {
      var index = $(this).data('id');
      userModel.deleteUser(index);
    });

    return that;
  };

  UserController.prototype = {
    init: function() {
      this.userView.render();
    }
  };
}());

// js/main.js

$(function() {
  var userModel = window.userModel,
      userView = window.UserView(userModel),
      userController = window.UserController(userModel, userView);

  userController.init();
  $('body').append(userView.$el);
});

代码中，数据模型是User对象，具有获取用户全名、添加用户、修改用户、删除用户、获取用户列表等方法。视图层是UserView对象，用来渲染、呈现User对象列表的信息。控制器层是UserController对象，监听视图用户交互后的事件并控制相关事件的执行。

我们将代码按照MVC模式分成了3部分，并且每一部分都有相应的职责，从而使代码具有更好的可维护性和复用性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈使用MVC模式进行JavaScript程序开发 - Python技术站

浅谈使用MVC模式进行JavaScript程序开发