04面向?qū)ο笳J(rèn)識(shí)js世界階段項(xiàng)目實(shí)戰(zhàn)ajax

1、面向?qū)ο蠡A(chǔ)項(xiàng)目實(shí)戰(zhàn)頁面開發(fā)流程頁面開發(fā)過程設(shè)計(jì)：設(shè)計(jì)師切圖 html css：設(shè)計(jì)師網(wǎng)頁布局調(diào)整 ：制作師前端開發(fā)人員業(yè)務(wù)邏輯：前端開發(fā)工程師：激活公共框架：jquery插件jquery插件復(fù)習(xí)什么是jquery插件？前端開發(fā)編寫通用框架 - 可以使用jquery編寫通用UI組件-可以選擇使用jquery UI插件編寫其他框架：驗(yàn)證，產(chǎn)品價(jià)格計(jì)算，可以使用jquery插件頁面初始化：綁定，事件，性能，安全ajax交互：數(shù)據(jù)獲取，數(shù)據(jù)提交解決思路面向?qū)ο箝_發(fā)分析需要的對象分析每個(gè)對象需要的屬性和方法依次實(shí)現(xiàn)每個(gè)對象面向?qū)ο缶幊蹋ㄖ苯邮褂梅庋b好的方法）思路不要一口吃個(gè)胖子，分成小的，一個(gè)一個(gè)解決

2、比如：綁定數(shù)據(jù)：我們用兩個(gè)函數(shù)封裝：一個(gè)綁定基本信息一個(gè)綁定圖片頁面開發(fā)整體思路先思考頁面初始化需要做的使用：綁定產(chǎn)品相關(guān)綁定購物車相關(guān)然后思考頁面在和用戶交互過程需要做的事情什么是交互如何實(shí)現(xiàn)交互頁面初始化京東首頁：ajax異步加載點(diǎn)擊一個(gè)按鈕鏈接后臺(tái)數(shù)據(jù)庫校驗(yàn)XXXX分析產(chǎn)品我們用json來表示圖片列表綁定簡單的基本信息綁定圖片綁定購物車定義對象綁定交互開發(fā)實(shí)現(xiàn)點(diǎn)擊加入到購物車總結(jié)：解耦合舉例/綁定圖片列表 /*分開的好處：假設(shè)將來我們換個(gè)一個(gè)新的插件*/ /*我們只需要更改這一個(gè)函數(shù)，而其他部分都不用修改*/ /*修改代碼：先找：直接找到某個(gè)對象，然后定位到某個(gè)方法 這樣代碼維護(hù)起來非常方便，其實(shí)代碼量比這個(gè)大1000倍也輕松維護(hù) 當(dāng)你辭職了，你的后繼者也很容易學(xué)習(xí)你的代碼，尋找代碼*/完整項(xiàng)目流程簡介數(shù)據(jù)庫 -表格后臺(tái)從數(shù)據(jù)庫取出數(shù)據(jù)返回給前端-json前端解析數(shù)據(jù)，綁定數(shù)據(jù)ajax復(fù)習(xí)封裝到我們的框架中ajax調(diào)用后臺(tái)數(shù)據(jù)ajax環(huán)境測試使用json模擬后臺(tái)調(diào)用后臺(tái)數(shù)據(jù)綁定并綁定最終完整的案例ajax產(chǎn)品模塊添加trasnform函數(shù)轉(zhuǎn)換目的前后臺(tái)彼此獨(dú)立互不影響編寫購物車ajax json編寫transform實(shí)現(xiàn)購物車功能數(shù)據(jù)分流分流定義有時(shí)候我們將每個(gè)模塊需要的數(shù)據(jù)放在一起形成一個(gè)大的json數(shù)據(jù)然后加載完成以后分流分流的好處減少和服務(wù)器連接