Angular实现的网上商城SKU组合查询组件

mcterry 发布于2019-08-21 10:42 / 1315人阅读

摘要：最近学习了，正好又完整的做了一个电商网站，就利用实现了一个组合查询组件，首先介绍是个什么东西。库存量单位，即库存进出计量的单位，可以是以件盒托盘等为单位。在服装鞋类商品中使用最多最普遍。

最近学习了angular，正好又完整的做了一个电商网站，就利用angular实现了一个sku组合查询组件，首先介绍sku是个什么东西。sku=stock keeping unit(库存量单位)，sku即库存进出计量的单位，可以是以件、盒、托盘等为单位。在服装、鞋类商品中使用最多最普遍。例如服装中一个SKU（XL###红色###男款的一件衣服）通常表示：尺码、颜色、款式等。

例子

demo(先看下例子)：http://codepen.io/hzxs1990225/pen/VYyOdW

repository：https://github.com/amibug/angular-sku

angular-sku组件具体实现了什么功能呢？一种商品不同的sku组合是互斥的，例如一件衣服，可能有很多属性，属性可以自由组合，但是有的属性没有货，这时候需要实现一个功能，用户无法选择属性组合。例如XL###红色没有货，而S###红色有货，则用户选了红色之后，XL就不能选，S可以选。S###红色选中之后，在callback中更新库存等操作。

angular-sku它是一个util组件，样式可以由使用者自己定义。html部分是由后台模板引擎，基于模板来生成的文本输出，例如freemaker（java语言编写的模板引擎），一般是这么写的。自定义的html写在ui-sku中间

<#if (product.parameters?size>0)>
  
  <#list product.parameters as param >
    
      ${param.name!""}
      
        
        <#list param.values as key >
          ${key}

对应生成的html(在angular代码接管之前生成的html，及angular执行bootstrap之前)

组件接收4个参数skuData，splitStr，initSku，onOk

skuData为组件结接收的数据(数据有一定格式，需要后台开发配合给)

     {
        "S#红色#男": {
          count: 0
        },
        "M#红色#女": {
          count: 0
        },
        "S#橙色#男": {
          count: 1
        },
       "M#橙色#女": {
          count: 1
        },
        .....
      }

splitStr为不同key之间的分格缝（S#红色#男中指的是‘#’）

initSku为默认设置的选中key（可以设置为M#红色#女）

onOk点击key之后的callback

简单讲解一下组件是怎么工作的

首先手动设置transclude,解决用ng-transclude scope作用域问题

     transclude(scope, function(clone){
       element.append(clone);
    });

根据sku-data，获得属性值的数组

    getSkuList-->transpose-->unique
    [["S", "红色,"男"], ["M","红色","女"],["S","橙色","男"],["M","橙色","女"]]-->矩阵转置-->去重元素得到
    [["S", "M"], ["红色","橙色"],["男","女"]]

scope.selected保存了已选中的属性，每次点击（支持反选）属性值的时候执行checkItem，getNum会检查当前sku组合是否可以选中。getNum参考了淘宝前端的实现，已经查询过的sku组合会做缓存，是一种空间换时间的算法。

设置每个属性值中数据模型中的selected和disabled

缺点

所需要的数据结构格式固定

transclude template书写方式还是有点别扭（样式需要自定义所造成）

对angularjs的掌握程度不深，实现得不够完善，还望大牛们指出不足的地方。
最后介绍一个同事的mvvm库 regularjs，轻量级，很不错，还支持到IE6。查看reference点这里

参考

http://ued.taobao.org/blog/2012/07/sku-search-algorithm/

云服务器 GPU云服务器排列组合java实现 java如何实现组合如何用c语言实现组合 jsp组合查询数据库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86049.html

Vant - 高效的 Vue 组件库，再造一个有赞移动商城也不在话下

摘要：优惠券选择器优惠券选择器提供了优惠券单元格和优惠券选择功能。优惠券单元格只需传入优惠券列表和当前使用的优惠券即可正确展示。使用参数可以控制优惠券单元格是否展示右侧箭头，这个可以用于提醒用户能否切换优惠券。 Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效...

tunny 2019-08-21 16:47 评论0 收藏0
vue开发微信商城项目总结之六--关于vuex的思考

先对项目进行一下简单的介绍 vue开发微信商城项目总结之一–项目介绍项目开发初期，由于项目比较着急上线，前端的框架在选型上比较仓促，只是因为vue学习成本较低，就选了它，没有什么别的原因，之前看过angular2一段时间，又趁着周末看了两天vue，就仓促开发，所以埋下了很多坑，项目（项目目前没有对游客开放，是2B2C的模式）上线后，回头填坑，发现了很多问题，因为之前一直是基于Jquery模式的...

PrototypeZ 2019-08-21 17:08 评论0 收藏0
sku 多维属性状态判断算法

摘要：我们现在正向的考虑，如何确定属性是否可选。而且多维的情况下用户可以跳着选。举个例子如果有一个维的，那么最终生成的路径表会有个最终可以查看这个多维属性状态判断相关资料组合查询算法探索原文：https://keelii.github.io/2016/12/22/sku-multi-dimensional-attributes-state-algorithm/ 问题描述这个问题来源于选择...

Awbeci 2019-08-21 11:27 评论0 收藏0
Zent - 源自有赞微商城的 React 组件库

摘要：是有赞端规范的实现版本，提供了一整套基础的组件以及常用的业务组件。目前我们有组件，其中包括以及等实用的业务组件。一套有赞设计师绘制的图标库。为了解决这些问题，提供了一套自己的时间选择组件，包括日期选择周选择组件月选择以及时间区间选择。 Zent ( ˈzent ) 是有赞 PC 端 Web UI 规范的 React 实现版本，提供了一整套基础的 UI 组件以及常用的__业务组件__。通...

Corwien 2019-08-21 17:34 评论0 收藏0
使用 MongoDB 存储商品分类信息

摘要：此文已由作者温正湖授权网易云社区发布。这是一篇官网上的一篇文章，分析了使用存储商品分类信息相比其他数据库的优势，并讲述了如何将其保存到中。此文已由作者温正湖授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。这是一篇MongoDB官网上的一篇文章，分析了使用MongoDB存储商品分类信息相比其他数据库的优势，并讲述了如何将其保存到MongoDB中。原址点击：Us...

tigerZH 2019-06-28 11:01 评论0 收藏0