Bevor ich den Haupttext einführe, werde ich Ihnen etwas Wissen hinzufügen:
JS -kartesischer Produktalgorithmus
Generieren Sie das kartesische Produkt aus dem angegebenen Objekt oder Array
//Cartesian product combination function descartes(list){//parent previous index;count pointer count var point = {};var result = [];var pIndex = null;var tempCount = 0;var temp = [];//Generate pointer objects based on parameter columns for(var index in list){if(typeof list[index] == 'object'){point[index] = {'übergeordnet': pindex, 'count': 0} pindex = index;}} // Einzeldimensionsdatenstruktur gibt direkt zurück. point [index] ['count']; temp.push (list [index] [tempCount]);} // Drücken Sie in das Ergebnis -Array -Ergebnis. point [index] ['übergeordnet']; if (pindex == null) {return Ergebnis;} // übergeordnetes überprüft, um erneut index = pindex;} else {point [index] ['count'] ++; break;}}}}}}}Okay, der Algorithmus der jS -kartesischen Generation besteht darin, nur den Grund für den folgenden Text zu legen. Ich werde nicht viel sagen, also werde ich wieder auf den Punkt kommen.
1. Anforderungen Beschreibung
Die Produktveröffentlichungsfunktion von E-Commerce-Websites, ähnlich der Produktdetail-Seite von JD.com, wie in der folgenden Abbildung gezeigt, wie wird eine solche ausgewählbare Funktion im Hintergrund generiert? Tatsächlich ist das iPhone 6, das Sie sehen, nicht nur ein Produkt, wenn es veröffentlicht wird, sondern viele, da der Preis jedes ausgewählten iPhone 6 unterschiedlich ist. Bei der Veröffentlichung des Produkts werden diese optionalen Elemente aus einer Reihe von Attributen und Attributwerten ausgewählt. Das Problem ist, dass die Anzahl der während der Veröffentlichung ausgewählten Attribute unterschiedlich ist und auch die Attributwerte unterschiedlich sind. Dann wird die Anzahl der generierten Produkte basierend auf Attributen und Attributwerten kombiniert.
2. Laden Sie den Code direkt hoch hoch
<Script>/*** Produktattributtyp*Die Anzahl der Attribute ist ungewiss*/var spec = Funktion (SpecName, SpecItems) {this.specname = specName; //Attribute name this.specItems = specItems;//Numerical value is an array, the number of arrays is uncertain}var result = [];//Combined into product set/*** Publish an attribute selected for a product, which is a specification array, and the number of arrays is uncertain* Combined into different products based on this selected attribute*/var selectSpec = [{specName:'capacity',specItems:['16G','64G','128G']},{specName:'Color',specItems:['Top Gold','Silver','Black','pink']},{specName:'Network',specItems:['United Kingdom','Mobile','Telecom']}];function combine(index, current){if (Index <selectSpec.Length - 1) {var specitem = selectSpec [index]; var keya = SpecItem.SpecName; var items = Specitem.Specitems; if (items.länge == 0) {run (index+1, aktuell);} für (var i = 0; i <is.Length; i ++) {if (! it items [items [items [is}); $ .extend (newmap, current); newmap [keya] = items [i]; run (index + 1, newmap);}} else if (index == selectSpec.Length - 1) {var specitem = selectSpec [index]; var keya = Specitem.specname; var items = Specitem.specitem; (var i = 0; i < items.length; i++){if(!items[i])continue;var newMap = {};newMap = $.extend(newMap,current);newMap[keya] = items[i];result.push(newMap);}}}combine(0, {});console.info(result);/**Combined into product set* [Object { Capacity="16G", Color="Tulujin", Network="Universal"}, * Object { Capacity="16G", color="大天天天", * Object { Capacity="16G", color="大天天天天天天", * Object { Capacity="16G", color="大天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天� Object { Capacity="16G", Color="black", Network="Telecom"}, * Object { Capacity="16G", Color="pink", Network="Unicom"}, * Object { Capacity="16G", Color="pink", Network="Mobile"}, * Object { Capacity="16G", Color="pink", Network="Telecom"}, * Object { Capacity="64G", Color="Telecom"}, * Object { Capacity="64G", Color="Telecom"}, * Object { CAPAPITE = "64G", COLOR = "Treasury Gold", network = "Telecom"}, * Objekt {CAPAPY = "64G", color = "Silver", network = "unicom"}, * Objekt {CAPAPY = "64G", Color = "Silver", Network = "Mobile"}, * Objekt {Objekt {CAPAPITY = "64GE", COLOR ", COLOL", Network ", Network", Network ", Network", Network ", Network", Network ", Network", Network. CAPAPITE = "64G", COLOR = "Black", Network = "Unicom"}, * Objekt {CAPAPY = "64G", COLOR = "Black", Network = "Mobile"}, * Objekt {CAPAPY = "64G", color = "schwarz", network = "telecom"}, * Objekt {CAPAPITY = "64G", COLBE ", COLBE", COLBE ", Network", Network ". color="pink", network="Unicom"}, * Object { Capacity="64G", color="pink", network="Mobile"}, * Object { Capacity="64G", color="pink", network="Telecom"}, * Object { Capacity="128G", color="Telecom"}, * Object { Capacity="128G", color="Telecom"}, * Object { Capacity="128G", color="Telecom"}, * Object { Capacity="128G", color="Telecom"}, * Object { Capacity="128G", Color="silver", network="Unicom"}, * Object { Capacity="128G", color="Silver", network="Mobile"}, * Object { Capacity="128G", color="Silver", network="Telecom"}, * Object { Capacity="128G", color="Black", network="Unicom"}, * Object { Capacity="128G", color="Black", network="Mobile"}, * Object { Capacity="128G", color="Black", network="Telecom"}, * Object { Capacity="128G", color="pink", network = "unicom"}, * Objekt {CAPAPY = "128G", COLOR = "Pink", Network = "Mobile"}, * Object {CAPAPY = "128G", color = "pink", network = "Telecommunications"}] */</script>Das obige ist der Inhalt des von dem kartesischen Produkts veröffentlichten Produkts auf der Grundlage der Ihnen vorgestellten JS -Implementierung. Ich hoffe, es wird Ihnen hilfreich sein. Gleichzeitig bin ich Ihnen sehr dankbar für Ihre Unterstützung für die Wulin Network -Website. Ich glaube, wir werden es besser machen!