JavaScript MVC 學習筆記（六）模型之ORM

mrcode 發布于2019-08-22 10:56 / 948人閱讀

摘要：模型應當從視圖和控制器中解耦出來。與數據操作和行為相關的邏輯都應當放入模型中，通過命名空間進行管理。在應用中，對象關系映射也是一種非常有用的技術，它可以用來做數據管理及用做模型。以基于的富應用開發為主要學習資料。

MVC 和命名空間

要確保應用中的視圖、狀態和數據彼此清晰分離，才能讓架構更加整潔有序且更加健壯。模型應當從視圖和控制器中解耦出來。與數據操作和行為相關的邏輯都應當放入模型中，通過命名空間
進行管理。

在JavaScript 中，通過給對象添加屬性來管理一個命名空間，這個命名空間可以是函數，也可以是變量，比如：

var User = {
    records: [ /* ... */ ]
};

User 的數組數據就在命名空間User.records 中。和user 相關的函數也可以放入User 模型的命名空間里。比如用fetchRemote() 函數來從服務器端獲取user 的數據：

var User = {
    records: [],
    fetchRemote: function(){ /* ... */ }
};

將模型的屬性保存至命名空間中的做法可以確保不會產生沖突，這也是符合MVC 原則的，同時也能避免代碼變成一堆函數和回調混雜在一起的大雜燴。

可以對命名空間做一點改進，將那些在真實user 對象上的和user 實例相關的函數也都添加進去。假設user 記錄包含一個destory() 函數，它是和具體的user 相關的，因此這個函數應當基于User 實例進行調用：

var user = new User;
user.destroy()

為了做到這一點，應當將User 寫成一個類，而不是一個簡單對象：

var User = function(atts){
    his.attributes = atts || {};
};

User.prototype.destroy = function(){
    /* ... */
};

對于那些和具體的user 不相關的函數和變量，則可以直接定義在User 對象中：

User.fetchRemote = function(){
    /* ... */
};

構建對象關系映射（ORM）

對象關系映射（Ojbect-relational mapper，簡稱ORM）是在除JavaScript 以外的編程語言中常見的一種數據結構。在JavaScript 應用中，對象關系映射也是一種非常有用的技術，它可以用來做數據管理及用做模型。比如使用ORM 可以將模型和遠程服務捆綁在一起，任何模型實例的改變都會在后臺發起一個Ajax 請求到服務器端。或者將模型實例和HTML 元素綁定在一起，任何對實例的更改都會在界面中反映出來。

現在讓來創建一個自定義ORM。

本質上講，ORM 是一個包裝了一些數據的對象層。以往ORM 常用于抽象SQL 數據庫，但在這里ORM 只是用于抽象JavaScript 數據類型。這個額外的層有一個好處，可以通過給它添加自定義的函數和屬性來增強基礎數據的功能。比如添加數據的合法性驗證、監聽、數據持久化及服務器端的回調處理等，這樣會增加代碼的重用率。

原型繼承

這里使用Object.create() 來構造ORM，這里使用基于原型（prototype-based）的繼承，而沒有用到構造函數和new關鍵字。

Object.create() 只有一個參數即原型對象，它返回一個新對象，這個新對象的原型就是傳入的參數。換句話說，傳入一個對象，返回一個繼承了這個對象的新對象。

對于不支持的Object.create()的瀏覽器，可以很容易地模擬出這個函數：

if (typeof Object.create !== "function")
    Object.create = function(o) {
        function F() {}
        F.prototype = o;
        return new F();
    };

現在來創建Model 對象，Model 對象將用于創建新模型和實例：

var Model = {
    inherited: function(){},
    created: function(){},
    prototype: {
        init: function(){}
    },

    create: function(){
        var object = Object.create(this);
        object.parent = this;
        object.prototype = object.fn = Object.create(this.prototype);
        object.created();
        this.inherited(object);
        return object;
    },

    init: function(){
        var instance = Object.create(this.prototype);
        instance.parent = this;
        instance.init.apply(instance, arguments);
        return instance;
    }
};

create() 函數返回一個新對象，這個對象繼承自Model 對象，使用它來創建新模型。
init() 函數返回一個新對象，它繼承自Model.prototype——如Model 對象的一個實例：

var Asset = Model.create();
var User = Model.create();
var user = User.init();

添加ORM 屬性

現在如果給Model 對象添加屬性，對于繼承的模型來說，這些新增屬性都是可訪問的：

// 添加對象屬性
jQuery.extend(Model, {
    find: function(){}
});

// 添加實例屬性
jQuery.extend(Model.prototype, {
    init: function(atts) {
        if (atts) this.load(atts);
    },
    load: function(attributes){
        for(var name in attributes)
        this[name] = attributes[name];
    }
});

jQuery.extend() 只是代替for 循環手動復制屬性的一種快捷方式，這和在load()
函數中的做法差不多。現在，對象和實例屬性都傳播到了多帶帶的模型里：

assertEqual( typeof Asset.find, "function" );

實際上我們會增加很多屬性，因此還需將extend() 和include() 添加至Model 對象中：

var Model = {
    /* ……代碼片段……*/
    extend: function(o){
        var extended = o.extended;
        jQuery.extend(this, o);
        if (extended) extended(this);
    },

    include: function(o){
        var included = o.included;
        jQuery.extend(this.prototype, o);
        if (included) included(this);
    }
};

// 添加對象屬性
Model.extend({
    find: function(){}
});

// 添加實例屬性
Model.include({
    init: function(atts) { /* ... */ },
    load: function(attributes){ /* ... */ }
});

現在可以創建新的資源并設置一些屬性：

var asset = Asset.init({name: "foo.png"});

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

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

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

JavaScript MVC 學習筆記（七）模型之ORM

摘要：從技術的角度講，出于的原因，無法友好正式地生成位的，它只能生成偽隨機數。雖然中內置的方法盡管產生的是偽隨機數，但也足夠用了。持久化記錄需要一種保持記錄持久化的方法，即將引用保存至新創建的實例中以便任何時候都能訪問它。通過在Model 中使用records 對象來實現。當保存一個實例的時候，就將它添加進這個對象中；當刪除實例時，和將它從對象中刪除： // 用來保存資源的對象 ...

animabear 2019-08-21 10:27 評論0 收藏0
JavaScript MVC 學習筆記（一）初識JS MVC

摘要：以基于的富應用開發為主要學習資料。下面用實現一個例子使用匿名函數來封裝一個作用域在頁面加載時綁定事件監聽上面的代碼創建了控制器，這個控制器是放在變量下的命名空間。然后用了一個匿名函數封裝了一個作用域，以避免對全局作用域造成污染。公開記錄學習JS MVC，不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。什么是MVC MVC 是一種設...

xorpay 2019-08-22 10:55 評論0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同學去面試，做了兩道面試題全部做錯了，發過來給道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。排序算法 -- JavaScript 標準參考教程（alpha） - 前端 - 掘金來自《JavaScript 標準參考教程（alpha）》，by 阮一峰目錄冒泡排序簡介算法實現選擇排序簡介算法實現 ... 圖例詳解那道 setTimeout 與循環閉包的經典面...

enali 2019-08-20 16:36 評論0 收藏0
我的Android重構之旅：架構篇

摘要：是的架構的實現。是在年提出的一種前端架構，主要用來處理復雜的邏輯的一致性問題當時是為了解決頁面的消息通知問題。去年10月底來到了新公司，剛開始接手 Android 項目時，發現該項目真的是一團遭，項目開發上沒有任何架構可言，開發人員連簡單的 MVC、MVP 都不了解，Activity 及其臃腫，業務邊界也不明確，因此我決定重新分析一下當前主流的幾種開發架構，選出適合當前項目的架構形式...

mylxsw 2019-06-24 18:03 評論0 收藏0
Backbone.js學習筆記（一）

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

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