基于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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
vue组件与复用详解
2018/04/08 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
Python内置函数dir详解
2015/04/14 Python
python3设计模式之简单工厂模式
2017/10/17 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
python如何爬取动态网站
2020/09/09 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
美国在线宠物商店:Chewy
2019/01/12 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
留学推荐信怎么写
2014/01/25 职场文书
新文化运动的口号
2014/06/21 职场文书
法院授权委托书格式
2014/09/28 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
责任书格式
2019/04/18 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
python字符串常规操作大全
2021/05/02 Python