介紹

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

本框架有以下優點

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)利用了。

檢視大概的樣子

 <textarea style='display:none' id='view1'>
<div>文章標題</div>
<div>文章內容</div>
<div>評論列表</div>
</textarea>

為什麼要加textarea 呢 ?因為如果不放到textarea裡的話,如果視圖裡面有圖片之類的東西,在載入檢視的時候會直接會立即請求圖片,這個載入造成了延時,當時是這麼想的,也不知道對不對。

還有一個原因是如果不放到textarea  的話當控制器想頁面建立檢視的以後,同一個檢視其實在頁面就有兩個版本了。感覺不太好。

這樣就達到了檢視和邏輯的分離。他們之間唯一的關係就是控制器通過id來使用檢視,和視圖裡面的元素。

後來我對檢視的載入進行了改進,放棄了用load方法載入檢視的做法,因為這樣會汙染頁面,該成了直接載入到變數裡,把變數繫結到控制器裡,這樣會更乾淨一些。

其他

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