基于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里怎么取select标签里的值并修改
Dec 10 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
Prototype框架详解
Nov 25 Javascript
js实现自定义路由
Feb 04 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 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实现XML与数据格式进行转换类实例
2015/07/29 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
vue双向数据绑定知识点总结
2018/04/18 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
初学Python实用技巧两则
2014/08/29 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
带你认识Django
2019/01/15 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python字符串的常见操作实例小结
2019/04/08 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
银行实习自我鉴定
2013/10/12 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
大学生个人自荐信
2014/02/24 职场文书
岗位职责怎么写
2014/03/14 职场文书
安全承诺书格式
2014/05/21 职场文书
普通党员对照检查材料
2014/09/24 职场文书
考勤制度通知
2015/04/25 职场文书
党课主持词大全
2015/06/30 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
《搭石》教学反思
2016/02/18 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS