{"id":156,"date":"2019-03-16T22:07:21","date_gmt":"2019-03-16T14:07:21","guid":{"rendered":"https:\/\/blog.indeex.club\/?p=156"},"modified":"2020-06-20T23:15:35","modified_gmt":"2020-06-20T15:15:35","slug":"%e8%a7%82%e5%af%9f%e8%80%85%e6%a8%a1%e5%bc%8f","status":"publish","type":"post","link":"https:\/\/blog.indeex.club\/index.php\/2019\/03\/16\/%e8%a7%82%e5%af%9f%e8%80%85%e6%a8%a1%e5%bc%8f\/","title":{"rendered":"\u89c2\u5bdf\u8005\u6a21\u5f0f"},"content":{"rendered":"<p><img src=\"https:\/\/hungking.cc\/assets\/imgs\/indeex.cc\/observer_pattern.png\" alt=\"\u89c2\u5bdf\u8005\u6a21\u5f0f\" \/><\/p>\n<p>\u76ee\u524d\u6709\u5f88\u591a\u6d41\u884c\u7684\u6280\u672f\u7528\u5230\u4e86\u8fd9\u4e2a\u601d\u60f3\uff0c\u6bd4\u5982Redux\u3001mobx\u7b49\uff0c\u8fd9\u91cc\u5c06\u591a\u5e74\u524d\u7684ECMAScript\u4ee3\u7801\u6539\u5199\u6210\u73b0\u4ee3\u7684ECMAScript\u4ee3\u7801\u3002\u8fd9\u91cc\u53ea\u505a\u7b80\u5355\u6f14\u793a\uff0c\u8bf7\u52ff\u76f4\u63a5\u7528\u4e8e\u751f\u4ea7\u3002<\/p>\n<p>\u9996\u5148\u662f\u6d3e\u53d1\u8005\uff0c\u6d3e\u53d1\u8005\u9700\u8981\u6dfb\u52a0\u4fa6\u542c\u3001\u79fb\u51fa\u4fa6\u542c\u548c\u6d3e\u53d1\u4e8b\u4ef6:<\/p>\n<pre><code class=\"language-javascript line-numbers\">class Sender {\n\n    private receiver: any[] = [];\/\/\u63a5\u6536\u8005\u5bf9\u8c61\u5217\u8868\n\n    private eventMsg!: string;\/\/\u53d1\u9001\u7684\u4e8b\u4ef6\u4fe1\u606f\n\n    public constructor() {\n    }\n\n    public addEventListener(o: Receiver): void {\n\n        this.receiver.push(o);\/\/\u589e\u52a0\u63a5\u6536\u8005\n\n    }\n\n    public removeEventListener(o: Receiver): void {\n\n        var k: number;\n\n        for (var i in this.receiver) {\n\n            if (this.receiver[i] == o) {\n\n                \/\/\u904d\u5386\u63a5\u6536\u8005\u6570\u7ec4,\u627e\u5230\u4e0e\u4f20\u5165\u7684\u53c2\u6570\u76f8\u540c\u7684\u63a5\u6536\u8005\u5e76\u628a\u5176\u5728\u6570\u7ec4\u4e2d\u7684\u7d22\u5f15\u8d4b\u7ed9k\n\n                k = i;\n\n                break;\n\n            }\n\n        }\n\n        this.receiver.splice(k, 1);\/\/\u4ece\u6570\u7ec4\u4e2d\u5220\u9664\u8fd9\u4e2a\u63a5\u6536\u8005\n\n    }\n\n    public dispatchEvent(s: string): void {\n\n        this.eventMsg = s;\/\/\u4e8b\u4ef6\u4fe1\u606f\u4f20\u9012\n\n        this.notify();\/\/\u901a\u77e5\u65b9\u6cd5\n\n    }\n\n    private notify(): void {\n\n        var l: number = this.receiver.length;\/\/\u63a5\u6536\u8005\u6570\u7ec4\u957f\u5ea6\n\n        for (var i: number = 0; i &lt; l; i++) {\n\n            this.receiver[i].update(this.eventMsg);\/\/\u63a5\u6536\u8005\u7684\u66f4\u65b0\u65b9\u6cd5\n\n        }\n\n    }\n\n}\n<\/code><\/pre>\n<p>\u63a5\u7740\uff0c\u521b\u5efa\u4e00\u4e2a\u63a5\u6536\u8005\uff0c\u63a5\u6536\u8005\u9700\u8981\u6709\u4e00\u4e2a\u521d\u59cb\u7684\u540d\u79f0\uff1a<\/p>\n<pre><code class=\"language-javascript line-numbers\">class Receiver {\n\n    public name!: string;\n\n    public Receiver(name: string) {\n\n        this.name = name;\n\n    }\n\n    public tostring(): string {\n\n        return this.name;\/\/\u8fd4\u56de\u63a5\u6536\u8005\u540d\u5b57\n\n    }\n\n    public update(s: string): void {\n\n        trace(name + \"\u6536\u5230\" + s);\n\n    }\n\n}\n\n\nfunction trace(msg: any): void {\n\n    console.log(msg);\n\n}\n<\/code><\/pre>\n<p>\u5c06\u53d1\u9001\u8005\u548c\u63a5\u6536\u8005\u653e\u5728\u5168\u5c40\u91cc\u5373\u53ef\uff0c\u7136\u540e\u5c31\u53ef\u4ee5\u4f7f\u7528\u4e86\uff1a<\/p>\n<pre><code class=\"language-javascript line-numbers\">var sender: Sender = new Sender();\/\/\u521b\u5efa\u53d1\u9001\u8005\n\nvar receiver1: Receiver = new Receiver(\"A\");\n\nvar receiver2: Receiver = new Receiver(\"B\");\/\/\u521b\u5efa\u4e24\u4e2a\u63a5\u6536\u8005\n\nsender.addEventListener(receiver1);\n\nsender.addEventListener(receiver2);\/\/\u4e3a\u53d1\u9001\u8005\u6ce8\u518c\u4e24\u4e2a\u63a5\u6536\u8005\n\nsender.dispatchEvent(\"\u6d88\u606f\");\/\/\u53d1\u9001\u6d88\u606f\n\nsender.removeEventListener(receiver1);\/\/\u79fb\u9664\u7b2c\u4e00\u4e2a\u63a5\u6536\u8005\n\nsender.dispatchEvent(\"\u90ae\u4ef6\");\/\/\u53d1\u9001\"\u90ae\u4ef6\"\n<\/code><\/pre>\n<p>\u5982\u679c\u9700\u8981\u5728\u63a5\u53d7\u540e\u5904\u7406\uff0c\u53ef\u4ee5\u5728\u63a5\u53d7\u540e\u51fa\u53d1\u4e00\u4e2a\u56de\u8c03\u51fd\u6570\u6216\u8005Promise\uff1a<\/p>\n<pre><code class=\"language-javascript line-numbers\">public addEventListener(o: Receiver, callback: Function): void {\n\n    this.receiver.push(o);\/\/\u589e\u52a0\u63a5\u6536\u8005\n\n    callback(o);\n}\n\n\/\/\u6216\u8005\n\npublic addEventListener(o: Receiver): Promise {\n\n    this.receiver.push(o);\n\n    return new Promise((resolve, reject) =&gt; {\n        resolve(o);\n    });\n\n}\n<\/code><\/pre>\n<p>\u5f53\u7136\u4e5f\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528Async\uff0c\u8fd9\u91cc\u4e0d\u518d\u6f14\u793a\u3002<\/p>\n\n<p>have enjoy! &#x1f9d0;&#x1f9d0;&#x1f9d0;<\/p>\n<p>\u4f5c\u8005\uff1aindeex<\/p>\n<p>\u94fe\u63a5\uff1a<a class=\"wp-editor-md-post-content-link\" href=\"https:\/\/indeex.cc\/\">https:\/\/indeex.cc<\/a><\/p>\n<p>\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p>\n<hr \/>\n","protected":false},"excerpt":{"rendered":"<p>\u76ee\u524d\u6709\u5f88\u591a\u6d41\u884c\u7684\u6280\u672f\u7528\u5230\u4e86\u8fd9\u4e2a\u601d\u60f3\uff0c\u6bd4\u5982Redux\u3001mobx\u7b49\uff0c\u8fd9\u91cc\u5c06\u591a\u5e74\u524d\u7684ECMAScript\u4ee3<a href=\"https:\/\/blog.indeex.club\/index.php\/2019\/03\/16\/%e8%a7%82%e5%af%9f%e8%80%85%e6%a8%a1%e5%bc%8f\/\" class=\"read-more\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[4],"_links":{"self":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/156"}],"collection":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":1,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/posts\/156\/revisions\/159"}],"wp:attachment":[{"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.indeex.club\/index.php\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}