JavaScript MVC 學習筆記（一）初識JS MVC

xorpay 發布于2019-08-22 10:55 / 1871人閱讀

摘要：以基于的富應用開發為主要學習資料。下面用實現一個例子使用匿名函數來封裝一個作用域在頁面加載時綁定事件監聽上面的代碼創建了控制器，這個控制器是放在變量下的命名空間。然后用了一個匿名函數封裝了一個作用域，以避免對全局作用域造成污染。

公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。

什么是MVC

MVC 是一種設計模式，它將應用劃分為3個部分：數據（模型）、展現層（視圖）、用戶交互層（控制器）。一個事件的發生是這樣的過程：

用戶和應用產生交互

控制器的事件處理器被觸發

控制器從模型中請求數據，并將其交給視圖

視圖將數據呈現給用戶

模型

模型用來存放應用的所有數據對象。

模型不必知曉視圖和控制器的細節，模型只需包含數據及直接和這些數據相關的邏輯。

任何事件處理代碼、視圖模板，以及那些和模型無關的邏輯都應當隔離在模型之外。將模型和視圖的代碼混在一起，是違反MVC架構原則的。模型是最應該從你的應用中解耦出來的部分。

當控制器從服務器抓取數據或創建新的記錄時，它就將數據包裝成模型實例。也就是說，我們的數據是面向對象的（object oriented），任何定義在這個數據模型上的函數或邏輯
都可以直接被調用。

因此，不要這樣做：

var user = users["foo"];
destroyUser(user);

上面的代碼沒有命名空間的概念，并且不是面向對象的。如果在應用中定義了另一個destoryUser()函數的話，兩個函數就會產生沖突。我們應當確保全局變量和函數的個數盡可能少.

而要這樣做：

var user = User.find("foo");
user.destroy();

上面的代碼中，destory()函數是存放在命名空間User的實例中的。這種代碼更加清晰，而且非常容易做繼承，類似destory()的這種函數就不用在每個模型中都定義一遍了。

視圖

視圖層是呈現給用戶的，用戶與之產生交互。在JavaScript 應用中，視圖大都是由HTML、CSS和JavaScript模板組成的。除了模板中簡單的條件語句之外，視圖不應當包含任何其他邏輯。

這并不是說MVC不允許包含視覺呈現相關的邏輯，只要這部分邏輯沒有定義在視圖之內即可。我們將視覺呈現邏輯歸類為“視圖助手”（helper）：和視圖有關的獨立的小型工具函數。

反例——formatDate()函數直接插入視圖：

// template.html

    

    ${ formatDate(this.date) }

應該這樣做——所有視覺呈現邏輯都包含在helper變量中，這是一個命名空間，可以防止沖突并保持代碼清晰、可擴展：

// helper.js
var helper = {};
helper.formatDate = function(){ /* ... */ };

// template.html

    ${ helper.formatDate(this.date) }

控制器

控制器是模型和視圖之間的紐帶。控制器從視圖獲得事件和輸入，對它們進行處理（很可能包含模型），并相應地更新視圖。當頁面加載時，控制器會給視圖添加事件監聽，比如監聽表單提交或按鈕點擊。然后，當用戶和應用產生交互時，控制器中的事件觸發器就開始工作了。

下面用jQuery實現一個例子：

var Controller = {};

// 使用匿名函數來封裝一個作用域
(Controller.users = function($){

    var nameClick = function(){
        /* ... */
    };

    // 在頁面加載時綁定事件監聽
    $(function(){
        $("#view .name").click(nameClick);
    });
})(jQuery);

上面的代碼創建了users控制器，這個控制器是放在Controller變量下的命名空間。然后用了一個匿名函數封裝了一個作用域，以避免對全局作用域造成污染。當頁面加載時，程序給視圖元素綁定了點擊事件的監聽。

GPU云服務器云服務器 _JavaScript_MVC js+mvc mvc js 數據 js mvc 引入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91460.html

Backbone.js學習筆記（一）

摘要：它通過數據模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現有的通過接口進行交互。本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...

FrancisSoung 2019-08-21 10:21 評論0 收藏0
初識React

摘要：初識依稀記得那年參加線下活動，第一次聽說這個詞語，當時的主講人是郭達峰，他播放了一個關于及的性能對比視頻。合成事件會以事件委托的方式綁定到組件最上層，并且在組件卸載的時候自動銷毀綁定的事件。初識React 依稀記得2015那年參加線下活動，第一次聽說React這個詞語，當時的主講人是郭達峰，他播放了一個關于ember、angular及react的性能對比視頻： React.js Co...

kuangcaibao 2019-08-21 14:47 評論0 收藏0
JavaScript MVC 學習筆記（四）類的使用(下)

摘要：基于函數進行調用的，用來確保函數是在指定的值所在的上下文中調用的。添加私有函數目前上面為類庫添加的屬性都是公開的，可以被隨時修改。以基于的富應用開發為主要學習資料。控制類庫的作用域在類和實例中都添加proxy函數，可以在事件處理程序之外處理函數的時候保持類的作用域。下面是不用proxy的辦法： var Class = function(parent){ var klas...

Rango 2019-08-21 10:25 評論0 收藏0
JavaScript MVC 學習筆記（六）模型之ORM

摘要：模型應當從視圖和控制器中解耦出來。與數據操作和行為相關的邏輯都應當放入模型中，通過命名空間進行管理。在應用中，對象關系映射也是一種非常有用的技術，它可以用來做數據管理及用做模型。以基于的富應用開發為主要學習資料。 MVC 和命名空間要確保應用中的視圖、狀態和數據彼此清晰分離，才能讓架構更加整潔有序且更加健壯。模型應當從視圖和控制器中解耦出來。與數據操作和行為相關的邏輯都應當放入模型...

mrcode 2019-08-22 10:56 評論0 收藏0
JavaScript MVC 學習筆記（三）類的使用（中）

摘要：實際上，可以將其理解為某種形式的繼承。如果上下文是，則使用全局對象代替。例如的第個參數是上下文，后續是實際傳入的參數序列中允許更換上下文是為了共享狀態，尤其是在事件回調中。公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。接上一篇類的學習，發現實在是看暈了，有些例子是能看懂在干嘛，但是不知道為什么這樣做，有的甚至...

DandJ 2019-08-22 10:56 評論0 收藏0