关键词：
直接上代码：
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设计模式</title>
</head>
<body>
<div id="box">
<div>{{message}}</div>
</div>
<!--
// 全局：
// 低耦合,高内聚
// 继承：JS并没有继承这个概念(伪继承),ajax没有跨域这个概念一样
// 类式继承、原型式继承
// 代码重用高：方法解耦合高(独立性)、方法尽量独立和组合都能够使用
-->
<script src="vue.js"></script>
<script>
/*// 类式继承
var father = function() { // 爸爸干爸爸的活
this.age = 50;
this.say = function(){
console.log(11);
}
}
var child = function(){ // 儿子干儿子的活
this.name = "think";
father.call(this); // call apply
}
var man = new child();
man.say();*/
// 原型式继承
var father = function(){
//
}
father.prototype.a = function(){
console.log(2);
}
var child = function(){
//
}
// 子继承父属性
child.prototype = new father();
var man = new child();
man.a();
// jquery中所有方法都是可以连缀的 $(".box").html().css({"background":"yellow"})
// new对象不能直接使用 局部对象所有对象外部都无法访问 window.jQuery = window.$ = jQuery
// 调用之后才 new
new Vue({ //
el:"#box", // 元素
data:{
message:"hello",
arr:[1,2,3],
num:0
},
created: function(){ // vue构造函数
var _this = this;
setInterval(function(){ // 不屑分析
_this.arr.push("DN"+(_this.num+1));
// 操作内部数据时,不会整个渲染更新(DIFF算法：区分我们哪个地方有区别)
_this.num += 1; // 动态数据追踪,订阅者模式
// 值：更新的时候,元素是存在的,无需创建元素(document.createElement)
// 数组增加：更新的时候,元素不存在,需要创建(document)
},5000);
}
})
//订阅者模式
// 每次都会输出所有的信息
/*var shoeObj = {};
shoeObj.list = []; // 存放订阅者
shoeObj.listen = function(fn){ // 订阅一次,增加数据一次
shoeObj.list.push(fn); //订阅消息添加到缓存列表
}
// 效果性的开发,只是基础
shoeObj.trigger = function(){ // 发布消息
for(var i=0,fn;fn = this.list[i++];){
fn.apply(this,arguments); // arguments
}
}
// 订阅
shoeObj.listen(function(color,size){
console.log(color);
console.log(size);
});
shoeObj.listen(function(color,size){
console.log("2" + color);
console.log("2" + size);
});
shoeObj.trigger("红色",20);
shoeObj.trigger("黄色",20);*/
// 修改后
/*var shoeObj = {};
shoeObj.list = []; // 存放订阅者
shoeObj.listen = function(key,fn){ // 订阅增加一个名字,方便区分订阅者信息
if(!this.list[key]){
shoeObj.list[key] = []; //订阅消息添加到缓存列表
}
this.list[key].push(fn);
}
// 效果性的开发,只是基础
shoeObj.trigger = function(){ //根据订阅者名字发布消息
var key = Array.prototype.shift.call(arguments); //
// arguments: 参数,取出消息类型的名称
var fns = this.list[key];
// 如果没有订阅过该消息,则返回
if(!fns || fns.length === 0){
return;
}
for(var i=0,fn;fn = fns[i++];){
fn.apply(this,arguments);
}
}
// 订阅
shoeObj.listen("red",function(size){
console.log(size);
});
shoeObj.listen("yellow",function(size){ // yellow改为动态参数,vuejs的动态更新出来一半
console.log("2" + size);
});
shoeObj.trigger("red",40);
shoeObj.trigger("yellow",40);*/
// 封装
var event = {
list:[], // 订阅的人数是不固定的
listen:function(key,fn){
if(!this.list[key]){
this.list[key] = [];// 清空
}
}
}
var shoeObj = {};
shoeObj.list = []; // 存放订阅者
shoeObj.listen = function(key,fn){ // 订阅增加一个名字,方便区分订阅者信息
if(!this.list[key]){
shoeObj.list[key] = []; //订阅消息添加到缓存列表
}
this.list[key].push(fn);
}
// 效果性的开发,只是基础
shoeObj.trigger = function(){ //根据订阅者名字发布消息
var key = Array.prototype.shift.call(arguments); //
// arguments: 参数,取出消息类型的名称
var fns = this.list[key];
// 如果没有订阅过该消息,则返回
if(!fns || fns.length === 0){
return;
}
for(var i=0,fn;fn = fns[i++];){
fn.apply(this,arguments);
}
}
// 订阅
shoeObj.listen("red",function(size){
console.log(size);
});
shoeObj.listen("yellow",function(size){ // yellow改为动态参数,vuejs的动态更新出来一半
console.log("2" + size);
});
shoeObj.trigger("red",40);
shoeObj.trigger("yellow",40);
var initEvent = function(){ // 让所有普通对象都具有发布订阅功能
for(var i in event){ // 对象可以是多个
obj[i] = event[i];
}
}
var shoeObj = {};
initEvent(shoeObj);
shoeObj.listen("red",function(size){
console.log(size);
})
shoeObj.trigger("red",40);
// 取消订阅
event.remove = function(key,fn){
var fns = this.list[key];
if(!fns){
return false;
}
if(!fn){
fn && (fns.length = 0);
}else{
for(var i = fns.length-1;i>=0;i--){
//
}
}
}
// RN
</script>
</body>
</html>
.
javascript发布订阅模式(代码片段)
javascript设计模式-订阅发布模式(观察者模式)
varEvent=(function(){varglobal=this,Event,_default=‘default‘;Event=function(){var_create,_listen,_trigger,_remove,_shift=Array.prototype.shift,_unshift=Array.prototype.unshift,namespaceCache={},each=f 查看详情
javascript发布订阅pubsub模式
首先使用数组缓存订阅者订阅的消息，当订阅者订阅消息的时候，把订阅的消息push到指定消息的队列中，当发布者发布消息的时候，我们遍历执行push到指定消息队列中的回调事件。varPubsub=(function(){vareventObj={};return{subscribe:functio... 查看详情
观察者模式——javascript
观察者模式又被称为发布-订阅模型或消息机制。基本思想是观察者一个静态（或全局）对象，为大家提供三个方法：发布、订阅、取消订阅。想得到消息的订阅者需要通过订阅某些消息，当发布者发布某些消息的时候对应的订... 查看详情
发布-订阅模式
...象的状态发生改变，所有依赖他的对象都将得到通知。在javascript开发中，我们一般用事件模型来替代传统的发布-订阅模式。2.Dom事件实际上，只要我们曾经在dom节点上绑定过事件函数，那么我们就曾经使用过发布-订阅模式。docu... 查看详情
发布-订阅模式
...的状态发生改变时,所有依赖于它的对象都将得到通知。JavaScript开发中我们一般用事件模型来代替传统的发布-订阅模式现实中的发布-订阅模式 小明最近喜欢上吃老北京烧饼,可是到了卖烧饼的地方 查看详情
发布-订阅模式
...需要把订阅者对象自身当成引用传入发布者对象中，而在JavaScript中，使用回调函数的形式来代替订阅者。nodejs中的on 查看详情
javascript发布订阅者模式和观察者模式及区别(代码片段)
一、发布订阅模式发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。多方订阅，一方发布，订阅放会收到通知举例：教学楼中... 查看详情
javascript发布订阅者模式和观察者模式及区别(代码片段)
一、发布订阅模式发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。多方订阅，一方发布，订阅放会收到通知举例：教学楼中... 查看详情
发布-订阅者模式(观察者模式)(代码片段)
发布订阅者模式还有一些好的列子应用可以看看javascript设计模式与开发实践这本书！！！！！一、发布订阅模式是什么发布订阅者模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，... 查看详情
javascript设计模式——观察者模式
观察者模式，又称发布-订阅模式或消息机制，定义了一种依赖关系，解决了主题对象与观察者之间功能的耦合。通过运用观察者模式，可以解决团队开发中的模块间通讯问题，这是模块间解耦的一种可行方案。首先，我们来把... 查看详情
javascript设计模式与开发实践–观察者模式
概述观察者模式又叫发布–订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个目标对象（为了方便理解，以下将观察者对象叫做订阅者，将目标对象叫做发布者）。发布者的状态发生... 查看详情
javascript原生实现观察者模式
观察者模式又叫做发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成，主题和观察者，主题负责发布事件，... 查看详情
为啥要使用发布/订阅模式（在 JS/jQuery 中）？
...我很难理解为什么人们会使用这种模式而不是“正常”\'JavaScript/j 查看详情
javascript观察者模式
...状态发生该变时，所有依赖于它的对象都将得到通知。在JavaScript中，一般用事件模型来替代传统的观察者模式。 下面是售楼处(发布者)与各看房者(订阅者)的例子： varevent={ 查看详情
javascript手撕前端面试题：寄生组合式继承|发布订阅模式|观察者模式(代码片段)
🧑💼个人简介：大三学生，一个不甘平庸的平凡人🍬🖥️NodeJS专栏：Node.js从入门到精通🖥️博主的前端之路（源创征文一等奖作品）：前端之行，任重道远（来自大三学长... 查看详情
javascript设计模式观察者模式
观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。举个例子，... 查看详情
eventbus发布-订阅模式(使用代码实现发布-订阅模式)(代码片段)
文章目录一、发布-订阅模式二、代码实现发布-订阅模式1、订阅者接口2、订阅者实现类3、发布者4、调度中心5、客户端一、发布-订阅模式发布订阅模式:发布者Publisher:状态改变时,向消息中心发送事件;订阅者Subscriber:到消息中心... 查看详情