最近花了半個月的時間，做了一個淘寶購物車頁面的Demo。當然，為了能夠更加深入的學習，不僅僅有PC端的固定寬度的布局，還實現了移動端在Media Query為768px以下（也就是實現了ipad，iphone 6 plus，iphone6，S5等）的Flexbox彈性布局。
還要再說的是，pc端和移動端淘寶購物車頁面的Bug基本修復完畢，完全適合一個對HTML，CSS，CSS3，HTML5和Js有基礎，並且熟悉jQuery，SCSS，熟悉JSON數據交換格式，jQuery Ajax的人進行學習。當然對JSON並不是一定說要非常熟悉，你會編寫對應的數據即可；對jQuery Ajax 應當知道常見的jQuery封裝好的HTTP請求方法，如$.get , $.post 等；在CSS3方面，需要熟悉Flexbox伸縮布局盒模型。
源碼地址: Uncle-Keith的Github。
有一定前端基礎的同學可以嘗試閱讀一下源碼。當然，沒有前端基礎的人，也可以閱讀，只是速度會慢些罷了。
這是淘寶購物車pc端頁面和移動端頁面的截圖。當然，這只是學習的過程，在移動端方面沒有使用MVVM框架實現。在淘寶移動端頁面上（非APP），淘寶團隊是使用Reactjs實現的。另外，所有的CSS，Js和圖片本人並沒有使用Gulp進行壓縮處理。
注：這個截圖是在縮放比率為80%的時候截下的，所以文字不太清晰。
（注：移動端頁面是在iphone5下截圖的）
接下來，只是會大概講一下pc端和移動端實現的功能，具體怎么實現我會在之后的博文中分享。
在pc端實現的淘寶購物車頁面實現了以下功能，或者說的高端一些，實現了一些與用戶交互方面的功能。
1：頂部實現了hover狀態和非hover狀態時二級菜單的出現和隱藏，並且彈出的二級菜單absolute化。這里的icon涉及了CSS3中的偽元素。並且向下的按鈕是使用CSS3實現的。
2：搜索框實現了功能比較多。
首先是當你輸入某個字符串之后會有相應的下拉菜單彈出。這里涉及了jQuery Ajax 的方法，使用$.get方法去獲取JSON數據，然后動態加載HTML，最后返回到客戶端上。另外涉及了jQuery中的鍵盤事件keyup，當keycode為13（也就是Enter鍵）時，會有相應的JSON數據被異步加載，然后放到相應的容器內。這樣做的好處是不用整頁刷新，對客戶體驗較好，特別是在移動端上。異步加載會極大減少流量的消耗。
當然這里還要重點在說的是，如果希望可以操作異步加載的數據，然后返回到客戶端上的相應內容時，這里需要用到事件代理和事件冒泡的原理。什么意思呢？就是說，如果你把一些事件綁定在被動態加載HTML的元素上面，那么這些被綁定的事件會失效。解決方法是需要將事件綁定到body（或者其他非動態加載的HTML）元素上。詳細的我會在之后的文章中談及。
3：商品的選擇，查詢，刪除，增加。
選擇商品大概有幾種邏輯：當點擊全選按鈕時，全部商品被選擇，並且計算相應的價格和商品數量；取消全選時，全部商品被取消，並且商品價格和數量相應變化；當在全選狀態下，某個商品被取消選擇，則取消全選狀態，並且會相應計算商品價格和商品數量；當所有商品被全部選中時，全選按鈕重新被激活，並且計算相應的商品價格和商品數量。
查詢商品：如果想要查詢自己購物車的商品，我的實現是自己去寫一些JSON數據，然后通過Ajax動態加載HTML，然后返回到客戶端。
刪除商品：pc端頁面還有一個沒有實現的就是當我去刪除某個商品時，如何刪除JSON數據里面的相應商品數據。我能做到的就是在頁面上刪除。做法是使用了jQuery的detach()方法，而不是remove()方法。如果有博友知道怎么實現JSON數據內的相應商品數據一並刪除，希望能給我留言，給予我一定的解決方案。
4：固定底部的商品操作欄。
這里主要有兩個知識點：一是讓整個footer的父容器fixed，然后bottom設置為0。二是在.container元素上設置margin-bottom值，距離可視窗口底部有一定的距離。如果不設置的話，當拉到最后一個商品時，最后一個商品會被fixed的容器覆蓋。用戶體驗不夠好。
在移動端，一套代碼實現了不同設備的響應式布局，我使用的Media Query最大支持768px。因為我是第一次接觸移動端頁面，移動端淘寶購物車頁面是基於CSS3的Flexbox伸縮布局盒模型實現的，如果有什么不足之處，希望博友指出，抱着學習的態度，本人積極改正。
在移動端上，實現的功能相對簡單，因為手機屏幕小的原因，對很多在pc端存在的元素，在移動端頁面上都進行了相應地做了減法。
ok，大概的項目介紹就到這里。相應功能的介紹我會在接下來的幾篇文章中談及。
感謝大家的閱讀。
轉載請注明出處：http://www.cnblogs.com/Uncle-Keith/p/5929713.html