Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use Javascript to achieve the Observer pattern", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to implement the Observer Mode with Javascript".

What is the observer mode?

Observer pattern is a design pattern.

The observer pattern defines an one-to-many dependency between objects. When the state of an object changes, all objects that depend on it are notified and updated automatically.

To put it simply, in the observer mode, there are two models, an observer (observer) and an observed (Observed). When the observed person changes or changes, the observer is notified.

Scene simulation

If Singles Day is coming, the person who wants to buy goods in Singles Day holiday is the Observer.

The item you want to buy is the Observed.

In order to get a better image, add a merchant to change the price of the product, that is, the publisher (Publish)

On the day of Singles Day, the merchant (Publish) will modify the price of the item (Observed), and then those who follow the subscription (Observer) will receive a message notification.

Code implementation / / Observer design pattern / / publisher-- > merchant var shopObj = {}; / / goods list [key: []], key is the product name shopObj.list = []; / / subscription method shopObj.listen = function (key, fn) {/ / key is the product model, and the function fn is the subscription behavior if (! this.list [key]) {this.list [key] = [] } this.list [key] .push (fn); / / add subscription} / / publish message method shopObj.publish = function (key) {/ / var key = arguments [0] to the list of goods named key; / / if you don't pass the parameter key, you can also var fns = this.list [key]; / / for (var I = 0; I)

< fns.length; i++) { for(var i = 0 ,fn; fn = fns[i++];){ //执行订阅的函数fn arguemnts储存的所有实参 // var fn = fns[i++]; fn.apply(this, arguments) }}//A用户添加订阅shopObj.listen("华为", function (brand, model) { console.log( "A用户收到：" + brand + model + "手机降价了");})//B用户添加订阅shopObj.listen("华为", function (brand, model) { console.log("B用户收到：" + brand + model + "手机降价了");})//c用户添加订阅shopObj.listen("小米", function (brand, model) { console.log("C用户收到：" + brand + model + "手机降价了");})//双11 商家发布消息华为降价的信息shopObj.publish("华为", "p30");shopObj.publish("小米", "Mix4"); 重构代码//观察者设计模式var Eevent = { //商品列表 [key:[]], key为商品名 list: [], //订阅方法 listen: function (key, fn) {// key是商品型号, fn这个函数就是订阅的行为 if (!this.list[key]) { this.list[key] = []; } this.list[key].push(fn); }, //发布消息方法 publish: function (key) { //var key = arguments[0];//如果不传参数key，这样也可以 var fns = this.list[key]; // for (var i = 0; i < fns.length; i++) { for (var i = 0, fn; fn = fns[i++];) { //执行订阅的函数fn arguemnts储存的所有实参 // var fn = fns[i++]; fn.apply(this, arguments) } }}//观察者对象初始化var initEvent = function (obj) { for (var i in Eevent) { obj[i] = Eevent[i]; }}//发布者 -->

Merchant var shopObj = {}; initEvent (shopObj); / A users add subscription shopObj.listen ("Huawei", function (brand, model) {console.log ("A user received:" + brand + model + "phone price reduced") / / B user add subscription shopObj.listen ("Huawei", function (brand, model) {console.log ("B user received:" + brand + model + "phone price reduced")) }) / / c users add subscriptions to shopObj.listen ("Xiaomi", function (brand, model) {console.log ("C users receive:" + brand + model + "phone price reduction");}) / / A pair of 11 merchants post information about Huawei price reduction shopObj.publish ("Huawei", "P30"); shopObj.publish ("Xiaomi", "Mix4")

At this point, I believe you have a deeper understanding of "how to use Javascript to implement the observer mode". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.