DIV CSS 佈局教程網

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

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;
}
//動態生成笛卡爾積
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笛卡爾積算法只是給下文做個鋪墊，不多說了，言歸正傳。

一、需求描述

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

二、直接上代碼

<script>
/**
* 商品屬性類型
* 一個屬性個數是不確定的
*/
var Spec = function(specName,specItems){
this.specName = specName; //屬性名稱
this.specItems = specItems;//數值值，是個數組，數組個數不確定
}
var result = [];//組合成產品集
/**
* 發布一款商品選擇的一個屬性，這是一個規格數組，數組個數不確定
* 根據這個選擇的屬性組合成不同的產品
*/
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實現的笛卡爾乘積之商品發布的想內容，希望對大家有所幫助，同時也非常感謝大家對網站的支持，相信我們會做的更好！