基于JS实现的笛卡尔乘积之商品发布

 更新时间:2016年05月13日 09:41:31   作者:漫步枫  
本文给大家介绍JS实现的笛卡尔乘积之商品发布的相关内容,涉及到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;
}
//动态生成笛卡尔积
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实现的笛卡尔乘积之商品发布的想内容,希望对大家有所帮助,同时也非常感谢大家对脚本之家网站的支持,相信我们会做的更好!

相关文章

  • 深入理解JavaScript中Ajax

    深入理解JavaScript中Ajax

    Ajax不是一种新的编程语言,而是使用现有标准的新方法。本文重点给大家介绍javascript中ajax知识,非常不错,感兴趣的朋友参考下
    2016-08-08
  • JS模拟实现串行加法器

    JS模拟实现串行加法器

    这篇文章主要为大家详细介绍了JS模拟实现串行加法器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • IE浏览器PNG图片透明效果代码

    IE浏览器PNG图片透明效果代码

    平常,我们经常使用Gif格式的图片以保持图片在浏览器中透明,以支持底色。但由于IE浏览器本身的原因,我们无法使透明的PNG图片透明起来。那么,如何将它在IE浏览器下变得透明呢?
    2008-09-09
  • 夯基础之手撕javascript继承详解

    夯基础之手撕javascript继承详解

    这篇文章主要给大家介绍了关于手撕javascript继承的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Bootstrap 3多级下拉菜单实例

    Bootstrap 3多级下拉菜单实例

    这篇文章主要为大家详细介绍了Bootstrap 3多级下拉菜单实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 使用layer.msg 时间设置不起作用的解决方法

    使用layer.msg 时间设置不起作用的解决方法

    今天小编就为大家分享一篇使用layer.msg 时间设置不起作用的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript 兼容FF的onmouseenter和onmouseleave的代码

    javascript 兼容FF的onmouseenter和onmouseleave的代码

    经过测试发现,例子1 在 ff下抖动的厉害,ie下稍微有点。 具体原因 其实就是 mouseout 的冒泡机制 引起的。
    2008-07-07
  • 初识javascript 文档碎片

    初识javascript 文档碎片

    今天遇到一个问题: 我通过 ajax 取回另一个页面的 Html 。但这些 HTML 我不想直接输出,想通过 getElementsByName 处理后再输出相应的内容。用原生的 javascript怎样可以处理呢?
    2010-07-07
  • js实现简易垂直滚动条

    js实现简易垂直滚动条

    本文主要介绍了js实现简易垂直滚动条的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 浅谈JavaScript中的分支结构

    浅谈JavaScript中的分支结构

    下面小编就为大家带来一篇浅谈JavaScript中的分支结构。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07

最新评论