『壹』 js常用設計模式(MVC、MVP、MVVM及其他設計模式)
一、MVC
MVC模式的意思是,軟體可以分成三個部分。
視圖(View):用戶界面。
控制器(Controller):業務邏輯
模型(Model):數據保存
各部分之間的通信方式如下。
View 傳送指令到 Controller
Controller 完成業務邏輯後,要求 Model 改變狀態
Model 將新的數據發送到 View,用戶得到反饋
所有通信都是單向的。
二、互動模式
接受用戶指令時,MVC 可以分成兩種方式。一種是通過 View 接受指令,傳遞給 Controller。
另一種是直接通過controller接受指令。
三、實例:Backbone
實際項目往往採用更靈活的方式,以 Backbone.js 為例。
1. 用戶可以向 View 發送指令(DOM 事件),再由 View 直接要求 Model 改變狀態。
2. 用戶也可以直接向 Controller 發送指令(改變 URL 觸發 hashChange 事件),再由 Controller 發送給 View。
3. Controller 非常薄,只起到路由的作用,而 View 非常厚,業務邏輯都部署在 View。所以,Backbone 索性取消了 Controller,只保留一個 Router(路由器) 。
四、MVP
MVP 模式將 Controller 改名為 Presenter,同時改變了通信方向。
1. 各部分之間的通信,都是雙向的。
2. View 與 Model 不發生聯系,都通過 Presenter 傳遞。
3. View 非常薄,不部署任何業務邏輯,稱為"被動視圖"(Passive View),即沒有任何主動性,而 Presenter非常厚,所有邏輯都部署在那裡。
五、MVVM
MVVM 模式將 Presenter 改名為 ViewModel,基本上與 MVP 模式完全一致。
唯一的區別是,它採用雙向綁定(data-binding):View的變動,自動反映在 ViewModel,反之亦然。 Angular 和 Ember 都採用這種模式。
1、js工廠模式
說明:
在函數中定義對象,並定義對象的各種屬性,雖然屬性可以為方法,但是建議將屬性為方法的屬性定義到函數之外,這樣可以避免重復創建該方法。
引用該對象的時候,這里使用的是 var x = Parent()而不是 var x = new object(); 因為後者可能會出現很多問題(前者也成為工廠經典方式,後者稱之為混合工廠方式),不推薦使用new的方式使用該對象。
在函數的最後返回該對象。
不推薦使用這種方式創建對象,但應該了解。
2、js構造函數模式
說明:
與工廠方式相比,使用構造函數方式創建對象無需在函數內部創建對象,而使用this指代,並而函數無需明確return。
同工廠模式一樣,雖然屬性的值可以為方法,仍建議將該方法定義在函數之外。
同樣的,不推薦使用這種方式創建對象,但仍需了解。
3、js原型模式
說明:
函數中不對屬性進行定義。
利用prototype屬性對屬性進行定義。
同樣的額,不推薦使用這樣的方式創建對象。
4、構造函數+原型的js混合模式(推薦)
說明:
該模式是指混合搭配使用構造函數和原型方式。
將所有的屬性,不是方法的定義在函數中(構造函數的方式),將所有屬性值為方法的利用prototype在函數之外定義(原型方式)。
推薦使用這樣的方式創建對象,這樣有好處。
5、構造函數+原型的動態原型模式(推薦)
說明:
動態原型方式可以理解為混合構造函數,原型方式的一個特例。
該模式中,屬性為方法的屬性直接在函數中進行了定義,但是因為
if(typeof Parent.lev == "undefined"){
Parent.prototype.lev = function(){
return this.name;
}
Parent.lev = true;
}
從而保證創建該對象的實例時,屬性的方法不會被重復的創建。
『貳』 什麼是MVC設計模式,如何使用MVC
MVC是Model,View,Controller的縮寫,MVC是Application開發的設計模式,也就是大家所知道的Model2.在MVC的設計模式中,它包括三類對象:(1)模型(Model)對象:是應用程序的主體部分。(2)視圖(View)對象:是應用程序中負責生成用戶界面的部分。(3)控制器(Control)對象:是根據用戶的輸入,控制用戶界面數據顯示及更新Model對象狀態的部分。即要求在Application開發中你把商業邏輯,界面顯示,數據分離。 MVC應用程序總是由三個部分組成.Event(事件)導致Controller改變Model或View,或者同時改變兩者.只要Controller改變了Models的數據或者屬性,所有依賴的View都會自動更新.類似的,只要Controller改變了View,View會從潛在的Model中獲取數據來刷新自己 MVC模式是一個復雜的架構模式,其實現也顯得非常復雜,但多種設計模式結合在一起,使MVC模式的實現變得相對簡單易行.Views可以看作一棵樹,顯然可以用Composite Pattern來實現.Views和Models之間的關系可以用Observer Pattern體現.Controller控制Views的顯示,可以用Strategy Pattern實現.Model通常是一個調停者,可採用Mediator Pattern來實現. java開發Web Application有幾種符合MVC設計模式的開發方式。 1:Jsp+Servlet+JavaBean(EJB) 2:Jsp+JavaBean(Controller)+JavaBean(EJB)(Model) 3:TDK(Turbine,Velocity...) 4:Xsp 5:Jsp+Struts+JavaBean(EJB)
『叄』 如何設計一個自己的前端MVC框架
對於一些中小型的web應用程序,為了縮短開發周期和降低開發和維護成本,往往會採用一種基本MVC開發模式的框架開發。現在市場上的開發傳統web頁面的JavaScript框架比較多,但是專門對移動應用程序的MVC設計模式的框架比較少。所以開發一套針對移動應用程序的MVC設計模盯衡式的框架還是很有價值的。參考傳統MVC設計模式框架,移動應用框架應該實現以下幾個方面:
MVC的分離
移動應用程序中,model,view,controller得到嚴格的分離,使得應用程序的結構和開發的思路更加清晰,程序的維護更加方便。
數據的更新
Model中的數據與View中數據的雙向更新,當Model中的數據發生變化時,View中的數據隨著發生變化,當View中輸入或修改數據時,Model的數據也會發生變化,省去開發者手動操作數據的變化,避免發生錯誤。
數據的格式化
當Model中的數據需要先格式化再顯示在view中的時候,可以先進行數據格式的轉化。
數據的驗證
當view中輸入數據或者是改變數據的時候,需要驗證數據時,可以先對數據進行驗證,當驗證通過時,才賦給Model中相應的數據。
頁面管理調度
實現各個頁面之間的調度,避免由開發者實現頁面調度而產生的混亂,同時也加快程序的開發速度。
框架的實現與程序的開發離不開JavaScript庫,目前的Javascript庫的形勢也比較尷尬,一方面是傳統的web頁面javascript庫的成熟,一方面卻是針對移動端應用設計開發web應用JavaScript的相對落後,雖然也有幾款優秀的,但是相對體積比較大,而且有時候出了問題也很難跟蹤,所以有必要開發一套專門針對移動端開發的JavaScript庫,使它具有靈活,小巧,功能完善的工具集和UI組件,幫助開發移動端應用的開發者快速工發並容易維護,所以具體需求有以下幾個方面:
事件的支持
DOM2級的臘褲事件使對DOM元素的操作起到了解耦作用,在程序開發的過程中,對程序對象之間的解耦的作用,在程序開發的過程中,對對象之間的解耦也是相當必要的,所以有必要做一個統一的介面,而事件是一個不錯的選擇,而且事件在MVC設計模式的實現中佔有很重要的地位,他既可以使Model,view,controller之間分離解耦,又使他們之間存在內在聯系。
插件機制
一個好的Javascript庫,他應該有自己的靈活完善的插件機制,不僅可以為庫的開發台提供方便,也應該為開發應用程序時提供方便,針對相同的功能開發插件,避免代碼的多次開發。
頁面管理
一個移動應用程序會有很多頁面需要分級管理,這是由移動辦公設備的特性決定的,面對多級與多個頁面,需要一種機制來管理各個頁面之間的關系才而已痛苦誤會頁面的載入時機與載入方法。
動畫的功能
使用移動設置性能的提升與大量移動應用的出現,使用戶對程序的選擇更多。如果程序不能更炫更苦的表現來吸引用戶,那他將難以進入市場,而動畫就是其表現手段之一,所以有必要為開發者提供一套實現動畫的方法,使開發者可以迅速開發能吸引用戶的動畫。
手勢的支持
隨著觸摸移動設備的普及與蘋果公司在它原生IOS應用程序中推出了手勢操作後,人們越來越喜歡這種交互方式了。為了適應這種潮流與提升程序的競爭力,在面向移動應用開發的JavaScript庫中添加手勢的支持是有必要的。
數據的通信
作為一個信息時候的應用程序,數據通信的功能是不可或缺的。雖然Ajax技術提供了數據通信的相應的介面,但是如果每一次的數據通信都要開發者去創建,調用相應的介面,會出現很重復的代碼,而且效率也不高,所以有必要對Ajax數據通信介面進行封裝。
數據的本地化
當應用程序與後台通信取得數據的時候,有些數據是需要保存在本地的,還有一些數據的狀態,以及一些經過運算得到的數據也是需要保留在本地的。這就需要提供一種數據本地化的介面
UI組件
開發者在開發應用程序的時候,常常會遇到一個功能相同的控制項在不現的輪則簡應用程序程序中都會用到,為了提高應用程序的開發效率,縮短開發周期,有必要把一些常用的控制項抽象出來形成組件,供開發者調用
屏幕的適配
隨著移動設備的不斷更新發展,設備屏幕的尺寸與解析度越來越多樣化,這便成了跨平台應用程序「一次開發,多處運行」的最大難題。所以有必要形成一_方案來解決這一問題。
總結
在這所有問題中,事件的擴展,插件機制,頁面的管理,MVC設計模式的實現不僅是重點,也是難點,它們的實現具有以下價值:
事件在web開發中應用已經很廣泛,不過它只有在相應的DOM元素上才有事件,而且MVC設計模式的實現需要事件的驅動,所以需要擴展DOM事件到普通對象上,使它們具有訂閱發布消息功能,且與DOM事件有相同的介面。
插件機制需要代碼的高度抽象化,它是UI組件實現的基礎,它的實現提高了代碼的重復使用。
頁面的管理,它把應用程序按業務邏輯分解為以頁面為單位進行管理,使程序的邏輯結構更加清晰,而且它為MVC框架中頁面的調度實現提供了基礎。
MVC設計模式的實現,即MVC框架的實現,對應用程序開發周期的縮短,開發成本的降低,應用程序後期的維護都會有很大的幫助。