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


Posted in Javascript onMay 13, 2016

没给大家介绍正文之前先给大家补充点知识:

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价格是不一样的,那么发布商品时这些可选择项又是从一堆属性和属性值中挑选出来的,问题来了,发布时挑选的属性个数是不一样的,属性值也是不一样的,那么生成的商品个数是根据属性和属性值组合出来的。

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

二、直接上代码

<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 相关文章推荐
jquery实现手风琴效果实例代码
Nov 15 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
详解vue v-model
Aug 31 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 #Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 #Javascript
最简单的tab切换实例代码
May 13 #Javascript
浅析创建javascript对象的方法
May 13 #Javascript
全面理解JavaScript中的闭包
May 12 #Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 #Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 #Javascript
You might like
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
动态加载js的几种方法
2006/10/23 Javascript
用正则获取指定路径文件的名称
2007/02/27 Javascript
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
英国著名药妆店:Superdrug
2021/02/13 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
火山动力Java笔试题
2014/06/26 面试题
学生会主席就职演讲稿
2014/01/14 职场文书
劳动之星获奖感言
2014/02/01 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
python多次执行绘制条形图
2022/04/20 Python