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

时间: 作者:完队

  

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

  

事件分发的作用  

  

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

  
  
  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。

  
  

  

2015728151503102.jpg (342×85)  

  

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

  
  代码全貌  

  

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

  
  
  (function( global, undefined ) {  var slice = [].slice,  subscriptions = {};  var amplify = global.amplify = {  publish: function( topic ) {  // ...
                    
(责任编辑:admin)
				

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台