基于JS實現的笛卡爾乘積之商品發(fā)布

更新時間：2016年05月13日 09:41:31 作者：漫步楓

本文給大家介紹JS實現的笛卡爾乘積之商品發(fā)布的相關內容，涉及到js笛卡爾積算法的相關知識，本文介紹的非常詳細，具有參考價值，感興趣的朋友一起學習吧

沒給大家介紹正文之前先給大家補充點知識：

js笛卡爾積算法

根據給的對象或者數組生成笛卡爾積

//笛卡兒積組合
function descartes(list)
{
//parent上一級索引;count指針計數
var point = {};
var result = [];
var pIndex = null;
var tempCount = 0;
var temp = [];
//根據參數列生成指針對象
for(var index in list)
{
if(typeof list[index] == 'object')
{
point[index] = {'parent':pIndex,'count':0}
pIndex = index;
}
}
//單維度數據結構直接返回
if(pIndex == null)
{
return list;
}
//動態(tài)生成笛卡爾積
while(true)
{
for(var index in list)
{
tempCount = point[index]['count'];
temp.push(list[index][tempCount]);
}
//壓入結果數組
result.push(temp);
temp = [];
//檢查指針最大值問題
while(true)
{
if(point[index]['count']+1 >= list[index].length)
{
point[index]['count'] = 0;
pIndex = point[index]['parent'];
if(pIndex == null)
{
return result;
}
//賦值parent進行再次檢查
index = pIndex;
}
else
{
point[index]['count']++;
break;
}
}
}
}

好了，關于js笛卡爾積算法只是給下文做個鋪墊，不多說了，言歸正傳。

一、需求描述

電商網站的商品發(fā)布功能，類似京東的商品詳細頁，如下圖，這樣的可選擇功能，在后臺是如何生成的呢，其實你看到的一個iphone6在發(fā)布時并不只是發(fā)布一個商品，而是很多個，因為每一個選擇出來的iphone6價格是不一樣的，那么發(fā)布商品時這些可選擇項又是從一堆屬性和屬性值中挑選出來的，問題來了，發(fā)布時挑選的屬性個數是不一樣的，屬性值也是不一樣的，那么生成的商品個數是根據屬性和屬性值組合出來的。

二、直接上代碼

<script>
/**
* 商品屬性類型
* 一個屬性個數是不確定的
*/
var Spec = function(specName,specItems){
this.specName = specName; //屬性名稱
this.specItems = specItems;//數值值，是個數組，數組個數不確定
}
var result = [];//組合成產品集
/**
* 發(fā)布一款商品選擇的一個屬性，這是一個規(guī)格數組，數組個數不確定
* 根據這個選擇的屬性組合成不同的產品
*/
var selectSpec = [{specName:'容量',specItems:['16G','64G','128G']},
{specName:'顏色',specItems:['土豪金','銀色','黑色','pink']},
{specName:'網絡',specItems:['聯通','移動','電信']}];
function combine(index, current){
if (index < selectSpec.length - 1){
var specItem = selectSpec[index];
var keya = specItem.specName;
var items = specItem.specItems;
if(items.length==0){
run( index + 1, current);
}
for (var i = 0; i < items.length; i++){
if(!items[i])continue;
var newMap = {};
newMap = $.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.specItems;
if(items.length==0){
result.push(current);
}
for (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);
/**組合成產品集
* [Object { 容量="16G", 顏色="土豪金", 網絡="聯通"}, 
* Object { 容量="16G", 顏色="土豪金", 網絡="移動"}, 
* Object { 容量="16G", 顏色="土豪金", 網絡="電信"},
* Object { 容量="16G", 顏色="銀色", 網絡="聯通"},
* Object { 容量="16G", 顏色="銀色", 網絡="移動"}, 
* Object { 容量="16G", 顏色="銀色", 網絡="電信"}, 
* Object { 容量="16G", 顏色="黑色", 網絡="聯通"}, 
* Object { 容量="16G", 顏色="黑色", 網絡="移動"}, 
* Object { 容量="16G", 顏色="黑色", 網絡="電信"}, 
* Object { 容量="16G", 顏色="pink", 網絡="聯通"}, 
* Object { 容量="16G", 顏色="pink", 網絡="移動"}, 
* Object { 容量="16G", 顏色="pink", 網絡="電信"}, 
* Object { 容量="64G", 顏色="土豪金", 網絡="聯通"}, 
* Object { 容量="64G", 顏色="土豪金", 網絡="移動"}, 
* Object { 容量="64G", 顏色="土豪金", 網絡="電信"},
* Object { 容量="64G", 顏色="銀色", 網絡="聯通"}, 
* Object { 容量="64G", 顏色="銀色", 網絡="移動"},
* Object { 容量="64G", 顏色="銀色", 網絡="電信"}, 
* Object { 容量="64G", 顏色="黑色", 網絡="聯通"}, 
* Object { 容量="64G", 顏色="黑色", 網絡="移動"}, 
* Object { 容量="64G", 顏色="黑色", 網絡="電信"}, 
* Object { 容量="64G", 顏色="pink", 網絡="聯通"}, 
* Object { 容量="64G", 顏色="pink", 網絡="移動"}, 
* Object { 容量="64G", 顏色="pink", 網絡="電信"}, 
* Object { 容量="128G", 顏色="土豪金", 網絡="聯通"}, 
* Object { 容量="128G", 顏色="土豪金", 網絡="移動"}, 
* Object { 容量="128G", 顏色="土豪金", 網絡="電信"}, 
* Object { 容量="128G", 顏色="銀色", 網絡="聯通"}, 
* Object { 容量="128G", 顏色="銀色", 網絡="移動"}, 
* Object { 容量="128G", 顏色="銀色", 網絡="電信"}, 
* Object { 容量="128G", 顏色="黑色", 網絡="聯通"}, 
* Object { 容量="128G", 顏色="黑色", 網絡="移動"}, 
* Object { 容量="128G", 顏色="黑色", 網絡="電信"}, 
* Object { 容量="128G", 顏色="pink", 網絡="聯通"}, 
* Object { 容量="128G", 顏色="pink", 網絡="移動"}, 
* Object { 容量="128G", 顏色="pink", 網絡="電信"}]
*/
</script>

以上所述是小編給大家介紹的基于JS實現的笛卡爾乘積之商品發(fā)布的想內容，希望對大家有所幫助，同時也非常感謝大家對腳本之家網站的支持，相信我們會做的更好！

您可能感興趣的文章: