標籤：
歡迎討論與交流 : ）
注
代碼參考自——匯智網 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>
JS實現Observable觀察者模式
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
