快捷導(dǎo)航

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

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

本文給大家介紹JS實現(xiàn)的笛卡爾乘積之商品發(fā)布的相關(guān)內(nèi)容，涉及到j(luò)s笛卡爾積算法的相關(guān)知識，本文介紹的非常詳細(xì)，具有參考價值，感興趣的朋友一起學(xué)習(xí)吧

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

js笛卡爾積算法

根據(jù)給的對象或者數(shù)組生成笛卡爾積

//笛卡兒積組合
function descartes(list)
{
//parent上一級索引;count指針計數(shù)
var point = {};
var result = [];
var pIndex = null;
var tempCount = 0;
var temp = [];
//根據(jù)參數(shù)列生成指針對象
for(var index in list)
{
if(typeof list[index] == 'object')
{
point[index] = {'parent':pIndex,'count':0}
pIndex = index;
}
}
//單維度數(shù)據(jù)結(jié)構(gòu)直接返回
if(pIndex == null)
{
return list;
}
//動態(tài)生成笛卡爾積
while(true)
{
for(var index in list)
{
tempCount = point[index]['count'];
temp.push(list[index][tempCount]);
}
//壓入結(jié)果數(shù)組
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;
}
}
}
}

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

一、需求描述

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

二、直接上代碼

<script>
/**
* 商品屬性類型
* 一個屬性個數(shù)是不確定的
*/
var Spec = function(specName,specItems){
this.specName = specName; //屬性名稱
this.specItems = specItems;//數(shù)值值，是個數(shù)組，數(shù)組個數(shù)不確定
}
var result = [];//組合成產(chǎn)品集
/**
* 發(fā)布一款商品選擇的一個屬性，這是一個規(guī)格數(shù)組，數(shù)組個數(shù)不確定
* 根據(jù)這個選擇的屬性組合成不同的產(chǎn)品
*/
var selectSpec = [{specName:'容量',specItems:['16G','64G','128G']},
{specName:'顏色',specItems:['土豪金','銀色','黑色','pink']},
{specName:'網(wǎng)絡(luò)',specItems:['聯(lián)通','移動','電信']}];
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);
/**組合成產(chǎn)品集
* [Object { 容量="16G", 顏色="土豪金", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="16G", 顏色="土豪金", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="16G", 顏色="土豪金", 網(wǎng)絡(luò)="電信"},
* Object { 容量="16G", 顏色="銀色", 網(wǎng)絡(luò)="聯(lián)通"},
* Object { 容量="16G", 顏色="銀色", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="16G", 顏色="銀色", 網(wǎng)絡(luò)="電信"}, 
* Object { 容量="16G", 顏色="黑色", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="16G", 顏色="黑色", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="16G", 顏色="黑色", 網(wǎng)絡(luò)="電信"}, 
* Object { 容量="16G", 顏色="pink", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="16G", 顏色="pink", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="16G", 顏色="pink", 網(wǎng)絡(luò)="電信"}, 
* Object { 容量="64G", 顏色="土豪金", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="64G", 顏色="土豪金", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="64G", 顏色="土豪金", 網(wǎng)絡(luò)="電信"},
* Object { 容量="64G", 顏色="銀色", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="64G", 顏色="銀色", 網(wǎng)絡(luò)="移動"},
* Object { 容量="64G", 顏色="銀色", 網(wǎng)絡(luò)="電信"}, 
* Object { 容量="64G", 顏色="黑色", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="64G", 顏色="黑色", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="64G", 顏色="黑色", 網(wǎng)絡(luò)="電信"}, 
* Object { 容量="64G", 顏色="pink", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="64G", 顏色="pink", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="64G", 顏色="pink", 網(wǎng)絡(luò)="電信"}, 
* Object { 容量="128G", 顏色="土豪金", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="128G", 顏色="土豪金", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="128G", 顏色="土豪金", 網(wǎng)絡(luò)="電信"}, 
* Object { 容量="128G", 顏色="銀色", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="128G", 顏色="銀色", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="128G", 顏色="銀色", 網(wǎng)絡(luò)="電信"}, 
* Object { 容量="128G", 顏色="黑色", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="128G", 顏色="黑色", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="128G", 顏色="黑色", 網(wǎng)絡(luò)="電信"}, 
* Object { 容量="128G", 顏色="pink", 網(wǎng)絡(luò)="聯(lián)通"}, 
* Object { 容量="128G", 顏色="pink", 網(wǎng)絡(luò)="移動"}, 
* Object { 容量="128G", 顏色="pink", 網(wǎng)絡(luò)="電信"}]
*/
</script>

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

您可能感興趣的文章: