IceMx.Mvc 我的js MVC 框架 一、html代碼的分離(視圖)


介紹

本人菜鳥,一些自己的淺薄見解,望各位大神指正。

本框架有以下優點

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方法加載視圖的做法,因為這樣會污染頁面,該成了直接加載到變量里,把變量綁定到控制器里,這樣會更干凈一些。

其他

若有興趣請關注分類下的其他文章,如果能得到您的支持將不甚感激。 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM