Antes de presentar el texto principal, le agregaré algún conocimiento:
JS Algoritmo de productos cartesianos
Generar productos cartesianos a partir del objeto o matriz dado
// Función de combinación de productos cartesiano Descartes (list) {// índice anterior del índice anterior; Count Pointer Count Var Point = {}; var result = []; var pindex = null; var tempCount = 0; var temp = []; // Generar objetos de puntero basados en columnas de parámetros para (índice var en list) {if (typeOf List [index] == 'Object') {'Parent': Pindex, 'Count': 0} Pindex = index;}} // La estructura de datos de una sola dimensión devuelve directamente si (pindex == null) {return list;} // generación dinámica del producto cartesiano mientras (true) {para (vAR Índice en lista) {tempCount = punto [index] ['count']; temp.push (list [index] [tempCount]);} // Presione el resultado de la matriz de resultados punto [index] ['parent']; if (pindex == null) {return resultado;} // Asignar padres a verificar nuevamente index = pindex;} else {punto [index] ['count'] ++; rompiendo;}}}}}}De acuerdo, el algoritmo de generación cartesiano JS es solo para sentar las bases para el siguiente texto. No diré mucho, así que volveré al grano.
1. Descripción de requisitos
La función de lanzamiento del producto de los sitios web de comercio electrónico, similar a la página Detalles del producto de JD.com, como se muestra en la figura a continuación, ¿cómo se genera una función seleccionable en segundo plano? De hecho, el iPhone 6 que ve no es solo un producto cuando se lanza, sino muchos, porque el precio de cada iPhone 6 seleccionado es diferente, por lo que al publicar el producto, estos elementos opcionales se seleccionan de un montón de atributos y valores de atributos. El problema es que el número de atributos seleccionados durante la publicación es diferente, y los valores de los atributos también son diferentes. Luego, el número de productos generados se combina en función de atributos y valores de atributos.
2. Cargue directamente el código
<script>/*** Tipo de atributo de producto*El número de atributos es incierto*/var spec = function (specName, speciteMs) {this.specname = specName; // Nombre del atributo this.specitems = speciteMs; // El valor numérico es una matriz, el número de matrices es incierto} var result = []; // combinado en un conjunto de productos/*** Publicar un atributo seleccionado para un producto, que es una matriz de especificaciones, y el número de matrices no es cierto*combinado en diferentes productos basados en este atributo seleccionado*/var selectspec = [{Specname: 'Capacity', Specitems: ['16g', '64g', '128g']}, {specname: 'color', specitems: ['top oro', 'plateado', 'negro', 'rosa']}, {specnoce: 'red', specitems: ['United Kingdom', 'móvil', 'Telecom']}}] actual) {if (index <selectspec.length - 1) {var specitem = selectspec [index]; var keyA = specitem.specname; var items = specitem.specitems; if (items.length == 0) {run (index+1, actual);} for (var i = 0; i <items.length; i ++) {if (if (1, continúa) {}; newmap = $ .extend (newmap, actual); newmap [keyA] = elementos [i]; run (index + 1, newMap);}} else if (index == selectspec.length - 1) {var specitem = selectspec [index]; var keya = specitem.specname; var items items = SpeciteM.Specitems; if (items.length == 0) {result.push (actual);} for (var i = 0; i <items.length; i ++) {if (! items [i]) continúa; var newmap = {}; newmap = $ .extend (newmap, current); newmap [keya] = = elementos [i]; resultado.push (newmap);}}} combine (0, {}); console.info (resultado);/** combinado en el conjunto de productos * [objeto {capacidad = "16g", color = "tulujin", network = "universal"}, * objeto {capacidad = "16g", color = "大天天天", * objeto {capacidad = "16g 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 {capacidad = "64g", color = "Telecom"}, * objeto {capacidad = "64g", color = "telecom"}, * objeto {capacidad = "64g", color = "tesory dorado", network = "telecom"}, * objeto {capacidad = "64g", color = "siltle", network "," unicómet Capacidad = "64g", color = "plateado", network = "mobile"}, * objeto {capacidad = "64g", color = "plateado", network = "telecom"}, * objeto {capacidad = "64g", color = "negro", network = "unicom"}, * objeto {capacidad = "64g", color = "negro =" móvil "}, * objeto {objeto {" ", 644g", 644g ", 644g. Color="Black", Network="Telecom"}, * Object { Capacity="64G", Color="Black", Network="Telecom"}, * Object { Capacity="64G", color="pink", network="Unicom"}, * Object { Capacity="64G", color="pink", network="Mobile"}, * Object { Capacity="64G", color="pink", Network = "Telecom"}, * Object {capacidad = "128g", color = "telecom"}, * objeto {capacidad = "128g", color = "telecom"}, * objeto {capacidad = "128g", color = "telecom"}, * objeto {capacidad = "128g", color = "telecom"}, * object {capacidad = "128g" 128g ", color", ", color", ", color", color ", color", color ", color", color ", color", ", color", "128g", Color ", Color", Color ", Color", ", Color", Color ", Color", Color ", Color", Color ", Color", ", Color", Color ",", color "," 128g ", Color", ", color", ", color". 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"}, * Objeto {capacidad = "128g", color = "negro", network = "telecom"}, * objeto {capacidad = "128g", color = "rosa", network = "unicom"}, * objeto {capacidad = "128g", color = "rosa", network = "móvil"}, * objeto {capacidad = "128g", color = "rosa", ", rosa", ",", ",", rosa ",", " Network = "Telecommunications"}]*/</script>Lo anterior es el contenido del producto publicado por el producto cartesiano basado en la implementación de JS presentada a usted. Espero que te sea útil. Al mismo tiempo, le estoy agradecido por su apoyo al sitio web de Wulin Network. ¡Creo que lo haremos mejor!