前端設計模式 MVP與MVVM

2022-07-01 14:27:11 字數 2465 閱讀 6642

——墨問蒼生

mvp設計模式:

model:資料層(模組層)

view:檢視層

以下是使用jquery實現的todolist

1

doctype html

>23

<

html

lang

="en"

>

4<

head

>

5<

meta

charset

="utf-8"

>

6<

title

>hello world

title

>

7<

script

src=""

>

script

>

8head

>

9<

body

>

10<

div>

11<

input

id="input"

type

="text"

/>

12<

button

id="btn"

>提交

button

>

13<

ui id

="list"

>

ui>

14div

>

15<

script

>

16function

page()//建構函式

19$.extend(page.prototype,,

23bindevents:

function

() ,

27handlebtnclick:

function

()//點選事件函式

34})

35var

page

=new

page();//宣告page例項

36page.init();

37script

>

38body

>

39html

>

可以看到,由v(檢視層/dom**)發出事件請求到p(控制層/js**),p可以選擇去到m(資料層/模組層)獲取一些資料或者返回結果到v,在mvp體系中,p是最關鍵的一層

mvvm設計模式:

以下是mvvm的**示例:

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>hello world

title

>

<

script

src

= 'vue.js'

>

script

>

head

>

<

body

>

<

div

id>

<

input

type

="text"

v-model

="inputvalue"

/>

<

button

v-on:click

="handlebtnclick"

>提交

button

>

<

ul>

<

li v-for

="item in list"

>}

li>

ul>

div>

<

script

>

var=

newvue(,

//定義按鈕點選事件↓

methods:

},})

script

>

body

>

html

>

可以看見,並沒有直接對dom進行操作,自始至終都只是在對資料進行操作。

資料發生變化,view層就會自己發生改變,這一過程是vm層幫助我們去做的

在mvvm中我們更多的注意力聚集在modle層

總結:mvp是面向dom進行開發、mvvm是面向資料在進行開發

MVP模式與MVVM模式

1 mvp模式 model層 presenter層 view 層 model層 資料層 ajax請求 view層 檢視層,頁面上的dom展示 jquery 的編寫就屬於mvp模式 提交 button ul id list ul div script function page extend page...

MVP設計模式

建立ipresenter介面,把所有業務邏輯的介面都放在這裡,並建立它的實現presentercompl 在這裡可以方便地檢視業務功能,由於介面可以有多種實現所以也方便寫單元測試 建立iview介面,把所有檢視邏輯的介面都放在這裡,其實現類是當前的activity fragment activity...

MVVM設計模式

mvvm是model view viewmodel的簡寫。微軟軟體 ui層更加細節化 可定製化。同時,在技術層面,wpf也帶來了 諸如binding dependency property routed events command datatemplate controltemplate等新特性。...