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

使用AmplifyJS组件配合JavaScript进行编程的指南 这篇文章主要介绍了使用AmplifyJS组件配合JavaScript进行编程的指南,AmplifyJS中提供的订阅功能十分强大,需要的朋友可以参考下 事件分发的作用 在为页面添加各类交互功能时，我们熟知的最简单的做法就是为页面元素绑定事件，然后在事件处理函数中，做我们想要做的动作。就像这样的代码： ? 1 2 3 element.onclick = function(event){ // Do anything. }; 如果我们要做的动作不复杂，那么实际逻辑功能的代码，放在这里是可以的。如果今后需要修改，再到这段事件处理函数的位置来修改。 再进一步，为了做适当的代码复用，我们可能会把逻辑功能中的一部分分拆到一个函数内： ? 1 2 3 4 element.onclick = function(event){ // Other code here. doSomethingElse(); }; 这里的函数doSomethingElse对应的功能可能会在其他地方用到，所以会这样做分拆。此外，可能会有设定坐标这样的功能（假定函数名为setPosition），则还需要用到浏览器事件对象event提供的诸如指针位置一类的信息： ? 1 2 3 4 5 element.onclick = function(event){ // Other code here. doSomethingElse(); setPosition(event.clientX, event.clientY); }; 此处有一个不推荐的做法是直接把event对象传递给setPosition。这是因为，分清逻辑功能和事件侦听两种职责，是一种良好的实践。只让事件处理函数本身接触到浏览器事件对象event，有利于降低代码耦合，方便独立测试及维护。 那么，功能越来越多，越来越复杂了会怎么样呢？如果沿用之前的做法，可能是这个样子： ? 1 2 3 4 5 6 7 element.onclick = function(event){ doMission1(); doMission2(event.clientX, event.clientY); doMission3(); // ... doMissionXX(); }; 虽然这样用也没问题，但这种时候其实就可以考虑更优雅的写法： ? 1 2 3 4 5 6 element.onclick = function(event){ amplify.publish( aya:clicked, { x: event.clientX, y: event.clientY }); }; 这种形式就是事件分发，请注意，这里的事件并不是指浏览器原生的事件（event对象），而是逻辑层面的自定义事件。上面的aya:clicked就是一个随便写（really?）的自定义事件名称。 显然到这还没结束，为了完成之前的复杂的功能，我们还需要将自定义事件和要做的事关联在一起： ? 1 2 3 4 amplify.subscribe( aya:clicked, doMission1); // ... amplify.subscribe( aya:clicked, doMission2); // ... 看起来又绕了回来？没错，但这是有用的。一方面，浏览器原生事件的侦听被分离并固化了下来，以后如果逻辑功能有变化，例如减少几个功能，则只需要到自定义事件的关联代码部分做删减，而不需要再关心原生事件。另一方面，逻辑功能的调整变得更为灵活，可以在任意的代码位置通过subscribe添加功能，而且可以自行做分类管理（自定义的事件名）。 简单来说，事件分发通过增加一层自定义事件的冗余（在只有简单的逻辑功能时，你就会觉得它是冗余），降低了代码模块之间的耦合度，使得逻辑功能更为清晰有条理，便于后续维护。 等下，前面那个出境了好几次的很有存在感的amplify是干什么的？ Nice，终于是时候介绍这个了。 AmplifyJS 事件分发是需要一定的方法来实现的。实现事件分发的设计模式之一，就是发布/订阅(Publish/Subscribe)。 AmplifyJS是一个简单的JavaScript库，主要提供了Ajax请求、数据存储、发布/订阅三项功能（每一项都可独立使用）。其中，发布/订阅是核心功能，对应命名是amplify.core。 amplify.core是发布/订阅设计模式的一个简洁的、清晰的实现，加上注释一共100多行。读完amplify的源码，就可以比较好地理解如何去实现一个发布/订阅的设计模式。 代码全貌 amplify.core的源码整体结构如下： (function( global, undefine