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

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

摘要：模型應(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 中，通過給對象添加屬性來管理一個(gè)命名空間，這個(gè)命名空間可以是函數(shù)，也可以是變量，比如：

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

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

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

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

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

var user = new User;
user.destroy()

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

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ù)捆綁在一起，任何模型實(shí)例的改變都會(huì)在后臺(tái)發(fā)起一個(gè)Ajax 請求到服務(wù)器端。或者將模型實(shí)例和HTML 元素綁定在一起，任何對實(shí)例的更改都會(huì)在界面中反映出來。

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

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

原型繼承

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

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

對于不支持的Object.create()的瀏覽器，可以很容易地模擬出這個(gè)函數(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)建新模型和實(shí)例：

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

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

添加ORM 屬性

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

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

// 添加實(shí)例屬性
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)手動(dòng)復(fù)制屬性的一種快捷方式，這和在load()
函數(shù)中的做法差不多。現(xiàn)在，對象和實(shí)例屬性都傳播到了多帶帶的模型里：

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

實(shí)際上我們會(huì)增加很多屬性，因此還需將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(){}
});

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

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

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

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

GPU云服務(wù)器云服務(wù)器 javascript學(xué)習(xí)筆記 _JavaScript_MVC 學(xué)習(xí)筆記學(xué)習(xí)筆記一

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

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

發(fā)表評論

登陸后可評論

0條評論

mrcode

男|高級講師

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

TA的文章

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

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

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

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

閱讀 1852·2019-08-30 15:53
移動(dòng)Web利器transformjs入門

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(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）盒模型

移動(dòng)Web利器transformjs入門

CSS background系列屬性

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

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

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

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