对JavaScript客户端应用编程的一些建议


Posted in Javascript onJune 24, 2015

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

不太规范的代码的示例

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

$(function(){
  $('#form').submit(function(e) {
    e.preventDefault();
 
    $.ajax({
      url: '/animals',
      type: 'POST',
      dataType: 'json',
      data: { text: $('#new-animal').find('textarea').val() },
      success: function(data) {
        $('#animals').append('<li>' + data.text + '</li>');
        $('#new-animal').find('textarea').val('');
      }
     });
   });
});

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

MVC是什么?

谈到这里。我们能受益于那些基于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'.

代码如下:
 

var Animals = function() {
};
 
Animals.prototype.add = function (options) {
   $.ajax({
     url: '/animals',
     type: 'POST',
     dataType: 'json',
     data: { text: options.text },
     success: options.success
   });
};
 
 var NewAnimalView = function (options) {
  this.animals = options.animals;
  var add = $.proxy(this.addAnimal, this);
  $('# form').submit(add);
 };
 
 NewAnimalView.prototype.addAnimal = function(e) {
   e.preventDefault();
   var self = this;
 
   this.animals.add({
     text: $('#new-animal textarea').val(),
     success: function(data) {
       self.appendAnimal (data.text);
       self.clearInput();     
     }
   });
 };
 
NewAnimalView.prototype.appendAnimal = function(text) {
  $('#animals ul').append('<li>' + data.text + '</li>');
};
NewAnimalView.prototype.clearInput = function() {
  $('#new-animal textarea').val('');
};
 
 $(document).ready(function() {
   var animals = new Animals();
   new NewAnimalView({ animals: animals });
 });

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

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

var events = _.clone(Backbone.Events);
var Animals = function() {
};
 
Animals.prototype.add = function(text) {
   $.ajax({
     url: '/animals',
     type: 'POST',
     dataType: 'json',
     data: { text: text },
     success: function(data) {
      events.trigger('animal:add', data.text);
     }
   });
};
 
var NewAnimalView = function(options) {
  this.animals = options.animals;
  events.on('animal:add', this.clearAnimal, this);
  var add = $.proxy(this.addAnimal, this);
  $('# form').submit(add);
 };
 
NewAnimalView.prototype.addAnimal = function(e) {
   e.preventDefault();
   this.animals.add($('#new-animal textarea').val());
 };
 
NewAnimalView.prototype.clearInput = function() {
  $('#new-animal textarea').val('');
};
 
var AnimalsView = function() {
  events.on('animal:add', this.appendAnimal, this);
};
 
AnimalsView.prototype.appendAnimal = function(text) {
  $('#animals ul').append('<li>' + data.text + '</li>');
};
 
$(document).ready(function() {
   var animals = new Animals();
   new NewAnimalView({ animals: animals });
   new AnimalsView();
});

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

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

var Animal = Backbone.Model.extend({
  url: '/animals'
});
 
var Animals = Backbone.Collection.extend({
  model: Animal
});
 
var AnimalsView = Backbone.View.extend({
  initialize: function() {
    this.collection.on('add', this.appendAnimal, this);
  },
 
  appendAnimal: function(animal) {
    this.$('ul').append('<li>' + animal.escape('text') + '</li>');
  }
});
 
 
var NewAnimalView = Backbone.View.extend({
  events: {
    'submit form': 'addAnimal'
  },
 
  initialize: function() {
    this.collection.on('add', this.clearInput, this);
  },
 
  addAnimal: function(e) {
    e.preventDefault();
    this.collection.create({ text: this.$('textarea').val() });
  },
 
  clearInput: function() {
    this.$('textarea').val('');
  }
});
 
$(document).ready(function() {
  var animals = new Animals();
  new NewAnimalView({ el: $('#new-animal'), collection: animals });
  new AnimalsView({ el: $('#animals'), collection: animals });
});

总结

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

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

Javascript 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
javascript中的隐式调用
Feb 10 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 #Javascript
js实现跨域的方法实例详解
Jun 24 #Javascript
JavaScript中的Promise使用详解
Jun 24 #Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 #Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 #Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 #Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 #Javascript
You might like
DSP接收机前端设想
2021/03/02 无线电
php实现转换ubb代码的方法
2015/06/18 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
php 中序列化和json使用介绍
2013/07/08 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
Python中optparser库用法实例详解
2018/01/26 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
python实现汽车管理系统
2018/11/30 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
个人授权委托书范本
2014/09/14 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
python数字图像处理之图像的批量处理
2022/06/28 Python