使用AmplifyJS组件配合JavaScript进行编程的指南


Posted in Javascript onJuly 28, 2015

事件分发的作用

在为页面添加各类交互功能时,我们熟知的最简单的做法就是为页面元素绑定事件,然后在事件处理函数中,做我们想要做的动作。就像这样的代码:

element.onclick = function(event){
  // Do anything.
};

如果我们要做的动作不复杂,那么实际逻辑功能的代码,放在这里是可以的。如果今后需要修改,再到这段事件处理函数的位置来修改。

再进一步,为了做适当的代码复用,我们可能会把逻辑功能中的一部分分拆到一个函数内:

element.onclick = function(event){
  // Other code here.
  doSomethingElse();
};

这里的函数doSomethingElse对应的功能可能会在其他地方用到,所以会这样做分拆。此外,可能会有设定坐标这样的功能(假定函数名为setPosition),则还需要用到浏览器事件对象event提供的诸如指针位置一类的信息:

element.onclick = function(event){
  // Other code here.
  doSomethingElse();
  setPosition(event.clientX, event.clientY);
};

此处有一个不推荐的做法是直接把event对象传递给setPosition。这是因为,分清逻辑功能和事件侦听两种职责,是一种良好的实践。只让事件处理函数本身接触到浏览器事件对象event,有利于降低代码耦合,方便独立测试及维护。

那么,功能越来越多,越来越复杂了会怎么样呢?如果沿用之前的做法,可能是这个样子:

element.onclick = function(event){
  doMission1();
  doMission2(event.clientX, event.clientY);
  doMission3();
  // ...
  doMissionXX();
};

虽然这样用也没问题,但这种时候其实就可以考虑更优雅的写法:

element.onclick = function(event){
  amplify.publish( "aya:clicked", {
    x: event.clientX,
    y: event.clientY
  });
};

这种形式就是事件分发,请注意,这里的事件并不是指浏览器原生的事件(event对象),而是逻辑层面的自定义事件。上面的aya:clicked就是一个随便写(really?)的自定义事件名称。

显然到这还没结束,为了完成之前的复杂的功能,我们还需要将自定义事件和要做的事关联在一起:

amplify.subscribe( "aya:clicked", doMission1);
// ...
amplify.subscribe( "aya:clicked", doMission2);
// ...

看起来又绕了回来?没错,但这是有用的。一方面,浏览器原生事件的侦听被分离并固化了下来,以后如果逻辑功能有变化,例如减少几个功能,则只需要到自定义事件的关联代码部分做删减,而不需要再关心原生事件。另一方面,逻辑功能的调整变得更为灵活,可以在任意的代码位置通过subscribe添加功能,而且可以自行做分类管理(自定义的事件名)。

简单来说,事件分发通过增加一层自定义事件的冗余(在只有简单的逻辑功能时,你就会觉得它是冗余),降低了代码模块之间的耦合度,使得逻辑功能更为清晰有条理,便于后续维护。

等下,前面那个出境了好几次的很有存在感的amplify是干什么的?

Nice,终于是时候介绍这个了。
AmplifyJS

事件分发是需要一定的方法来实现的。实现事件分发的设计模式之一,就是发布/订阅(Publish/Subscribe)。

AmplifyJS是一个简单的JavaScript库,主要提供了Ajax请求、数据存储、发布/订阅三项功能(每一项都可独立使用)。其中,发布/订阅是核心功能,对应命名是amplify.core。

使用AmplifyJS组件配合JavaScript进行编程的指南

amplify.core是发布/订阅设计模式的一个简洁的、清晰的实现,加上注释一共100多行。读完amplify的源码,就可以比较好地理解如何去实现一个发布/订阅的设计模式。
代码全貌

amplify.core的源码整体结构如下:

(function( global, undefined ) {

var slice = [].slice,
  subscriptions = {};

var amplify = global.amplify = {
  publish: function( topic ) {
    // ...
  },

  subscribe: function( topic, context, callback, priority ) {
    // ...
  },

  unsubscribe: function( topic, context, callback ) {
    // ...
  }
};

}( this ) );

可以看到,amplify定义了一个名为amplify的全局变量(作为global的属性),它有3个方法publish、subscribe、unsubscribe。此外,subscriptions作为一个局部变量,它将保存发布/订阅模式涉及的所有自定义事件名及其关联函数。
publish

publish即发布,它要求指定一个topic,也就是自定义事件名(或者就叫做话题),调用后,所有关联到某个topic的函数,都将被依次调用:

publish: function( topic ) {
  // [1]
  if ( typeof topic !== "string" ) {
    throw new Error( "You must provide a valid topic to publish." );
  }
  // [2]
  var args = slice.call( arguments, 1 ),
    topicSubscriptions,
    subscription,
    length,
    i = 0,
    ret;

  if ( !subscriptions[ topic ] ) {
    return true;
  }
  // [3]
  topicSubscriptions = subscriptions[ topic ].slice();
  for ( length = topicSubscriptions.length; i < length; i++ ) {
    subscription = topicSubscriptions[ i ];
    ret = subscription.callback.apply( subscription.context, args );
    if ( ret === false ) {
      break;
    }
  }
  return ret !== false;
},

[1],参数topic必须要求是字符串,否则抛出一个错误。

[2],args将取得除topic之外的其他所有传递给publish函数的参数,并以数组形式保存。如果对应topic在subscriptions中没有找到,则直接返回。

[3],topicSubscriptions作为一个数组,取得某一个topic下的所有关联元素,其中每一个元素都包括callback及context两部分。然后,遍历元素,调用每一个关联元素的callback,同时带入元素的context和前面的额外参数args。如果任意一个关联元素的回调函数返回false,则停止运行其他的并返回false。
subscribe

订阅,如这个词自己的含义那样(就像订本杂志什么的),是建立topic和callback的关联的步骤。比较特别的是,amplify在这里还加入了priority(优先级)的概念,优先级的值越小,优先级越高,默认是10。优先级高的callback,将会在publish的时候,被先调用。这个顺序的原理可以从前面的publish的源码中看到,其实就是预先按照优先级从高到低依次排列好了某一topic的所有关联元素。

subscribe: function( topic, context, callback, priority ) {
    if ( typeof topic !== "string" ) {
      throw new Error( "You must provide a valid topic to create a subscription." );
    }
    // [1]
    if ( arguments.length === 3 && typeof callback === "number" ) {
      priority = callback;
      callback = context;
      context = null;
    }
    if ( arguments.length === 2 ) {
      callback = context;
      context = null;
    }
    priority = priority || 10;
    // [2]
    var topicIndex = 0,
      topics = topic.split( /\s/ ),
      topicLength = topics.length,
      added;
    for ( ; topicIndex < topicLength; topicIndex++ ) {
      topic = topics[ topicIndex ];
      added = false;
      if ( !subscriptions[ topic ] ) {
        subscriptions[ topic ] = [];
      }
      // [3]
      var i = subscriptions[ topic ].length - 1,
        subscriptionInfo = {
          callback: callback,
          context: context,
          priority: priority
        };
      // [4]
      for ( ; i >= 0; i-- ) {
        if ( subscriptions[ topic ][ i ].priority <= priority ) {
          subscriptions[ topic ].splice( i + 1, 0, subscriptionInfo );
          added = true;
          break;
        }
      }
      // [5]
      if ( !added ) {
        subscriptions[ topic ].unshift( subscriptionInfo );
      }
    }

    return callback;
  },

[1],要理解这一部分,请看amplify提供的API示意:

amplify.subscribe( string topic, function callback )
amplify.subscribe( string topic, object context, function callback )
amplify.subscribe( string topic, function callback, number priority )
amplify.subscribe(
  string topic, object context, function callback, number priority )

可以看到,amplify允许多种参数形式,而当参数数目和类型不同的时候,位于特定位置的参数可能会被当做不同的内容。这也在其他很多JavaScript库中可以见到。像这样,通过参数数目和类型的判断,就可以做到这种多参数形式的设计。

[2],订阅的时候,topic是允许空格的,空白符将被当做分隔符,认为是将一个callback关联到多个topic上,所以会使用一个循环。added用作标识符,表明新加入的这个元素是否已经添加到数组内,初始为false。

[3],每一个callback的保存,实际是一个对象,除callback外还带上了context(默认为null)和priority。

[4],这个循环是在根据priority的值,找到关联元素应处的位置。任何topic的关联元素都是从无到有,且依照priority数值从小到大排列(已排序的)。因此,在比较的时候,是先假设新加入的元素的priority数值较大(优先级低),从数组尾端向前比较,只要原数组中有关联元素的priority数值比新加入元素的小,循环就可以中断,且可以确定地用数组的splice方法将新加入的元素添加在此。如果循环一直运行到完毕,则可以确定新加入的元素的priority数值是最小的,此时added将保持为初始值false。

[5],如果到这个位置,元素还没有被添加,那么执行添加,切可以确定元素应该位于数组的最前面(或者是第一个元素)。
unsubscribe

虽然发布和订阅是最主要的,但也会有需要退订的时候(杂志不想看了果断退!)。所以,还会需要一个unsubscribe。

unsubscribe: function( topic, context, callback ) {
  if ( typeof topic !== "string" ) {
    throw new Error( "You must provide a valid topic to remove a subscription." );
  }

  if ( arguments.length === 2 ) {
    callback = context;
    context = null;
  }

  if ( !subscriptions[ topic ] ) {
    return;
  }

  var length = subscriptions[ topic ].length,
    i = 0;

  for ( ; i < length; i++ ) {
    if ( subscriptions[ topic ][ i ].callback === callback ) {
      if ( !context || subscriptions[ topic ][ i ].context === context ) {
        subscriptions[ topic ].splice( i, 1 );
        
        // Adjust counter and length for removed item
        i--;
        length--;
      }
    }
  }
}

读过前面的源码后,这部分看起来就很容易理解了。根据指定的topic遍历关联元素,找到callback一致的,然后删除它。由于使用的是splice方法,会直接修改原始数组,因此需要手工对i和length再做一次调整。
Amplify使用示例

官方提供的其中一个使用示例是:

amplify.subscribe( "dataexample", function( data ) {
  alert( data.foo ); // bar
});

//...

amplify.publish( "dataexample", { foo: "bar" } );

结合前面的源码部分,是否对发布/订阅这一设计模式有了更明确的体会呢?
补充说明

你可能也注意到了,AmplifyJS所实现的典型的发布/订阅是同步的(synchronous)。也就是说,在运行amplify.publish(topic)的时候,是会没有任何延迟地把某一个topic附带的所有回调,全部都运行一遍。
结语

Pub/Sub是一个比较容易理解的设计模式,但非常有用,可以应对大型应用的复杂逻辑。本文简析的AmplifyJS是我觉得写得比较有章法而且简明切题(针对单一功能)的JavaScript库,所以在此分享给大家。

Javascript 相关文章推荐
jquery实现table鼠标经过变色代码
Sep 25 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
JS实现简单抖动效果
Jun 01 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
JavaScript编程中的Promise使用大全
Jul 28 #Javascript
javascript+html5实现绘制圆环的方法
Jul 28 #Javascript
学习Bootstrap组件之下拉菜单
Jul 28 #Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 #Javascript
深入理解JavaScript中的箭头函数
Jul 28 #Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 #Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
js中生成map对象的方法
2014/01/09 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python getopt 参数处理小示例
2009/06/09 Python
Python获取任意xml节点值的方法
2015/05/05 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
学习python可以干什么
2019/02/26 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python图片合成的示例
2020/11/09 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
学生党员思想汇报
2013/12/28 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
借款协议书范本
2014/04/22 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
2014年租房协议书范本
2014/10/30 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
800字作文之大雪
2019/12/04 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript