成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript MVC 學(xué)習(xí)筆記（一）初識(shí)JS MVC

xorpay / 1879人閱讀

摘要：以基于的富應(yīng)用開發(fā)為主要學(xué)習(xí)資料。下面用實(shí)現(xiàn)一個(gè)例子使用匿名函數(shù)來封裝一個(gè)作用域在頁面加載時(shí)綁定事件監(jiān)聽上面的代碼創(chuàng)建了控制器，這個(gè)控制器是放在變量下的命名空間。然后用了一個(gè)匿名函數(shù)封裝了一個(gè)作用域，以避免對(duì)全局作用域造成污染。

公開記錄學(xué)習(xí)JS MVC，不知道能堅(jiān)持多久= =。以《基于MVC的JavaScript web富應(yīng)用開發(fā)》為主要學(xué)習(xí)資料。

什么是MVC

MVC 是一種設(shè)計(jì)模式，它將應(yīng)用劃分為3個(gè)部分：數(shù)據(jù)（模型）、展現(xiàn)層（視圖）、用戶交互層（控制器）。一個(gè)事件的發(fā)生是這樣的過程：

用戶和應(yīng)用產(chǎn)生交互

控制器的事件處理器被觸發(fā)

控制器從模型中請(qǐng)求數(shù)據(jù)，并將其交給視圖

視圖將數(shù)據(jù)呈現(xiàn)給用戶

模型

模型用來存放應(yīng)用的所有數(shù)據(jù)對(duì)象。

模型不必知曉視圖和控制器的細(xì)節(jié)，模型只需包含數(shù)據(jù)及直接和這些數(shù)據(jù)相關(guān)的邏輯。

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

當(dāng)控制器從服務(wù)器抓取數(shù)據(jù)或創(chuàng)建新的記錄時(shí)，它就將數(shù)據(jù)包裝成模型實(shí)例。也就是說，我們的數(shù)據(jù)是面向?qū)ο蟮模╫bject oriented），任何定義在這個(gè)數(shù)據(jù)模型上的函數(shù)或邏輯
都可以直接被調(diào)用。

因此，不要這樣做：

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

上面的代碼沒有命名空間的概念，并且不是面向?qū)ο蟮摹Ｈ绻趹?yīng)用中定義了另一個(gè)destoryUser()函數(shù)的話，兩個(gè)函數(shù)就會(huì)產(chǎn)生沖突。我們應(yīng)當(dāng)確保全局變量和函數(shù)的個(gè)數(shù)盡可能少.

而要這樣做：

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

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

視圖

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

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

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

// template.html


    

    ${ formatDate(this.date) }

應(yīng)該這樣做——所有視覺呈現(xiàn)邏輯都包含在helper變量中，這是一個(gè)命名空間，可以防止沖突并保持代碼清晰、可擴(kuò)展：

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

// template.html


    ${ helper.formatDate(this.date) }
控制器

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

下面用jQuery實(shí)現(xiàn)一個(gè)例子：

var Controller = {};

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

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

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

上面的代碼創(chuàng)建了users控制器，這個(gè)控制器是放在Controller變量下的命名空間。然后用了一個(gè)匿名函數(shù)封裝了一個(gè)作用域，以避免對(duì)全局作用域造成污染。當(dāng)頁面加載時(shí)，程序給視圖元素綁定了點(diǎn)擊事件的監(jiān)聽。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91460.html

相關(guān)文章

  • Backbone.js學(xué)習(xí)筆記（一）

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

    FrancisSoung 評(píng)論0 收藏0

  • 初識(shí)React

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

    kuangcaibao 評(píng)論0 收藏0

  • JavaScript MVC 學(xué)習(xí)筆記（四）類的使用(下)

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

    Rango 評(píng)論0 收藏0

  • JavaScript MVC 學(xué)習(xí)筆記（六）模型之ORM

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

    mrcode 評(píng)論0 收藏0

  • JavaScript MVC 學(xué)習(xí)筆記（三）類的使用（中）

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

    DandJ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<