javascript - 数据属性的 jQuery 自定义事件

Question

我正在为我正在开发的应用程序构建自定义小部件系统。我想要发生的是一个小部件能够通过更改数据属性值来更新另一个小部件。在页面加载时，初始数据通过 PHP 加载到此 data-attr 中，并在事后使用 jQuery 切换出数据。

例如，一个小部件的工作方式如下:

• PHP 将 json 数据加载到 DOM 元素中
• jQuery 函数传递元素 ID 并从 data-attr 中检索数据，并使用它生成一个图形，例如
• 基于用户交互，另一个小部件将数据发送到元素的 data-attr，同时还触发自定义 jQuery 事件
• 初始函数获取新数据并更新其图形

我已经开始演示了:

// Ranomize Number & Replace Variable
$(function() {
  $('#random').click(function(e) {
    e.preventDefault();
    num = Math.random() + 100;
    $('#data').attr('data-receiver', num);
  });
});

// Receive Data & Output
$(function() {
  var output = $('#output');
  var received = $('#data').attr('data-receiver');
  output.html(received);

  // Not sure what to do next
});

#content {
  background: #efefef;
  margin: 40px auto;
  display: block;
  padding: 50px;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="data" data-receiver="10"></div>
  <strong>Output:</strong>
  <span id="output"></span>
  <br/>
  <br/>
  <a href="#" id="random">Randomize</a>
</div>

但老实说，我不确定如何开始。我有一些代码将随机值放入接收 DOM 元素中，但不确定如何设置事件或编写另一个函数来接收和更新 #output div。

我很乐意回答问题或编写更多代码以帮助更好地解释我的目标。提前致谢。

Answer 1

尝试利用 .queue() 、 .promise() 来创建一个“订阅者”、“发布者”模式

var output = $("#output");

var process = function process(next) {
    // `this`:`#data`
    var num = Math.random() * 100;
    $(this).data("receiver", num);
    return next()
};

var update = function update() {
  // `this`:`#data`
  $(this).promise("process").then(function(received) {
    // `received`:`#data`,
    // do stuff with `received`
    console.log(received.data("receiver"));
    output.html(received.data("receiver"));
    received.queue("process", process);
    // add `process` to `received` `"process"` queue
    console.log(received, received.queue("process"));
  });
};

// queue first call to `process`
$("#data").queue("process", process);

$("#random").click(function (e) {
    e.preventDefault();        
    update.call($("#data").dequeue("process"));       
});

jsfiddle http://jsfiddle.net/jev4wuej/2/