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

mrcode 發(fā)布于2019-08-22 10:56 / 955人閱讀

摘要：模型應(yīng)當(dāng)從視圖和控制器中解耦出來。與數(shù)據(jù)操作和行為相關(guān)的邏輯都應(yīng)當(dāng)放入模型中，通過命名空間進(jìn)行管理。在應(yīng)用中，對象關(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)放入模型中，通過命名空間
進(jìn)行管理。

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

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

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

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

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

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

var user = new User;
user.destroy()

為了做到這一點，應(yīng)當(dāng)將User 寫成一個類，而不是一個簡單對象：

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

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

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

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

構(gòu)建對象關(guān)系映射（ORM）

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

現(xiàn)在讓來創(chuàng)建一個自定義ORM。

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

原型繼承

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

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

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

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

現(xiàn)在來創(chuàng)建Model 對象，Model 對象將用于創(chuàng)建新模型和實例：

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() 函數(shù)返回一個新對象，這個對象繼承自Model 對象，使用它來創(chuàng)建新模型。
init() 函數(shù)返回一個新對象，它繼承自Model.prototype——如Model 對象的一個實例：

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

添加ORM 屬性

現(xiàn)在如果給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 循環(huán)手動復(fù)制屬性的一種快捷方式，這和在load()
函數(shù)中的做法差不多?，F(xiàn)在，對象和實例屬性都傳播到了多帶帶的模型里：

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){ /* ... */ }
});

現(xiàn)在可以創(chuàng)建新的資源并設(shè)置一些屬性：

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

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

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

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

發(fā)表評論

登陸后可評論

0條評論

mrcode

男|高級講師

我要關(guān)注我要私信

TA的文章

排序算法-選擇排序（C語言）

閱讀 881·2021-11-22 09:34
Robovps德國專用服務(wù)器：E3-1230v2/16GB內(nèi)存/2TB硬盤/10TB流量/1Gbps

閱讀 1016·2021-10-08 10:16
月神科技-香港原生IP-2核2G10M低至20元/月,沙田三網(wǎng)CN2 GIA低至25元/月,可選WI

閱讀 1832·2021-07-25 21:42
【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（2）盒模型

閱讀 1798·2019-08-30 15:53
移動Web利器transformjs入門

閱讀 3531·2019-08-30 13:08
CSS background系列屬性

閱讀 2190·2019-08-29 17:30
給零基礎(chǔ)的小白從0到1的react-naitve電商app——簡單易學(xué)！

閱讀 3351·2019-08-29 17:22
電視機頂盒web開發(fā)總結(jié)，避免踩坑。

閱讀 2184·2019-08-29 15:35

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

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

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

Deep in JS - 收藏集 - 掘金

我的Android重構(gòu)之旅：架構(gòu)篇

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

發(fā)表評論

0條評論

mrcode

男|高級講師

TA的文章

排序算法-選擇排序（C語言）

Robovps德國專用服務(wù)器：E3-1230v2/16GB內(nèi)存/2TB硬盤/10TB流量/1Gbps

月神科技-香港原生IP-2核2G10M低至20元/月,沙田三網(wǎng)CN2 GIA低至25元/月,可選WI

【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（2）盒模型

移動Web利器transformjs入門

CSS background系列屬性

給零基礎(chǔ)的小白從0到1的react-naitve電商app——簡單易學(xué)！

電視機頂盒web開發(fā)總結(jié)，避免踩坑。

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！