Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung des js-Publisher-Subscriber-Modells geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des js-Publisher-Subscriber-Modells? Schauen Sie mal rein.
Das Herausgeber-Abonnenten-Modell ist ein sehr verbreitetes Modell, wie zum Beispiel:
1. Ein Haus kaufen und verkaufen
Beim Kauf oder Verkauf eines Hauses im Leben bilden Vermittler ein Publish-Subscriber-Modell. Menschen, die ein Haus kaufen, benötigen im Allgemeinen Informationen wie Wohnungsverfügbarkeit, Preis, Nutzfläche usw. Er spielt die Rolle eines Abonnenten
Der Vermittler erhält die Hausinformationen des Verkäufers und benachrichtigt den Käufer auf der Grundlage der ihm vorliegenden Kundenkontaktinformationen (die Mobiltelefonnummer der Person, die das Haus kauft). Er fungiert als Verleger
Wenn der Verkäufer sein Haus verkaufen möchte, muss er dies dem Makler mitteilen und ihm die Informationen zur Freigabe übergeben
2. Benutzer, die Informationen auf der Website abonnieren
Abonnentenrolle: Internetnutzer, die bestimmte Arten von Informationen abonnieren müssen, z. B. Artikel vom Typ Javascript
auf einer Website Herausgeberrolle: Postfachserver, benachrichtigt Benutzer basierend auf den von der Website gesammelten Benutzerabonnementpostfächern Wenn der Websitebesitzer Abonnenten informieren möchte, muss er dem E-Mail-Server den relevanten Inhalt des zu sendenden Artikels mitteilen
Es gibt so viele Beispiele, dass ich sie nicht alle aufzählen werde
Dieser Artikel verwendet das Website-Abonnement, um das Publisher-Subscriber-Framework abzuleiten, und verwendet dann das Publisher-Subscriber-Framework, um einen einfachen Warenkorb zu rekonstruieren
Site.userList wird zum Speichern von Abonnenten verwendet
var Site = {};
Site.userList = [];
Site.subscribe = function( fn ){
this.userList.push( fn );
}
Site.publish = function(){
for( var i = 0, len = this.userList.length; i < len; i++ ){
this.userList[i].apply( this, arguments );
}
}
Site.subscribe( function( type ){
console.log( "网站发布了" + type + "内容" );
});
Site.subscribe( function( type ){
console.log( "网站发布了" + type + "内容" );
});
Site.publish( 'javascript' );
Site.publish( 'html5' );Site.subscribe ist ein bestimmter Abonnent. Die von jedem Abonnenten abonnierten spezifischen Informationen werden in Site.userList
gespeichert Site.publish ist der Herausgeber: Durchlaufen (benachrichtigen) Sie einen nach dem anderen gemäß der gespeicherten Benutzerliste und führen Sie die darin enthaltene Geschäftslogik aus
Bei diesem Veröffentlichungsabonnentenmodell kann jedoch nicht der gewünschte Typ abonniert werden. Im obigen Beispiel habe ich 2 Abonnenten hinzugefügt (Zeile 11, Zeile 14). Einige Benutzer möchten jedoch möglicherweise nur Javascript oder HTML5 erhalten. Daher müssen wir uns als Nächstes weiter verbessern und hoffen, bestimmte Informationen zu erhalten. Wenn es sich nicht um die Art des Abonnements einer Person handelt, erhalten wir diese nicht
Ausgabeergebnis:var Site = {};
Site.userList = {};
Site.subscribe = function (key, fn) {
if (!this.userList[key]) {
this.userList[key] = [];
}
this.userList[key].push(fn);
}
Site.publish = function () {
var key = Array.prototype.shift.apply(arguments),
fns = this.userList[key];
if ( !fns || fns.length === 0) {
console.log( '没有人订阅' + key + "这个分类的文章" );
return false;
}
for (var i = 0, len = fns.length; i < len; i++) {
fns[i].apply(this, arguments);
}
}
Site.subscribe( "javascript", function( title ){
console.log( title );
});
Site.subscribe( "es6", function( title ){
console.log( title );
});
Site.publish( "javascript", "[js高手之路]寄生组合式继承的优势" );
Site.publish( "es6", "[js高手之路]es6系列教程 - var, let, const详解" );
Site.publish( "html5", "html5新的语义化标签" );[Der Weg zum JS-Meister] Vorteile der parasitären kombinatorischen Vererbung
[JS Master’s Road] Tutorials zur es6-Serie – ausführliche Erklärung von var, let, const
Niemand hat Artikel in der Kategorie HTML5
abonniert Wir können sehen, dass nur diejenigen, die den Artikel über den Typ „JavaScript“ abonnieren, den Artikel „Vorteile der parasitären kombinatorischen Vererbung“ erhalten können. Wenn der Typ „HTML5“ veröffentlicht wird, erhält ihn niemand Es6-Typ, nur diejenigen, die es6 abonnieren, können
erhalten Wir verfügen bereits über ein grundlegendes Publisher-Subscriber-Framework. Als Nächstes werden wir es zu einem Framework verbessern, damit andere Funktionen oder dieselben Funktionen anderer Website-Systeme es wiederverwenden können
Dann lasst uns eine Warenkorb-Instanz umgestalten. Vor der Umgestaltung war mein Warenkorb prozessorientiert:var Event = {
userList : {},
subscribe : function (key, fn) {
if (!this.userList[key]) {
this.userList[key] = [];
}
this.userList[key].push(fn);
},
publish : function () {
var key = Array.prototype.shift.apply(arguments),
fns = this.userList[key];
if (!fns || fns.length === 0) {
console.log('没有人订阅' + key + "这个分类的文章");
return false;
}
for (var i = 0, len = fns.length; i < len; i++) {
fns[i].apply(this, arguments);
}
}
};
var extend = function( dstObj, srcObj ){
for( var key in srcObj ){
dstObj[key] = srcObj[key];
}
}
var Site = {};
extend( Site, Event );
Site.subscribe( "javascript", function( title ){
console.log( title );
});
Site.subscribe( "es6", function( title ){
console.log( title );
});
Site.publish( "javascript", "寄生组合式继承的优势" );
Site.publish( "es6", "es6系列教程 - var, let, const详解" );
Site.publish( "html5", "html5新的语义化标签" );<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/cart.js"></script> </head> <body> <p id="box"> <ul> <li> <input type="button" value="-"> <span class="num">0</span> <input type="button" value="+"> <span>单价:</span> <span class="unit">15元;</span> <span class="label">小计:</span> <span class="subtotal">0</span>元 </li> <li> <input type="button" value="-"> <span class="num">0</span> <input type="button" value="+"> <span>单价:</span> <span class="unit">10元;</span> <span class="label">小计:</span> <span class="subtotal">0</span>元 </li> <li> <input type="button" value="-"> <span class="num">0</span> <input type="button" value="+"> <span>单价:</span> <span class="unit">5元;</span> <span class="label">小计:</span> <span class="subtotal">0</span>元 </li> <li> <input type="button" value="-"> <span class="num">0</span> <input type="button" value="+"> <span>单价:</span> <span class="unit">2元;</span> <span class="label">小计:</span> <span class="subtotal">0</span>元 </li> <li> <input type="button" value="-"> <span class="num">0</span> <input type="button" value="+"> <span>单价:</span> <span class="unit">1元;</span> <span class="label">小计:</span> <span class="subtotal">0</span>元 </li> </ul> <p class="total-box"> 商品一共 <span id="goods-num">0</span> 件; 一共花费 <span id="total-price">0</span> 元; 其中最贵的商品单价是<span id="unit-price">0</span>元 </p> </p> </body> </html>
function getByClass(cName, obj) {
var o = null;
if (arguments.length == 2) {
o = obj;
} else {
o = document;
}
var allNode = o.getElementsByTagName("*");
var aNode = [];
for( var i = 0 ; i < allNode.length; i++ ){
if( allNode[i].className == cName ){
aNode.push( allNode[i] );
}
}
return aNode;
}
function getSubTotal( unitPrice, goodsNum ){
return unitPrice * goodsNum;
}
function getSum(){ //计算总花费
var aSubtotal = getByClass("subtotal");
var res = 0;
for( var i = 0; i < aSubtotal.length; i++ ){
res += parseInt(aSubtotal[i].innerHTML);
}
return res;
}
function compareUnit() { //比单价，找出最高的单价
var aNum = getByClass( "num");
var aUnit = getByClass( "unit");
var temp = 0;
for( var i = 0; i < aNum.length; i++ ){
if( parseInt(aNum[i].innerHTML) != 0 ){
if( temp < parseInt(aUnit[i].innerHTML) ) {
temp = parseInt(aUnit[i].innerHTML);
}
}
}
return temp;
}
window.onload = function () {
var aInput = document.getElementsByTagName("input");
var total = 0;
var oGoodsNum = document.getElementById("goods-num");
var oTotalPrice = document.getElementById("total-price");
var oUnitPrice = document.getElementById("unit-price");
for (var i = 0; i < aInput.length; i++) {
if (i % 2 != 0) { //加号
aInput[i].onclick = function () {
//当前加号所在行的数量
var aNum = getByClass( "num", this.parentNode );
var n = parseInt( aNum[0].innerHTML );
n++;
aNum[0].innerHTML = n;
//获取单价
var aUnit = getByClass( "unit", this.parentNode );
var unitPrice = parseInt(aUnit[0].innerHTML);
var subtotal = getSubTotal( unitPrice, n );
var aSubtotal = getByClass( "subtotal", this.parentNode );
aSubtotal[0].innerHTML = subtotal;
total++; //商品总数
oGoodsNum.innerHTML = total;
oTotalPrice.innerHTML = getSum();
oUnitPrice.innerHTML = compareUnit();
}
}else {
aInput[i].onclick = function(){
var aNum = getByClass( "num", this.parentNode );
if ( parseInt( aNum[0].innerHTML ) != 0 ){
var n = parseInt( aNum[0].innerHTML );
n--;
aNum[0].innerHTML = n;
//获取单价
var aUnit = getByClass( "unit", this.parentNode );
var unitPrice = parseInt(aUnit[0].innerHTML);
var subtotal = getSubTotal( unitPrice, n );
var aSubtotal = getByClass( "subtotal", this.parentNode );
aSubtotal[0].innerHTML = subtotal;
total--; //商品总数
oGoodsNum.innerHTML = total;
oTotalPrice.innerHTML = getSum();
oUnitPrice.innerHTML = compareUnit();
}
}
}
}
}window.onload = function () {
var Event = {
userList: {},
subscribe: function (key, fn) {
if (!this.userList[key]) {
this.userList[key] = [];
}
this.userList[key].push(fn);
},
publish: function () {
var key = Array.prototype.shift.apply(arguments),
fns = this.userList[key];
if (!fns || fns.length === 0) {
return false;
}
for (var i = 0, len = fns.length; i < len; i++) {
fns[i].apply(this, arguments);
}
}
};
(function(){
var aBtnMinus = document.querySelectorAll( "#box li>input:first-child"),
aBtnPlus = document.querySelectorAll( "#box li>input:nth-of-type(2)"),
curNum = 0, curUnitPrice = 0;
for( var i = 0, len = aBtnMinus.length; i < len; i++ ){
aBtnMinus[i].index = aBtnPlus[i].index = i;
aBtnMinus[i].onclick = function(){
(this.parentNode.children[1].innerHTML > 0) && Event.publish( "total-goods-num-minus" );
--this.parentNode.children[1].innerHTML < 0 && (this.parentNode.children[1].innerHTML = 0);
curUnitPrice = this.parentNode.children[4].innerHTML;
Event.publish( "minus-num" + this.index,
parseInt( curUnitPrice ),
parseInt( this.parentNode.children[1].innerHTML )
);
};
aBtnPlus[i].onclick = function(){
(this.parentNode.children[1].innerHTML >= 0) && Event.publish( "total-goods-num-plus" );
this.parentNode.children[1].innerHTML++;
curUnitPrice = this.parentNode.children[4].innerHTML;
Event.publish( "plus-num" + this.index,
parseInt( curUnitPrice ),
parseInt( this.parentNode.children[1].innerHTML )
);
}
}
})();
(function(){
var aSubtotal = document.querySelectorAll("#box .subtotal"),
oGoodsNum = document.querySelector("#goods-num"),
oTotalPrice = document.querySelector("#total-price");
Event.subscribe( 'total-goods-num-plus', function(){
++oGoodsNum.innerHTML;
});
Event.subscribe( 'total-goods-num-minus', function(){
--oGoodsNum.innerHTML;
});
for( let i = 0, len = aSubtotal.length; i < len; i++ ){
Event.subscribe( 'minus-num' + i, function( unitPrice, num ){
aSubtotal[i].innerHTML = unitPrice * num;
});
Event.subscribe( 'plus-num' + i, function( unitPrice, num ){
aSubtotal[i].innerHTML = unitPrice * num;
});
}
})();
console.log( Event.userList );
}Betrieb des Node.js-Dateisystems
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des js-Publisher-Subscriber-Musters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
