795
實現一個購物網站的首頁的js代碼
- 使用text 和 css 可以解析 html 內容和 css 內容
- 語法是 text! + 路徑 這個導出是 xxx.html 文件的內容
- $css! + 路徑 ， 這個不需要導出，自動會渲染到當前引入的當前頁麵中 ``` difine(['swiper','template','flyer'],function(swiper,template,flyer){最外層})
仿寫：在實際工作中有待考慮
define(['text!./home.html','$css!./home.css'],function(html){下一層 })
# function request () {第二層 }
## $.ajax({ 第三層 }) 這裏可以寫好備注 ： xxx數據
### 第三層：
* type:"get",
* url:"https://xxx.xxx.xxxx/xxx/xx.php",
* success : function(data){ }
#### 第四層：
* var result = JSON.parse(data);
* var slide = result.data.slide;
* var html = '';
* for(var i = 0;i < slide.length;i++){ 第五層 }
* $('#banner').html(html);
* swiperFn();
##### 第五層：
html +='<div ><img src="'+slide[i].activity.img+'" /></div>
******
之後又回到第二層寫新的數據，在第四層和第五層進行修改。
#### 第四層修改部分
* var menu = result.data.menu;
* var html = '';
* for(var i in menu){第五層}
* $('.menu ul').html(html);
##### 第五層寫法：為了展現"<"故意去掉
* var activity = menu[i].activity;
* html +='li>'+
* 'img src="'+activity.img+'" />'+
* 'p>'+activity.name+'/p>'+
* '/li';
## 心得體會：
描述清楚每一層要做什麼！其實也是理清思路的過程，這裏麵有用到像ajax
get 請求 訪問一個php文件。
在下麵寫函數 可以通過json文件請求。並且運用了指針指向 運用了堆和棧的關係。
單雙引號問題，做了一個拚接。
把空字符串賦值給變量。
在做首頁的時候：我會考慮幾點：
1. 輪播圖數據
2. 菜單數據
3. 熱賣數據
4. 瘋狂秒殺
5. 瘋狂秒殺數據
6. 瘋狂秒殺倒計時
7. 瘋狂秒殺即將開搶判斷
8. 搜索頁麵
9. 掃一掃頁麵
10. 獲取本地購物車存儲的數據
11. 購物車數量增加
12. 點擊“加號”時實現動畫效果
13. 封裝一個購物車數量總量的函數
14. 封裝一個數量變化特別大的函數
整合起來。前期回顧：
function request(){...}
## 封裝一個數量變化字體變大的函數（第一層）
function request(){...}
function Big(){...};
function swiperFn(){...}
return {"request":request...}
### 封裝一個數量變化特別大的函數展開式
funtion Big() {
* $('.circle').addClass('span_active');
* setTimeout(function(){...},1000)};
* $('.circle').removeClass('span_active')
function swiperFn(){
* var mySwiper = new Swiper('.swiper-container',{...});
* loop : true,
* autoplay: 2000,
* autoplayDisableOnInteraction : false,
* pagination: '.swiper-pagination'
}
return {"request" : request}
});
最後更新：2017-04-07 21:23:50