資訊專欄INFORMATION COLUMN
摘要：最近學習了，正好又完整的做了一個電商網(wǎng)站，就利用實現(xiàn)了一個組合查詢組件，首先介紹是個什么東西。庫存量單位，即庫存進出計量的單位，可以是以件盒托盤等為單位。在服裝鞋類商品中使用最多最普遍。
最近學習了angular，正好又完整的做了一個電商網(wǎng)站，就利用angular實現(xiàn)了一個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組件具體實現(xiàn)了什么功能呢？一種商品不同的sku組合是互斥的，例如一件衣服，可能有很多屬性，屬性可以自由組合，但是有的屬性沒有貨，這時候需要實現(xiàn)一個功能，用戶無法選擇屬性組合。 例如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}
對應(yīng)生成的html(在angular代碼接管之前生成的html，及angular執(zhí)行bootstrap之前)
尺碼...
- S
- M
...
組件接收4個參數(shù)skuData，splitStr，initSku，onOk
skuData為組件結(jié)接收的數(shù)據(jù)(數(shù)據(jù)有一定格式，需要后臺開發(fā)配合給)
{
"S#紅色#男": {
count: 0
},
"M#紅色#女": {
count: 0
},
"S#橙色#男": {
count: 1
},
"M#橙色#女": {
count: 1
},
.....
}
splitStr為不同key之間的分格縫（S#紅色#男中指的是‘#’）
initSku為默認設(shè)置的選中key（可以設(shè)置為M#紅色#女）
onOk點擊key之后的callback
簡單講解一下組件是怎么工作的
首先手動設(shè)置transclude,解決用ng-transclude scope作用域問題
transclude(scope, function(clone){
element.append(clone);
});
根據(jù)sku-data，獲得屬性值的數(shù)組
getSkuList-->transpose-->unique
[["S", "紅色,"男"], ["M","紅色","女"],["S","橙色","男"],["M","橙色","女"]]-->矩陣轉(zhuǎn)置-->去重元素得到
[["S", "M"], ["紅色","橙色"],["男","女"]]
scope.selected保存了已選中的屬性，每次點擊（支持反選）屬性值的時候執(zhí)行checkItem，getNum會檢查當前sku組合是否可以選中。getNum參考了淘寶前端的實現(xiàn)，已經(jīng)查詢過的sku組合會做緩存，是一種空間換時間的算法。
設(shè)置每個屬性值中數(shù)據(jù)模型中的selected和disabled
缺點所需要的數(shù)據(jù)結(jié)構(gòu)格式固定
transclude template書寫方式還是有點別扭（樣式需要自定義所造成）
對angularjs的掌握程度不深，實現(xiàn)得不夠完善，還望大牛們指出不足的地方。
最后介紹一個同事的mvvm庫 regularjs，輕量級，很不錯，還支持到IE6。查看reference點這里
http://ued.taobao.org/blog/2012/07/sku-search-algorithm/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86049.html
摘要：優(yōu)惠券選擇器優(yōu)惠券選擇器提供了優(yōu)惠券單元格和優(yōu)惠券選擇功能。優(yōu)惠券單元格只需傳入優(yōu)惠券列表和當前使用的優(yōu)惠券即可正確展示。使用參數(shù)可以控制優(yōu)惠券單元格是否展示右側(cè)箭頭，這個可以用于提醒用戶能否切換優(yōu)惠券。 Vant ( ?v?nt ) 是有贊前端團隊基于有贊統(tǒng)一的規(guī)范實現(xiàn)的 Vue 組件庫，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。通過 Vant，可以快速搭建出風格統(tǒng)一的頁面，提升開發(fā)效...
先對項目進行一下簡單的介紹 vue開發(fā)微信商城項目總結(jié)之一–項目介紹 項目開發(fā)初期，由于項目比較著急上線，前端的框架在選型上比較倉促，只是因為vue學習成本較低，就選了它，沒有什么別的原因， 之前看過angular2一段時間，又趁著周末看了兩天vue，就倉促開發(fā)，所以埋下了很多坑，項目（項目目前沒有對游客開放，是2B2C的模式）上線后，回頭填坑，發(fā)現(xiàn)了很多問題，因為之前一直是基于Jquery模式的...
摘要：我們現(xiàn)在正向的考慮，如何確定屬性是否可選。而且多維的情況下用戶可以跳著選。舉個例子如果有一個維的，那么最終生成的路徑表會有個最終可以查看這個多維屬性狀態(tài)判斷相關(guān)資料組合查詢算法探索 原文：https://keelii.github.io/2016/12/22/sku-multi-dimensional-attributes-state-algorithm/ 問題描述 這個問題來源于選擇...
摘要：是有贊端規(guī)范的實現(xiàn)版本，提供了一整套基礎(chǔ)的組件以及常用的業(yè)務(wù)組件。目前我們有組件，其中包括以及等實用的業(yè)務(wù)組件。一套有贊設(shè)計師繪制的圖標庫。為了解決這些問題，提供了一套自己的時間選擇組件，包括日期選擇周選擇組件月選擇以及時間區(qū)間選擇。 Zent ( ?zent ) 是有贊 PC 端 Web UI 規(guī)范的 React 實現(xiàn)版本，提供了一整套基礎(chǔ)的 UI 組件以及常用的__業(yè)務(wù)組件__。通...
摘要：此文已由作者溫正湖授權(quán)網(wǎng)易云社區(qū)發(fā)布。這是一篇官網(wǎng)上的一篇文章，分析了使用存儲商品分類信息相比其他數(shù)據(jù)庫的優(yōu)勢，并講述了如何將其保存到中。 此文已由作者溫正湖授權(quán)網(wǎng)易云社區(qū)發(fā)布。 歡迎訪問網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運營經(jīng)驗。 這是一篇MongoDB官網(wǎng)上的一篇文章，分析了使用MongoDB存儲商品分類信息相比其他數(shù)據(jù)庫的優(yōu)勢，并講述了如何將其保存到MongoDB中。原址點擊：Us...
閱讀 1387·2021-11-24 09:38
閱讀 2088·2021-09-22 15:17
閱讀 2348·2021-09-04 16:41
閱讀 3475·2019-08-30 15:56
閱讀 3515·2019-08-29 17:19
閱讀 1943·2019-08-28 18:09
閱讀 1252·2019-08-26 13:35
閱讀 1714·2019-08-23 17:52
