您的位置：首页 > Web前端 > JavaScript

javascript 设计模式 -- 发布/订阅模式

2017-07-01 13:51 477 查看
直接上代码：

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>


.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航