Belajar corak reka bentuk JavaScript Kemahiran pattern_javascript pemerhati

1. Definisi

Corak pemerhati (corak terbitkan-langgan): Ia mentakrifkan hubungan pergantungan satu-ke-banyak antara objek Apabila keadaan objek berubah, semua objek yang bergantung padanya akan dimaklumkan.
Dalam JavaScript, model acara biasanya digunakan untuk menggantikan corak pemerhati tradisional.
Faedah:

• (1) boleh digunakan secara meluas dalam pengaturcaraan tak segerak dan merupakan alternatif kepada menghantar fungsi panggil balik.
• (2) boleh menggantikan mekanisme pemberitahuan berkod keras antara objek Satu objek tidak lagi perlu memanggil antara muka objek lain secara eksplisit. Kedua-dua objek mudah dipisahkan.

2. Peristiwa DOM – contoh tipikal mod pemerhati

Kami perlu memantau tindakan klik pengguna pada document.body, tetapi kami tidak mempunyai cara untuk meramalkan bila pengguna akan mengklik.
Oleh itu, kami melanggan acara klik pada document.body Apabila nod badan diklik, nod badan menerbitkan mesej ini kepada pelanggan.

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

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

doucment.body.click();

Tapak web tertentu mempunyai pengepala, navigasi navigasi, senarai mesej dan modul lain. Penyampaian modul ini memerlukan mendapatkan maklumat log masuk pengguna.
(1) Penulisan umum:

$.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);
    }
  }
});

(2) Menggunakan corak pemerhati, ia mudah untuk dipisahkan!

$.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信息");
    }
  }
})();

3. Mod Pemerhati Sejagat

/*
 * 示例：
 * 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 &#63; (namespaceCache[namespace] &#63; 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;
})();

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.