歡迎討論與交流 : ）
注
代碼參考自——匯智網 RxJS教程
前言
Observable觀察者模式令小白筆者眼前一亮。數據生產者(observable)負責生產新鮮的數據，同時在生產完畢后'通知“消費者”：“hey！哥們，貨已經准備好了，你可以過來拿啦！”
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="ez-led" id="clock">00:00:00</div>
<script type="text/javascript">
var Observabel = function(generator) { // 構造函數 generator 1. 定義數據生產的動作 2. generator內必有'通知'消費者的動作(函數)
this._generator = generator; } Observabel.prototype.subscribe = function(Observer) { // 鏈接生產者與消費者
this._generator.call(this, Observer); } var Observer = function(consumer) { // 數據消費者 定義數據消費的動作
this._consumer = consumer; } Observer.prototype.onNotify = function(data) { // 觸發消費者“消費”這一動作
this._consumer.call(this, data) } window.onload = function() { var elClock = document.getElementById('clock'); var getTime = function() { var _ = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'], //補零
d = new Date(), h = d.getHours(), m = d.getMinutes(), s = d.getSeconds(); return [_[h] || h, _[m] || m, _[s] || s].join(":"); } var uiRefresh = new Observer(function(data) { elClock.textContent = data }) var tickStream = new Observabel(function(observer) { setInterval(function() { // 生產者內調用消費者的“通知”動作
observer.onNotify(getTime()) }, 1000) // 鏈式調用：連接數據生產者與消費者
}).subscribe(uiRefresh); } </script>
</body>
</html>