你可能注意到了,最近的一段时间越来越多的Web应用有变复杂的趋势,重心从服务端慢慢向着客户端转移。 这是个正常的趋势么?我不知道。支持和反对者的讨论就像是在讨论复活者和圣诞节哪一个更好一样; 很难说哪一方观点就是完全正确的。因此,本文不会探讨究竟哪一方是对的,不过我还是试图解释一下使用大家所熟知的面向对象编程也许可以成功的解决客户端编程中存在的一些问题。

不太规范的代码的示例

为了顾及一个应用的响应以及用户体验, 导致我们创建了持续增长的复杂的代码, 这些代码变得难于理解和维护。 你可以轻松的想到在没有任何构架和遵循规则构建出客户端的JavaScript应用代码将会这样:

01 $(function(){
02     $('#form').submit(function(e) {
03         e.preventDefault();
04  
05         $.ajax({
06             url: '/animals',
07             type: 'POST',
08             dataType: 'json',
09             data: { text: $('#new-animal').find('textarea').val() },
10             success: function(data) {
11                 $('#animals').append('<li>' + data.text + '</li>');
12                 $('#new-animal').find('textarea').val('');
13             }
14          });
15      });
16 });

维护这一类的代码将会很难。因为这短短的一段代码与很多地方都有关联: 它控制着很多的事件 (站点, 用户, 网络事件), 它要处理用户的操作事件, 要解析服务器返回的应答并且产生HTML代码。 有人可能说: “是的,你说的对, 但是如果这不是一个客户端单页的页面应用?这最多算是一次过度使用jQuery类库的例子” ——不是很有说服力的观点, 因为众所周知,易于维护和精心设计的代码是非常重要的。特别是许多的工具或者是框架致力于保持代码可用以便于我们能更简单的去测试、维护、重用、和扩展它。

MV*是什么?

谈到这里。我们能受益于那些基于MVC的JavaScript框架,但这些框架大部分不使用MVC,并且相当于Model和Videw的一种结合,或者在二都之间的一些东西,这很难去分清。这就是为什么说大部分的Javascript框架是基于MV*。

改变方法或许可以提供项目中客户端的组织和架构,这使得代码可以在很长的一段时间内容易维护,即使重构已经有的代码也变得相对容易。知道他如何工作和下面一些问题的答案是必需要要记住的。

  • 我的应用里有哪些类型的数据?-Model

  • 用户应该看到什么?-View

  • 谁是和用户交互的程序?-Controller

使用MVC框架重构代码

受用MVC重构代码有什么好处?

  • 解除DOM和Ajax的依赖

  • 代码有更好的结构,并且更容易测试。

  • 从 $(document).ready()中删除多余的代码,只留下使用Model创建Links的部分。

让我们使用一些简单步骤来重构一个典型的代码块

步骤 1: 创建视图并移动Ajax请求

我们开始解除DOM和Ajax的依赖. 使用prototypes建造者,模式创建'Animals' 对象,并且添加一个 'add' 方法.同时创建视图'NewAnimalView' , 并且添加方法'addAnimal'、 'appendAnimal' 、'clearInput'.

代码如下:

01 var Animals = function() {
02 };
03  
04 Animals.prototype.add = function (options) {
05      $.ajax({
06          url: '/animals',
07          type: 'POST',
08          dataType: 'json',
09          data: { text: options.text },
10          success: options.success
11      });
12 };
13  
14  var NewAnimalView = function (options) {
15     this.animals = options.animals;
16     var add = $.proxy(this.addAnimal, this);
17     $('# form').submit(add);
18  };
19  
20  NewAnimalView.prototype.addAnimal = function(e) {
21      e.preventDefault();
22      var self = this;
23  
24      this.animals.add({
25          text: $('#new-animal textarea').val(),
26          success: function(data) {
27              self.appendAnimal (data.text);
28              self.clearInput();          
29          }
30      });
31  };
32  
33 NewAnimalView.prototype.appendAnimal = function(text) {
34     $('#animals ul').append('<li>' + data.text + '</li>');
35 };
36 NewAnimalView.prototype.clearInput = function() {
37     $('#new-animal textarea').val('');
38 };
39  
40  $(document).ready(function() {
41      var animals = new Animals();
42      new NewAnimalView({ animals: animals });
43  });

步骤 2: 使用事件解除依赖.

这个例子,利用MVC框架是关键。我们将会用到事件机制, 事件使我们结合和触发自定义事件. 因此,我们创建新的“AnimalsView”和“NewAnimalView”,并且赋予它们不同的显示animals的职责。 使用事件就来区别职责非常简单。如果在方法和事件之间传递职责,如下所示:

01 var events = _.clone(Backbone.Events);
02 var Animals = function() {
03 };
04  
05 Animals.prototype.add = function(text) {
06      $.ajax({
07          url: '/animals',
08          type: 'POST',
09          dataType: 'json',
10          data: { text: text },
11          success: function(data) {
12             events.trigger('animal:add', data.text);
13          }
14      });
15 };
16  
17 var NewAnimalView = function(options) {
18     this.animals = options.animals;
19     events.on('animal:add'this.clearAnimal, this);
20     var add = $.proxy(this.addAnimal, this);
21     $('# form').submit(add);
22  };
23  
24 NewAnimalView.prototype.addAnimal = function(e) {
25      e.preventDefault();
26      this.animals.add($('#new-animal textarea').val());
27  };
28  
29 NewAnimalView.prototype.clearInput = function() {
30     $('#new-animal textarea').val('');
31 };
32  
33 var AnimalsView = function() {
34     events.on('animal:add'this.appendAnimal, this);
35 };
36  
37 AnimalsView.prototype.appendAnimal = function(text) {
38     $('#animals ul').append('<li>' + data.text + '</li>');
39 };
40  
41 $(document).ready(function() {
42      var animals = new Animals();
43      new NewAnimalView({ animals: animals });
44      new AnimalsView();
45 });

步骤 3: 传递数据结构到核心框架

最后,最重要的一步,我们使用: models, views and collections.

01 var Animal = Backbone.Model.extend({
02     url: '/animals'
03 });
04  
05 var Animals = Backbone.Collection.extend({
06     model: Animal
07 });
08  
09 var AnimalsView = Backbone.View.extend({
10     initialize: function() {
11         this.collection.on('add'this.appendAnimal, this);
12     },
13  
14     appendAnimal: function(animal) {
15         this.$('ul').append('<li>' + animal.escape('text') + '</li>');
16     }
17 });
18  
19  
20 var NewAnimalView = Backbone.View.extend({
21     events: {
22         'submit form''addAnimal'
23     },
24  
25     initialize: function() {
26         this.collection.on('add'this.clearInput, this);
27     },
28  
29     addAnimal: function(e) {
30         e.preventDefault();
31         this.collection.create({ text: this.$('textarea').val() });
32     },
33  
34     clearInput: function() {
35         this.$('textarea').val('');
36     }
37 });
38  
39 $(document).ready(function() {
40     var animals = new Animals();
41     new NewAnimalView({ el: $('#new-animal'), collection: animals });
42     new AnimalsView({ el: $('#animals'), collection: animals });
43 });

总结

我们已经实现什么呢?我们在高度的抽象上工作。代码的维护、重构和扩展变得更容易。我们极大的优化了代码结果,是不是很迷人?太棒了。但是,我可能要给你泼冷水,即使最好的框架,开发的代码仍旧是脆弱并且难以维护。因此,如果你认为使用了一个较好的MV*框架能解决所有代码上的问题是错误的。记住在重构过程中,经历了第二步,代码会变得好很多,我们不使用框架的主要组件。

记住MV*框架是好的这一点,但是所有关注在‘How’去开发一个应用,这让程序开发人员头决定‘What’。每个框架的一个补充,尤其是当项目的Domain很复杂,将是Domain驱动设计方法,这将更关注与下面的方面:“what”, 把需求转化为真正的产品的一个过程。但是,这是我们要讨论的另外一个主题。

构建更好的客户端 JavaScript 应用的更多相关文章

  1. 使用 jQuery UI 和 jQuery 插件构建更好的 Web 应用程序

    简介: 对于那些使用 JavaScript 和 jQuery 库从桌面应用程序转向 Web 应用程序的开发人员来说,他们还不习惯去考虑应用程序基本的外观,因为这些以前都是由操作系统来处理的.了解 jQ ...

  2. T3 - 构建大型 Web 应用的 JavaScript 框架

    T3 是一个用于构建大型 Web 应用程序的客户端 JavaScript 框架.T3 和大多数的 JavaScript 框架不同.它的意思是一小部分的整体架构,它允许你建立可扩展的客户端代码.T3 应 ...

  3. JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)

    具有交互性的JavaScript程序使用的是事件驱动的程序设计模型.   目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...

  4. JavaScript 客户端JavaScript之 脚本化浏览器窗口

    1.计时器 客户端Javascript以全局函数setTimeOut().clearTimeOut().setInterval().clearInterval()提供这一功能.   前者是从运行的那一 ...

  5. JavaScript 客户端JavaScript之 脚本化文档

    客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由.   一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...

  6. 前端--关于客户端javascript

    浏览器中的Javascript 客户端javascript就是运行在浏览器中的javascript,现代的浏览器已经有了很好的发展,虽然它是一个应用程序,但完全可以把它看作是一个简易的操作系统,因为像 ...

  7. Stylus-NodeJS下构建更富表现力/动态/健壮的CSS

    --------------------------本文来自张鑫旭大神博客------------------------------ 一.为什么我会讲Stylus,而不是SASS和LESS? SAS ...

  8. Docker多步构建更小的Java镜像

    译者按: 最新版Docker将支持多步构建(Multi-stage build),这样使用单个Dockerfile就可以定义多个中间镜像用于构建,测试以及发布等多个步骤,并且有效减小最终镜像的大小. ...

  9. 使用OpenAPI构建更智能的API

    像OpenAPI这样的API描述规范是一个关键工具,您应该尽可能地将其好好掌握,记录和执行API的工作由计算机和开发人员完成:OpenAPI 3.0现在允许额外的表现力,可以让机器为我们做更多有用的工 ...

随机推荐

  1. 代码审计之DocCms漏洞分析

    0x01 前言 DocCms[音译:稻壳Cms] ,定位于为企业.站长.开发者.网络公司.VI策划设计公司.SEO推广营销公司.网站初学者等用户 量身打造的一款全新企业建站.内容管理系统,服务于企业品 ...

  2. x264编码的图像出现乱码的问题

    将YUV进行x264编码的时候,建议将 i_threads 参数设置成 X264_SYNC_LOOKAHEAD_AUTO//* 取空缓冲区继续使用不死锁的保证. 否则有可能编码出来的数据会出现IDR_ ...

  3. Android textview及其子类

    属性: android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/phone/map/all) andr ...

  4. .NET二级域名共享Session

    ASP.NET二级域名站点共享Session状态 今天, 我要写的是如何在二级域名站点之间,主站点和二级域名站点之间共享Session. 首先, Session要共享,站点之间SessionID必须要 ...

  5. SQL SERVER 2008 R2安全配置与防暴力破解

    https://blog.csdn.net/enweitech/article/details/49864215 0x00 sql server 2008 权限介绍 在访问sql server 200 ...

  6. c++ 纯虚析构函数

    ; 这就是一个纯虚析构函数,这种定义是允许的. 一般纯虚函数都不允许有实体,但是因为析构一个类的过程中会把所有的父类全析构了,所以每个类必有一个析构函数. 所以.纯虚析构函数需要提供函数的实现,而一般 ...

  7. 【大数据系列】win10不借助Cygwin安装hadoop2.8

    一.下载安装包 解压安装包并创建data,name,tmp文件夹 二.修改配置文件 1.core-site.xml <?xml version="1.0" encoding= ...

  8. 重建索引:ALTER INDEX..REBUILD ONLINE vs ALTER INDEX..REBUILD

    什么时候需要重建索引 1. 删除的空间没有重用,导致 索引出现碎片 2. 删除大量的表数据后,空间没有重用,导致 索引"虚高" 3.索引的 clustering_facto 和表不 ...

  9. Android Usb Camera HAL框架

  10. ConfluenceRemoteUserAuth

    配置confluence使用httpHeader的方式进行登录(目标版本:atlassian-confluence-6.3.3) 前提是已经安装好了Confluence,并且前端使用apache或者n ...