基于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 相关文章推荐
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
javaScript中的空值和假值
Dec 18 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
JS开发常用工具函数(小结)
Jul 04 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
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
angular组件间通讯的实现方法示例
2020/05/07 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python中不同进制的语法及转换方法分析
2016/07/27 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
班主任工作经验材料
2014/02/02 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
10的分与合教学反思
2014/04/30 职场文书
横幅标语大全
2014/06/17 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
公司晚会主持词
2019/04/17 职场文书