JavaScript-观察者模式

观察者模式

发布&订阅
一对多

示例：点好咖啡之后坐等被叫

传统 UML 类图

javascript 中的 UML 类图

应用场景

网页事件绑定

<button id="btn1"></button>
<script>
  $("#btn1").click(function() {
    console.log(1);
  });
  $("#btn1").click(function() {
    console.log(2);
  });
  $("#btn1").click(function() {
    console.log(3);
  });
</script>

promise

function loadImg(src) {
  var promise = new Promise(function(reslove, reject) {
    var img = document.creatElement("img");
    img.onload = function() {
      reslove(img);
    };
    img.src = src;
  });
  return promise;
}

var src = ".....";
var result = loadImg(src);

result
  .then(function(img) {
    console.log("img.width", img.width);
    return img;
  })
  .then(function(img) {
    console.log("img.height", img.height);
  })
  .catch(function(ex) {
    console.log(ex);
  });

jQuery callback

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <p>jQuery callbacks</p>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
      var callbacks = $.Callbacks(); // 注意大小写
      callbacks.add(function(info) {
        console.log("fn1", info);
      });
      callbacks.add(function(info) {
        console.log("fn2", info);
      });
      callbacks.add(function(info) {
        console.log("fn3", info);
      });
      callbacks.fire("gogogo");
      callbacks.fire("fire");
    </script>
  </body>
</html>

nodejs 自定义事件

const EventEmitter = require("events").EventEmitter;

const emitter1 = new EventEmitter();
emitter1.on("some", () => {
  // 监听 some 事件
  console.log("some event is occured 1");
});
emitter1.on("some", () => {
  // 监听 some 事件
  console.log("some event is occured 2");
});
// 触发 some 事件
emitter1.emit("some");

//------------------------------------------------------------

const emitter = new EventEmitter();
emitter.on("sbowName", name => {
  console.log("event occured ", name);
});
emitter.emit("sbowName", "zhangsan"); // emit 时候可以传递参数过去

//------------------------------------------------------------

// 任何构造函数都可以继承 EventEmitter 的方法 on emit
class Dog extends EventEmitter {
  constructor(name) {
    super();
    this.name = name;
  }
}
var simon = new Dog("simon");
simon.on("bark", function() {
  console.log(this.name, " barked");
});
setInterval(() => {
  simon.emit("bark");
}, 500);

nodejs 处理文件

var fs = require("fs");
var readStream = fs.createReadStream("./data/file1.txt"); // 读取文件的 Stream

var length = 0;
readStream.on("data", function(chunk) {
  length += chunk.toString().length;
});
readStream.on("end", function() {
  console.log(length);
});

var readline = require("readline");
var fs = require("fs");

var rl = readline.createInterface({
  input: fs.createReadStream("./data/file1.txt")
});

var lineNum = 0;
rl.on("line", function(line) {
  lineNum++;
});
rl.on("close", function() {
  console.log("lineNum", lineNum);
});

其他应用场景

nodejs 中：处理 http 请求，多进程通讯

var http = require("http");

function serverCallback(req, res) {
  var method = req.method.toLowerCase(); // 获取请求的方法
  if (method === "get") {
  }
  if (method === "post") {
    // 接收 post 请求的内容
    var data = "";
    req.on("data", function(chunk) {
      // “一点一点”接收内容
      console.log("chunk", chunk.toString());
      data += chunk.toString();
    });
    req.on("end", function() {
      // 接收完毕，将内容输出
      console.log("end");
      res.writeHead(200, { "Content-type": "text/html" });
      res.write(data);
      res.end();
    });
  }
}
http.createServer(serverCallback).listen(8081); // 注意端口别和其他 server 的冲突
console.log("监听 8081 端口……");

// parent.js
var cp = require("child_process");
var n = cp.fork("./sub.js");
n.on("message", function() {
  console.log("PARENT got message: " + m);
});
n.send({ hello: "word" });

//sub.js
process.on("message", function() {
  console.log("CHILD got message: " + m);
});
process.send({ foo: "bar" });

vue 和 react 组件生命周期出发

class Login extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(
      this
    );
    this.state = {
      checking: ture
    };
  }
  render() {
    return (
      <div>
        <Header title="开始" history={this.props.history} />
      </div>
    );
  }
  componentDidMount() {
    // 判断是否已经登陆
    this.doCheck();
  }
}

vue watch

var vm = new vue({
  el: "#demo",
  data: {
    firstNameL: "Foo",
    lastName: "bar",
    fullName: "Foo Bar"
  },
  watch: {
    firstName: function(val) {
      this.fullName = val + " " + this.firstName;
    },
    lastName: function(val) {
      this.fullName = this.firstName + " " + val;
    }
  }
});

设计原则验证

  • 主题和观察者分离，不是主动触发而是被动监听，两者解耦
  • 符合开放和封闭原则
赞 (0)

相关推荐