MVC與Backbone.js的demo簡析

時間 2019-11-07

標籤 mvc backbone.js backbone demo 欄目 JavaScript 简体版

原文原文鏈接

MVC簡介

MVC是一種軟件設計模式，它將應用程序分爲Model、View、Controller三個部件，能夠有效地將業務邏輯和數據顯示分離。 javascript

Model包括算法實現、數據管理和數據庫設計等。Model與數據格式無關，對返回的數據不進行格式化，因此一樣的構建能被不一樣的界面使用，加強了代碼的複用性。 css

View是由界面設計人員進行圖形界面設計，遵循單一職責原則，不進行數據處理，只是做爲一種輸出數據並容許用戶操縱的方式，使應用程序可以處理多個不一樣頁面。 html

Controller負責轉發請求，針對用戶輸入，對請求進行處理，調用相應的Model和View。前端

MVC的大體流程以下：

1.用戶在View上進行操做； java

2.Controller處理這個操做； git

3.Controller經過Model對數據進行增刪改查，將其傳遞到View； github

4.View將數據展示給用戶。 web

Backbone.js簡介

Web前端在變得愈來愈複雜，不只在交互體驗上須要編寫大量 JS代碼，甚至不少業務邏輯都被搬到了前端。爲了良好地組織這龐大的JS代碼，能夠利用一些現成的JS框架。而Backbone.js就是一套大體符合MVC構架的JavaScript框架與RESTfulJSON的應用程式接口。它以輕量爲特點。算法

粗略解釋一下：model表明一個數據模型，models中的數據能夠建立、校驗、銷燬和保存到服務端。collection是模型的一個集合，和咱們平時接觸的JAVA集合類類似，具備增長元素，刪除元素，獲取長度，排序，比較等一系列工具方法。而view能夠綁定DOM和客戶端事件是用來處理頁面以及簡單的頁面邏輯的。數據庫

Backbone.js經過Models進行key-value綁定及custom事件處理，經過Collections提供一套豐富的API用於枚舉功能，經過Views來進行事件處理及與現有的Application經過RESTfulJSON接口進行交互。

如下是一些與backbone.js相關的技術資源：

http://documentcloud.github.com/backbone官網

http://backbonetutorials.com/ 簡明教程

http://weakfi.iteye.com/blog/1391990

http://blog.csdn.net/soasme/article/details/6581029

http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html

SPA簡介

SPA，Single PageApplication，即「單頁應用程序」，是指用戶經過瀏覽器加載獨立的HTML頁面而且無需離開此導航頁面。SPA單頁應用程序能夠保證跨平臺應用程序的穩定性，並且對於內容的改動不須要加載整個頁面，給用戶帶來了很是好的使用體驗，同時對服務器壓力很小，消耗更少的帶寬。

單頁Web應用程序的結構很簡單：首先傳遞HTML文檔框架；而後使用JavaScript修改頁面；緊接着再從服務器傳遞更多數據而後再修改頁面，如此循環。

開發單頁Web應用利器包括Backbone.js，Ember.js，Angular.js以及Meteor。國外如Gmail和Google Docs，Twitter和Facebook等大型網站都使用了SPA元素。

國內成熟的SPA應用有豆瓣的阿爾法城、新版的有道筆記 Web 版等。

前端MVC實踐

（1）Todos

Todos是一個使用backbone實現經典MVC案例，demo地址： http://localtodos.com

首先，觀察界面可知，主要有如下四個功能：

（1）添加任務

（2）修改任務內容或狀態

（3）刪除任務

（4）統計任務完成狀況

觀察源代碼，分析數據模型，看其model層。基本的Todo Model 有title、order、done三種屬性。而後是Todo Collection，是Todo對象的集合，數據經過localStorage存儲在本地。

接下來使人較爲費解的是使用了兩個view模型，這是爲了讓數據展現和數據操做相分離。TodoView的做用是監聽Todo Model的改變，對數據自己進行管理，展現數據模型中的數據到界面。AppView的功能是顯示全部任務列表，並顯示總體的列表狀態，如完成多少，未完成多少等，是對總體的一個控制。爲了更好地瞭解這個demo，推薦一個Backbone.js的中文API 網站http://www.csser.com/tools/backbone/backbone.js.html 。

原創代碼框圖以下：

此外，在http://todomvc.com上有用各類不一樣框架實現的Todos，並進行了優劣比較，這讓我想起了之前的一篇關於12種JavaScript MVC框架之比較的博文，附上地址http://www.infoq.com/cn/news/2012/05/js-mvc-framework/。

（2）hellorocket

先簡單介紹一下Rocket框架。這個框架特別適用但不只限於Mobile HTML5 SPA開發，具備易維護、支持多人開發、高性能等優勢。盜圖兩張：

hellorocket是一個相似於ppt展現的網站，觀察頁面源代碼能夠發現：

<!DOCTYPE html>

<html>

<head>

<title>hellorocket-2.0</title>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>

<metaname="viewport"content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

<metaname="format-detection"content="telephone=no"/>

<metaname="apple-mobile-web-app-status-bar-style"content="white"/>

<linkrel="stylesheet"type="text/css"href="./css/hellorocket-aio.css"/>

</head>

<body>

<divid="wrapper"class="news">

</div>

</body>

</html>

rocket.init();

</script>

body區域裏僅靠一個div來大體區分頁面顯示，在瀏覽過程當中，是view監聽了用戶輸入實踐而後調用不一樣的models來動態生成的。

調用的有

/tpl/globalloading.tpl.html

/tpl/pageloading.tpl.html

/page/index/html/index.html

/page/sayhello/html/sayhello.html

/page/index/tpl/index.tpl.html

/page/sayhello/tpl/sayhello.tpl.html

學習中的困惑

（1）因爲初次接觸MVC，對其瞭解仍有很深的侷限性。在瞭解中令我感到最大困惑的就是view和controller的區分。雖然在概念理論上能夠很清晰地定義，但在實際項目中徹底不是這樣。view的做用就是對用戶輸入進行監聽並做出相關反應，這就決定了view和controller是高度耦合的，如上面的實例todos中就使用了兩個view來將數據展現和數據操做相分離，這是否是有點增長複雜度的感受？

（2）關於Backbone.js，我以爲它的view包含了MVC框架中的VC，並且在綁定dom的操做上和有關於router的使用上還不瞭解，但願課程能對有關方面做出詳細的講解。

相關標籤/搜索

backbone.js+require.js+bootstrap

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。