介紹
本人菜鳥,一些自己的淺薄見解,望各位大神指正。
本框架有以下優點
1、簡單(調用簡單、實現簡單、不過度設計)
2、視圖、控制器、模型分離(分離對於維護十分有必要)
3、組件化(每一個mvc模塊兒的實現都是一個組件的實現,M+V+C = 組件)
視圖的分離
在博客園拜讀了許多大神的js文章學到了不少東西,於是有了自己寫一個JS MVC 框架的想法,動手寫了一些東西拿出來和大家分享一下。
眾所周知MVC M模型 C 控制器 V 視圖
以前曾做過把視圖和邏輯分離 算是兩層架構吧
當時的想法是 用html 文件單獨存放html代碼,在需要的時候動態載入,這樣的好處是可以利用cdn加速,因為html代碼是靜態的嘛。
先來看看以前的丑陋代碼
htm+="<div>文章標題</div>" htm+="<div>文章文章內容</div>" htm+="<div>評論列表</div>";
這種代碼很多很長很亂,很多時候美工需要維護這些代碼,這個時候他就犯愁了,誰維護誰犯愁。
用html文件單獨存放這些html的話就省去了拼接,而且維護更容易維護,並且用vs打開的話你會看到完整的格式,管理很好管理。
實現的方式以前是利用jquery 的load 方法把視圖加載到一個頁面的一個隱藏div中,然后就可以給控制器(C)利用了。
視圖大概的樣子
1 <textarea style='display:none' id='view1'> 2 <div>文章標題</div> 3 <div>文章內容</div> 4 <div>評論列表</div> 5 </textarea>
為什么要加textarea 呢 ?因為如果不放到textarea里的話,如果視圖里面有圖片之類的東西,在加載視圖的時候會直接會立即請求圖片,這個加載造成了延時,當時是這么想的,也不知道對不對。
還有一個原因是如果不放到textarea 的話當控制器想頁面創建視圖的以后,同一個視圖其實在頁面就有兩個版本了。感覺不太好。
這樣就達到了視圖和邏輯的分離。他們之間唯一的關系就是控制器通過id來使用視圖,和視圖里面的元素。
后來我對視圖的加載進行了改進,放棄了用load方法加載視圖的做法,因為這樣會污染頁面,該成了直接加載到變量里,把變量綁定到控制器里,這樣會更干凈一些。
其他
若有興趣請關注分類下的其他文章,如果能得到您的支持將不甚感激。