基于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实现的笛卡尔乘积之商品发布的想内容,希望对大家有所帮助,同时也非常感谢大家对我们网站的支持,相信我们会做的更好!

(0)

相关推荐

  • javascript笛卡尔积算法实现方法

    本文实例讲述了javascript笛卡尔积算法实现方法.分享给大家供大家参考.具体分析如下: 这里可根据给的对象或者数组生成笛卡尔积 //笛卡儿积组合 function descartes(list) { //parent上一级索引;count指针计数 var point = {}; var result = []; var pIndex = null; var tempCount = 0; var temp = []; //根据参数列生成指针对象 for(var index in list)

  • 笛卡尔乘积介绍

    笛卡尔(Descartes)乘积又叫直积.假设集合A={a,b},集合B={0,1,2},则两个集合的笛卡尔积为{(a,0),(a,1),(a,2),(b,0),(b,1), (b,2)}.可以扩展到多个集合的情况.类似的例子有,如果A表示某学校学生的集合,B表示该学校所有课程的集合,则A与B的笛卡尔积表示所有可能的选课情况. 在数学中,两个集合 X 和 Y 的笛卡儿积(Cartesian product),又称直积,表示为 X × Y,是其第一个对象是 X 的成员而第二个对象是 Y 的一个成员

  • .net C# 实现任意List的笛卡尔乘积算法代码

    可以扩展到多个集合的情况.类似的例子有,如果A表示某学校学生的集合,B表示该学校所有课程的集合,则A与B的笛卡尔积表示所有可能的选课情况 复制代码 代码如下: using System;using System.Collections.Generic;using System.Diagnostics;using System.Linq; namespace 算法{    public static class 算法    {        /// <summary>        /// 笛卡

  • Javascript浮点数乘积运算出现多位小数的解决方法

    Javascript在进行浮点数的乘积运算,会出现多位小数的情况. 这是由于在运算的时候先把浮点数转化成二进制后进行运算,但是有的小数在二进制编码后出现无限循环,因而导致计算出现了误差,在其它变成语言中也有类似的问题. 原因解释参考自百度知道: 例如:求1038.1-1000 1038.1=10000001110.0001100110011001100110011001100110011001100..... 1000 =1111101000 1038.1转化为二进制是个无限循环小数,1100是

  • JS实现简单的二维矩阵乘积运算

    本文实例讲述了JS实现简单的二维矩阵乘积运算方法.分享给大家供大家参考,具体如下: Console控制台截图如下: (上图为输出结果直接上代码了(A矩阵可以乘以B矩阵的前提是A矩阵的列数等于B矩阵的行数) <!DOCTYPE html> <html> <head> <title>demo</title> </head> <body> </body> <script type="text/java

  • 基于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[ind

  • Python实现求笛卡尔乘积的方法

    本文实例讲述了Python实现求笛卡尔乘积的方法.分享给大家供大家参考,具体如下: 在数学中,两个集合X和Y的笛卡尓乘积(Cartesian product),又称直积,表示为X × Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员.假设集合A={a,b},集合B={0,1,2},则两个集合的笛卡尔积为{(a,0), (a,1), (a,2), (b,0), (b,1), (b, 2)}.有时我们需要在python求两个list的笛卡尔乘积,其实很简单,一行代码搞定. 例如

  • 基于js原生和ajax的get和post方法以及jsonp的原生写法实例

    login.onclick = function(){ var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost/ajax2/test2.php?username="+username.value+"&pwd="+pwd2.value,true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.rea

  • 基于js与flash实现的网站flv视频播放插件代码

    本文实例讲述了基于js与flash实现的网站flv视频播放插件代码.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

  • 基于JS对象创建常用方式及原理分析

    前言 俗话说"在js语言中,一切都对象",而且创建对象的方式也有很多种,所以今天我们做一下梳理 最简单的方式 JavaScript创建对象最简单的方式是:对象字面量形式或使用Object构造函数 对象字面量形式 var person = new Object(); person.name = "jack"; person.sayName = function () { alert(this.name) } 使用Object构造函数 var person = { na

  • 基于JS脚本语言的基础语法详解

    JS脚本语言的基础语法:输出语法  alert("警告!");  confirm("确定吗?");   prompt("请输入密码");为弱类型语言: 开始时要嵌入JS代码:<script type="text/javascript"></script>: 关于写程序是需注意的基本语法: 1.所有的字符全都是英文半角的: 2.大部分情况下每条语句结束后要加分号: 3.每一块代码结束后加换行:4.程序前呼

  • 基于JS代码实现实时显示系统时间

    1.概述 在浏览很多网站时,都会发现在网站中加入了显示当前系统时间的功能,在网页中显示当前系统时间,不仅可以方便浏览者掌握当前时间,而且还美化了网页. 2.技术要点 利用Date对象来实现.首先创建一个表示当前系统时间的Date()对象,然后通过Date对象的getXxx()方法获得当前系统时间的年.月.日.小时.分.秒和星期的值,接下来将获得的这些值组合成一个日期时间字符串,并将日期时间字符串设置成为<div>标签的内容,最后通过window对象的setTimeout()函数每隔1秒调用一个

  • 基于JS实现翻书效果的页面切换样式

    本文给大家分享一段代码,基于js代码实现的翻书效果的页面切换样式,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <

随机推荐