JS實現Observable觀察者模式


歡迎討論與交流 : )

  

    代碼參考自——匯智網 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>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM