前言
今天搞的有點快,因為上午簡單研究了下MVC,發現MVC不太適合前端開發,然後之前看幾位前端前輩都推薦前端使用MVVM,但是我對其還不甚瞭解,所以我覺得下午還是應該先看看他是神馬先,後面再決定要不要繼續深入下去。
神馬是MVVM?
借用我們百科一張美圖,所謂MVVM就是model-view-viewmodel模型。
他是微軟帶來的一項新的技術體驗,最先用於WPF,最後發現其模式對前端開發尤其比較合適,所以便在前端流行起來了。
MVVM是對MVC的一個改進,用以適應當代Web開發。
model為資料或者商務邏輯,完全與UI無關,它儲存了狀態並對問題領域做出處理,model可以寫在代碼裡面或者用json表示、或者資料表中,反正他就是資料啦。
view表示可見元素,按鈕、標籤、圖片等,我們可能會對各個標籤綁定事件,但是我們知道這其實是原來controller該做的事情。
簡單例子中view被直接綁定到model,model的一些部分只是簡單單向綁定顯示在view中。
PS:以上至於你們懂不懂,反正我是不懂了。。。用幾個字形容就是模模糊糊
因為光是讀概念無法瞭解到實質,所以我們來看看其使用吧!
Knockout
之前我們在寫datalist的時候就有朋友提到這個東西,我當時也沒有怎麼關注,現在一起來看看吧:
knockout是一個輕量級UI庫,通過應用MVVM(主角)模式使javascript前端UI簡單化:
聲明式綁定(declarative bindings)使用簡單的文法將模型model資料關聯到dom元素上UI介面自動重新整理(automatic ui refresh)當模型狀態發生改變(model state),UI自動更新依賴跟蹤(dependency tracking)為轉變聯合資料,在你的模型資料之間建立隱式關係模板(templating)為模型資料快速編寫可嵌套的UI
根據以上描述,我們來跟進一番:
Knockout是一個以資料模型(data model)為基礎的能夠協助你建立富文本,影響顯示和編輯使用者介面的javascript類庫。
任何時候若是UI需要更新,knockout能夠簡單的協助你實現並且容易維護。
但是究竟這個傢伙是個神馬呢?我也不知道,所以來試試吧。
初探knockout水深
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 5 <script src="js/knockout-2.2.0.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 var piliPerson = [ 8 { name: '葉小釵', desc: '刀狂劍癡', weapon: '刀劍' }, 9 { name: '素還真', desc: '清香白蓮', weapon: '劍' },10 { name: '一頁書', desc: '百世經綸', weapon: '掌' }11 ];12 $(document).ready(function () {13 var viewModel = {};14 ko.applyBindings(viewModel);15 });16 17 </script>18 </head>19 <body>20 <select data-bind="options: piliPerson, optionsText: 'name'">21 </select>22 </body>23 </html>
PS:葉大俠之前寫了一個dropdownlist與datalist的功能,好像與他有點類似呢:)
我們再拓寬:
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 5 <script src="js/knockout-2.2.0.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 var piliPerson = [ 8 { name: '葉小釵', desc: '刀狂劍癡', weapon: '刀劍', key: 'yxc' }, 9 { name: '素還真', desc: '清香白蓮', weapon: '劍', key: 'shz' },10 { name: '一頁書', desc: '百世經綸', weapon: '掌', key: 'yys' }11 ];12 $(document).ready(function () {13 var viewModel = {14 //observable是一個KO的基礎概念,UI可健康(observe)他的值,並且回應他的變化15 //這裡相當於設定了其選擇項,當前選擇的素還真16 choseObj: ko.observable(piliPerson[1])17 };18 ko.applyBindings(viewModel);19 });20 21 </script>22 </head>23 <body>24 <select data-bind="options: piliPerson, optionsText: 'name', value: choseObj">25 <option ></option>26 </select>27 選擇了:<span data-bind="text: choseObj().name"></span>28 </body>29 </html>
這個例子很精彩,我們選擇後,選擇結果會馬上體現出來,初始化當然也是對的:
比較神奇的是,我們可以在標籤裡面使用函數了,和最初的.net越來越靠近了:
function formatStr(name) { return name ? '霹靂人物:' + name : '';}<span data-bind="text: formatStr(choseObj().name)"></span>
PS:在此小葉子已經認識到了knockout的強大了,小葉子寫的那個算是玩具吧。
PS2:我感覺如此使用後,對jquery的依賴降低了哦
驚歎
使用了KO後,似乎我資料模型發生改變了,可能會發生級聯反應哦,曾經可能需要手動操作的事情,現在ko幫我們做了!!!
結語
經過今天的學習,雖然沒能完全瞭解MVVM是什麼,但是也有所增長,更是發現了ko這個神器,真是不錯。
但是,因為我們最近的學習重點,是我們的小視窗,所以這裡ko暫時放下,在我們小視窗靠一段落後,我們一起來學習ko先!