Angular完成的网上商城SKU组合查询组件

2019年8月27日 263次阅读 来源: amibug

近来进修了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)>
  <div ui-sku split-str="#" init-sku="M#赤色#男" sku-data="skuInfo" on-ok="callback($event)">
  <#list product.parameters as param >
    <div class="row f-cb">
      <div class="l-col">${param.name!''}</div>
      <div class="r-col">
        <ul class="m-sku f-cb">
        <#list param.values as key >
          <li><span ng-class="{'js-seleted': keyMap['${key}'].selected, 'js-disabled': keyMap['${key}'].disabled}" ng-click="onSelect('${key}')">${key}</span></li>
        </#list>
        </ul>
      </div>
    </div>
  </#list>
  </div>
</#if>

对应天生的html(在angular代码接受之前天生的html，及angular实行bootstrap之前)

<div ui-sku split-str="#" init-sku="M#赤色#男" sku-data="skuInfo" on-ok="callback($event)">
  <div class="row f-cb">
    <div class="l-col">尺码</div>
    <div class="r-col">
      <ul class="m-sku f-cb">
        <li><span ng-class="{'js-seleted': keyMap['S'].selected, 'js-disabled': keyMap['S'].disabled}" ng-click="onSelect('S')">S</span></li>
        <li><span ng-class="{'js-seleted': keyMap['M'].selected, 'js-disabled': keyMap['M'].disabled}" ng-click="onSelect('M')">M</span></li>
        ...
      </ul>
    </div>
    ...
  </div>
</div>

组件吸收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/

    原文作者：amibug
    原文地址: https://segmentfault.com/a/1190000003853230
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞