摘要:當前前端最火熱的框架當屬,在學習之前先來看下的內部是如何工作的。我們從最基本的頁面操作開始做起。書籍數量加減清零把占位符替換成數據事件相關的交給操作,有兩個重要的屬性初始化時需要傳入兩參數和,后面操作的都是在的都是在身上,而不是直接操作。
當前前端最火熱的框架當屬 VUE,在學習 VUE 之前先來看下 VUE 的內部是如何工作的。
我們從最基本的頁面操作開始做起。
用 jQuery 操作頁面我們來實現一個頁面,當點擊按鈕式,頁面上的數字增加或減少
書籍:《JavaScript高級程序設計》 數量:2
用 jQuery 操作它很容易實現需求
let log = console.log.bind(console) //把console.log 替換成 log 少打點代碼 $(".addOne").on("click",()=>{ let oldHtml = $(".number").text() let newHtml = oldHtml -0 +1 $(".number").html(newHtml) }) $(".minusOne").on("click",()=>{ let oldHtml = $(".number").text() let newHtml = oldHtml -0 -1 $(".number").html(newHtml) }) $(".reset").on("click",()=>{ $(".number").text("0") })axios 實現 ajax
我們真實的需求是,當點擊按鈕時,操作的時數據庫里的數據,而不是直接在頁面中操作。
這里引入一個庫axios,可以實現在前端模擬后臺,它有一個重要的 API:interceptors,可以實現在它上面 Mock 數據
// 我們要的數據 let book = { name:"JavaScript高級程序設計", number:2, id:"" } axios.interceptors.response.use((response)=>{ //下面這句等價于 let {url,method,data} = response.config let {config:{url,method,data}} = response // 這里的 data 是請求體 if(url === "/book/1" && method === "get"){ response.data = book //這里的 data 是響應體 }else if(url === "/book/1" && method === "put"){ data = JSON.parse(data) Object.assign(book,data) //請求體 data,assign可實現局部更新 response.data = book //響應體 data } return response })
頁面中的數據我們應該用占位符代替,數據獲取到之后 更新到頁面中
//剛進入頁面后的數據加載 axios.get("/book/1").then(({data})=>{ let oldHtml = $(".app").html() let newHtml = oldHtml.replace("__name__",data.name) .replace("__number__",data.number) //用真實數據替換占位符 $(".app").html(newHtml) }) $(".app").on("click",".addOne",()=>{ let oldNumber = $(".number").text() let newNumber = oldNumber -0 +1 axios.put("/book/1",{number:newNumber}).then(({data})=>{ //請求時更新最新數據 $(".number").html(data.number) }) }) $(".app").on("click",".minusOne",()=>{ let oldNumber = $(".number").text() let newNumber = oldNumber -0 -1 axios.put("/book/1",{number:newNumber}).then(({data})=>{ $(".number").html(data.number) }) }) $(".app").on("click",".reset",()=>{ axios.put("/book/1",{number:0}).then(({data})=>{ $(".number").html(data.number) }) })
這樣的意大利面條似的寫法,非常不利于后期維護,我們應該用 MVC 優化下
用 MVC 優化獲取數據,更新數據的事情交個model去做,model里面有三個屬性:data,fetch,updata;分別用來:data負責存儲最新數據,fetch負責頁面加載時向服務器獲取數據,并將數據存儲到data中,updata負責實時頁面操作時,更新頁面數據,并將最新數據保存到data中。
let model ={ data:{ //model 內部用來存儲數據 name:"", number:0, id:"" }, fetch(id){ return axios.get(`/books/${id}`).then((response)=>{ this.data = response.data //加載更新向 axios 獲取的數據 return response }) }, updata(id,data){ return axios.put(`/books/${id}`,data).then((response)=>{ this.data = response.data //點擊按鈕向 axios 獲取最新數據,請求中的 data 是最新數據 return response }) } }
操作頁面交給view,view有三個屬性,分別是el、template、render;el負責視圖部分,也就是你需要操作的 DOM,template是虛擬的html,并通過render去渲染。
let view = { el:".app", template:``, render(data){ let newHtml = this.template.replace("__name__",data.name) .replace("__number__",data.number) //把占位符替換成數據 $(this.el).html(newHtml) } }書籍:《__name__》 數量:__number__
事件相關的交給controller操作,有兩個重要的屬性:init、bingEvents;初始化時需要傳入兩參數view和model,后面操作的都是在的view、model都是在controller身上,而不是直接操作model。
let controller = { init({view,model}){ this.view = view this.model = model this.bindEvents() this.model.fetch(1).then(()=>{ view.render(this.model.data) }) }, bindEvents(){ $(this.view.el).on("click",".addOne",this.addOne.bind(this)) //這里 addOne 內部的 this 應該是點擊的那個元素,所以這里要綁一下 this $(this.view.el).on("click",".minusOne",this.minusOne.bind(this)) $(this.view.el).on("click",".reset",this.reset.bind(this)) }, addOne(){ console.log(1) let oldNumber = $(".number").text() console.log(2) let newNumber = oldNumber -0 +1 console.log(3) this.model.updata(1,{number:newNumber}).then(()=>{ $(".number").html(this.model.data.number) }) console.log(4) }, minusOne(){ let oldNumber = $(".number").text() let newNumber = oldNumber -0 -1 this.model.updata(1,{number:newNumber}).then(()=>{ $(".number").html(this.model.data.number) }) }, reset(){ this.model.updata(1,{number:0}).then(()=>{ $(".number").html(this.model.data.number) }) } } controller.init({view:view,model:model})優化 MVC
現在是一個頁面,這也寫沒有關系,但如果有很多頁面,每個頁面中的view、model、controller都重復了,這里把一些公用的方法寫在原型上。
在頁面中使用model,只需要傳遞兩參數
function Model({data,resouce}){ this.data = data this.resouce = resouce } Model.prototype.updata = function(id,data){ return axios.put(`/${this.resouce}s/${id}`,data).then((response)=>{ this.data = response.data return response }) } Model.prototype.fetch = function(id){ return axios.get(`/${this.resouce}s/${id}`).then((response)=>{ this.data = response.data return response }) } let model = new Model({ data:{ name:"", number:0, id:"" }, resouce:"book" })
view也是,頁面使用時,傳兩個參數就 ok 了
function View({el,template}){ this.el = el this.template = template } View.prototype.render = function(data){ let html = this.template for(let key in data){ //遍歷傳進來的參數,用循環替換頁面中的占位符 html = html.replace(`__${key}__`,data[key]) } $(this.el).html(html) } let view = new View({ el:".app", template:`` })書籍:《__name__》 數量:__number__
Controller公用的方法比較少,這里就沒有優化了
VUE理解了 MVC 之后再來看 VUE 就會很簡單,VUE 簡單來說就是 MVC 中的 V,但它和 MVC 有點區別,就是它需要model中的數據
let view = new Vue({ el:".app", data:{ book:{ name:"我是書籍", number:0, id:"" }, n:1 }, template:`` }書籍:《{{book.name}}》 數量:{{book.number}}
VUE 會把data里的屬性提升為 Vue 的屬性,所以下面操作可以直接用Vue.name操作,而不是寫Vue.data.name,所以我們可以在這些屬性外面套一層book,用Vue.book就可以對這些屬性進行批量操作。
Vue沒有render方法,那你會說它怎么實現渲染頁面呢?
它提供了一個叫created的方法,在里面直接修改Vue的data屬性,它就會自動幫你渲染頁面
created(){ model.fetch(1).then(()=>{ this.book = model.data })
當然 VUE 的野心不止于此 ,它甚至幫你省下controllor,你都不需要進行事件綁定
它在template,v-on:click的一個方法,它會幫你調用methods中的方法,你只需要將點擊執行的函數寫在上面即可。
methods:{ addOne(){ model.updata(1,{number:this.book.number + (this.n-0)}) .then(()=>{ this.book = model.data }) }, minusOne(){ model.updata(1,{number:this.book.number - (this.n-0)}) .then(()=>{ this.book = model.data }) }, reset(){ model.updata(1,{number:0}) .then(()=>{ this.book = model.data }) } }
學會了 MVC 之后在來看 VUE,就變的很簡單
MVVMVUE 還實現另一個雙向綁定的功能,我現在點擊按鈕只能+1或-1,如果我要實現操作+n或減n呢?
這里用input實現,在按鈕上面添加一行
N的值是{{n}}
當然Vue的data中也要添加一個n
當你在input中輸入相應值時,后面N的值會相應變化,這就是 MVVM。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97004.html
摘要:我是一個從,,到的比較常規的技術棧過渡過程。第一授權,微信授權分為靜默授權和彈皮授權目的就是獲取用戶信息取得用戶的唯一以便業務的開發。 我也是一個經歷過柴米油鹽醬醋茶、嘗過酸甜苦辣咸的前端程序員。知道前端的東西入門簡單,有深度卻很難;表似好看無比的應用,其實背后邏輯復雜,然而要想成長的更快,一定要學會站在巨人的肩膀上,學以師技以自長。所以一些經驗非常可貴,在此我想和大家分享一下我的經驗...
摘要:的出現真可謂是前端界的福音,正與之宗旨所說,。據統計,目前世界上有的項目使用了。技術棧學習路線直到前段時間筆者的朋友給推薦了一個,真是欣喜若狂也更加堅定了自己在繼續前進的想法。這是一個外國友人總結的一套技術棧學習路線,先給傳送門。 我相信點進來的同學都是沖著標題來的,當然本文也不會讓各位失望。不過在正式介紹標題所述的內容之前,我們不妨先放下技術,一起回顧下自己做前端技術的心路歷程。 前...
閱讀 578·2023-04-25 21:29
閱讀 1104·2023-04-25 21:27
閱讀 1044·2021-11-25 09:43
閱讀 1077·2021-09-29 09:43
閱讀 3614·2021-09-03 10:30
閱讀 2854·2019-08-29 15:26
閱讀 2803·2019-08-29 12:52
閱讀 1741·2019-08-29 11:10