Heim Web-Frontend js-Tutorial Erlernen Sie JavaScript-Designmuster-Observer-Pattern_Javascript-Fähigkeiten

Erlernen Sie JavaScript-Designmuster-Observer-Pattern_Javascript-Fähigkeiten

May 16, 2016 pm 03:19 PM
javascript 观察者模式 设计模式

1. Definition

Beobachtermuster (Publish-Subscribe-Muster): Es definiert eine Eins-zu-Viele-Abhängigkeitsbeziehung zwischen Objekten. Wenn sich der Status eines Objekts ändert, werden alle davon abhängigen Objekte benachrichtigt.
In JavaScript wird das Ereignismodell im Allgemeinen verwendet, um das traditionelle Beobachtermuster zu ersetzen.
Vorteile:

  • (1) kann in der asynchronen Programmierung häufig verwendet werden und ist eine Alternative zur Übergabe von Rückruffunktionen.
  • (2) kann den fest codierten Benachrichtigungsmechanismus zwischen Objekten ersetzen. Ein Objekt muss nicht mehr explizit eine Schnittstelle eines anderen Objekts aufrufen. Die beiden Objekte lassen sich leicht entkoppeln.

2. DOM-Ereignisse – typisches Beispiel für den Beobachtermodus

Wir müssen die Klickaktion des Benutzers auf document.body überwachen, können jedoch nicht vorhersagen, wann der Benutzer klicken wird.
Daher abonnieren wir das Klickereignis auf document.body. Wenn auf den Body-Knoten geklickt wird, veröffentlicht der Body-Knoten diese Nachricht an die Abonnenten!

document.body.addEventListener("click", function() {
  console.log(1);
}, false);

// 可以多个订阅者
document.body.addEventListener("click", function() {
  console.log(2);
}, false);

doucment.body.click();

Nach dem Login kopieren

Eine bestimmte Website verfügt über Header-, Navigations-, Nachrichtenlisten- und andere Module. Für die Darstellung dieser Module müssen Benutzeranmeldeinformationen eingeholt werden.
(1) Allgemeines Schreiben:

$.ajax({
  url: './login',
  type: 'post',
  contentType: 'application/json',
  dataType:'json',
  success: function(data) {
    if(data.status === "success") {
      // 登录成功,渲染header、nav
      header.setInfo(data.headerInfo);
      nav.setInfo(data.navInfo);
    }
  }
});
Nach dem Login kopieren

(2) Mit dem Beobachtermuster ist die Entkopplung einfach!

$.ajax({
  ...,
  success: function(data) {
    if(data.status === "success") {
      // 登录成功,发布登陆成功消息
      login.trigger("loginsuccess", data);
    }
  }
});

var header = (function() {
  // 监听消息
  login.listen("loginsuccess", function(data){
    header.setInfo(data.headerInfo);
  });
  return {
    setInfo: function(data) {
      console.log("设置header信息");
    }
  };
})();

var nav = (function() {
  login.listen("loginsuccess", function(data){
    nav.setInfo(data.navInfo);
  });
  return {
    setInfo: function(data) {
      console.log("设置nav信息");
    }
  }
})();
Nach dem Login kopieren

3. Universeller Beobachtermodus

/*
 * 示例:
 * Event.create("namespace1").listen('click', function(a){
 *   console.log(a);
 * });
 * Event.create("namespace1").trigger("click", 1);
 */
var Event = (function() {
  var global = this,
    Event,
    _default = 'default';

  Event = function() {
    var _listen,
      _trigger,
      _remove,
      _slice = Array.prototype.slice,
      _shift = Array.prototype.shift,
      _unshift = Array.prototype.unshift,
      namespaceCache = [],
      _create,
      find,
      each = function( ary, fn) {
        var ret;
        for(var i = 0, l = ary.length; i < l; i++) {
          var n = ary[i];
          ret = fn.call(n, i, n);
        }
        return ret;
      };
    // 订阅
    _listen = function(key, fn, cache) {
      if(!cache[key]) {
        cache[key] = [];
      }
      cache[key].push(fn);
    };
    // 移除订阅
    _remove = function(key, cache, fn) {
      if(cache[key]) {
        if(fn) {
          for(var i = cache[key].length; i >=0; i++) {
            if(cache[key][i] === fn) {
              cache[key].splice(i, 1);
            }
          }
        }else {
          cache[key] = [];
        }
      }
    };
    // 发布
    _trigger = function() {
     var cache = _shift.call(arguments),
       key = _shift.call(arguments),
       args = arguments,
       _self = this,
       ret,
       stack = cache[key];
      if(!stack || !stack.length) {
        return;
      }
      return each(stack, function() {
        return this.apply(_self, args);
      });
    };
    // 创建命名空间
    _create = function(namespace) {
      var namespace = namespace || _default;
      var cache = {},
        offlineStack = [], // 离线事件
        ret = {
          listen: function (key, fn, last) {
            _listen(key, fn, cache);
            if (offlineStack == null) {
              return;
            }
            if (last === 'last') {
              offlineStack.length && offlineStack.pop()();
            } else {
              each(offlineStack, function () {
                this();
              });
            }
            offlineStack = null;
          },

          one: function (key, fn, last) {
            _remove(key, cache);
            this.listen(key, fn, last);
          },

          remove: function(key, fn, last) {
            _remove(key, cache, fn);
          },

          trigger: function() {
            var fn,
              args,
              _self = this;
            _unshift.call(arguments, cache);
            args = arguments;
            fn = function() {
              return _trigger.apply(_self, args);
            };
            if(offlineStack) {
              return offlineStack.push(fn);
            }
            return fn;
          }
        };

        return namespace ? (namespaceCache[namespace] ? namespaceCache[namespace] : namespaceCache[namespace] = ret) : ret;
      };

    return {
      create: _create,
      one: function(key, fn, last) {
        var event = this.create();
        event.one(key, fn, last);
      },
      remove: function(key, fn) {
        var event = this.create();
        event.remove(key, fn);
      },
      listen: function(key, fn, last) {
        var event = this.create();
        event.listen(key, fn, last);
      },
      trigger: function() {
        var event = this.create();
        event.trigger.apply(this, arguments);
      }
    };
  }();
  return Event;
})();
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Der Unterschied zwischen Entwurfsmustern und Architekturmustern im Java-Framework Der Unterschied zwischen Entwurfsmustern und Architekturmustern im Java-Framework Jun 02, 2024 pm 12:59 PM

Der Unterschied zwischen Entwurfsmustern und Architekturmustern im Java-Framework

Die wunderbare Verwendung des Adaptermusters in Java-Entwurfsmustern Die wunderbare Verwendung des Adaptermusters in Java-Entwurfsmustern May 09, 2024 pm 12:54 PM

Die wunderbare Verwendung des Adaptermusters in Java-Entwurfsmustern

Analyse des Decorator-Musters in Java-Entwurfsmustern Analyse des Decorator-Musters in Java-Entwurfsmustern May 09, 2024 pm 03:12 PM

Analyse des Decorator-Musters in Java-Entwurfsmustern

Praktische Fallanalyse des PHP-Entwurfsmusters Praktische Fallanalyse des PHP-Entwurfsmusters May 08, 2024 am 08:09 AM

Praktische Fallanalyse des PHP-Entwurfsmusters

Was sind die Vor- und Nachteile der Verwendung von Entwurfsmustern im Java-Framework? Was sind die Vor- und Nachteile der Verwendung von Entwurfsmustern im Java-Framework? Jun 01, 2024 pm 02:13 PM

Was sind die Vor- und Nachteile der Verwendung von Entwurfsmustern im Java-Framework?

Wie Entwurfsmuster mit Herausforderungen bei der Codewartung umgehen Wie Entwurfsmuster mit Herausforderungen bei der Codewartung umgehen May 09, 2024 pm 12:45 PM

Wie Entwurfsmuster mit Herausforderungen bei der Codewartung umgehen

Anwendung von Designmustern im Guice-Framework Anwendung von Designmustern im Guice-Framework Jun 02, 2024 pm 10:49 PM

Anwendung von Designmustern im Guice-Framework

PHP-Entwurfsmuster: Testgetriebene Entwicklung in der Praxis PHP-Entwurfsmuster: Testgetriebene Entwicklung in der Praxis Jun 03, 2024 pm 02:14 PM

PHP-Entwurfsmuster: Testgetriebene Entwicklung in der Praxis

See all articles