[譯] 在 Nashron 中使用 Backbone.js

gotham 發(fā)布于2019-08-14 14:21 / 1430人閱讀

摘要：原文譯者飛龍協(xié)議這個(gè)例子展示了如何在的引擎中使用模型。在年三月首次作為的一部分發(fā)布，并通過以原生方式在上運(yùn)行腳本擴(kuò)展了的功能。將二者放在一起下一個(gè)目標(biāo)是在中，例如在服務(wù)器上復(fù)用模型。最后，我們?cè)谥姓{(diào)用函數(shù)?？偨Y(jié)在中復(fù)用現(xiàn)存的庫(kù)十分簡(jiǎn)單。

原文：Using Backbone.js with Nashorn
譯者：飛龍
協(xié)議：CC BY-NC-SA 4.0

這個(gè)例子展示了如何在Java8的Nashron JavaScript引擎中使用Backbone.js模型。Nashron在2014年三月首次作為Java SE 8 的一部分發(fā)布，并通過以原生方式在JVM上運(yùn)行腳本擴(kuò)展了Java的功能。對(duì)于Java Web開發(fā)者，Nashron尤其實(shí)用，因?yàn)樗梢栽贘ava服務(wù)器上復(fù)用現(xiàn)有的客戶端代碼。傳統(tǒng)的Node.js具有明顯優(yōu)勢(shì)，但是Nashorn也能夠縮短JVM的差距。

當(dāng)你在HTML5前端使用現(xiàn)代的JavaScript MVC框架，例如Backbone.js時(shí)，越來越多的代碼從服務(wù)器后端移動(dòng)到Web前端。這個(gè)方法可以極大提升用戶體驗(yàn)，因?yàn)樵谑褂靡晥D的業(yè)務(wù)邏輯時(shí)節(jié)省了服務(wù)器的很多往返通信。

Backbone允許你定義模型類，它們可以用于綁定視圖（例如HTML表單）。當(dāng)用戶和UI交互時(shí)Backbone會(huì)跟蹤模型的升級(jí)，反之亦然。它也能通過和服務(wù)器同步模型來幫助你，例如調(diào)用服務(wù)端REST處理器的適當(dāng)方法。所以你最終會(huì)在前端實(shí)現(xiàn)業(yè)務(wù)邏輯，將你的服務(wù)器模型用于處理持久化數(shù)據(jù)。

在服務(wù)端復(fù)用Backbone模型十分容易用Nashron完成，就像下面的例子所展示的那樣。在我們開始之前，確保你通過閱讀我的Nashorn教程熟悉了在Nashron引擎中編程JavaScript。

Java 模型

首先，我們?cè)贘ava中定義實(shí)體類Product。這個(gè)類可用于數(shù)據(jù)庫(kù)的CURD操作（增刪改查）。要記住這個(gè)類是個(gè)純粹的Java Bean，不實(shí)現(xiàn)任何業(yè)務(wù)邏輯，因?yàn)槲覀兿胱屒岸苏_執(zhí)行UI的業(yè)務(wù)邏輯。

class Product {
    String name;
    double price;
    int stock;
    double valueOfGoods;
}

Backbone 模型

現(xiàn)在我們定義Backbone模型，作為Java Bean的對(duì)應(yīng)。Backbone模型Product使用和Java Bean相同的數(shù)據(jù)結(jié)構(gòu)，因?yàn)樗俏覀兿Ｍ贘ava服務(wù)器上持久存儲(chǔ)的數(shù)據(jù)。

Backbone模型也實(shí)現(xiàn)了業(yè)務(wù)邏輯：getValueOfGoods方法通過將stock于price相乘計(jì)算所有產(chǎn)品的總值。每次stock或price的變動(dòng)都會(huì)使valueOfGoods重新計(jì)算。

var Product = Backbone.Model.extend({
    defaults: {
        name: "",
        stock: 0,
        price: 0.0,
        valueOfGoods: 0.0
    },

    initialize: function() {
        this.on("change:stock change:price", function() {
            var stock = this.get("stock");
            var price = this.get("price");
            var valueOfGoods = this.getValueOfGoods(stock, price);
            this.set("valueOfGoods", valueOfGoods);
        });
    },

    getValueOfGoods: function(stock, price) {
        return stock * price;
    }
});

由于Backbone模型不使用任何Nashron語(yǔ)言擴(kuò)展，我們可以在客戶端（瀏覽器）和服務(wù)端（Java）安全地使用同一份代碼。

要記住我特意選擇了十分簡(jiǎn)單的函數(shù)來演示我的意圖。真實(shí)的業(yè)務(wù)邏輯應(yīng)該會(huì)更復(fù)雜。

將二者放在一起

下一個(gè)目標(biāo)是在Nashron中，例如在Java服務(wù)器上復(fù)用Backbone模型。我們希望完成下面的行為：把所有屬性從Java Bean上綁定到Backbone模型上，計(jì)算valueOfGoods屬性，最后將結(jié)果傳回Java。

首先，我們創(chuàng)建一個(gè)新的腳本，它僅僅由Nashron執(zhí)行，所以我們這里可以安全地使用Nashron的擴(kuò)展。

load("http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js");
load("http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js");
load("product-backbone-model.js");

var calculate = function(javaProduct) {
    var model = new Product();
    model.set("name", javaProduct.name);
    model.set("price", javaProduct.price);
    model.set("stock", javaProduct.stock);
    return model.attributes;
};

這個(gè)腳本首先加載了相關(guān)的外部腳本Underscore 和 Backbone（Underscore是Backbone的必備條件），以及我們前面的ProductBackbone模型。

函數(shù)calcute接受ProductJava Bean，將其所有屬性綁定到新創(chuàng)建的BackboneProduct上，之后返回模型的所有屬性給調(diào)用者。通過在Backbone模型上設(shè)置stock和price屬性，ValueOfGoods屬性由于注冊(cè)在模型initialize構(gòu)造函數(shù)中的事件處理器，會(huì)自動(dòng)計(jì)算出來。

最后，我們?cè)贘ava中調(diào)用calculate函數(shù)。

Product product = new Product();
product.setName("Rubber");
product.setPrice(1.99);
product.setStock(1337);

ScriptObjectMirror result = (ScriptObjectMirror)
    invocable.invokeFunction("calculate", product);

System.out.println(result.get("name") + ": " + result.get("valueOfGoods"));
// Rubber: 2660.63

我們創(chuàng)建了新的ProductJava Bean，并且將它傳遞到JavaScript函數(shù)中。結(jié)果觸發(fā)了getValueOfGoods方法，所以我們可以從返回的對(duì)象中讀取valueOfGoods屬性的值。

總結(jié)

在Nashron中復(fù)用現(xiàn)存的JavaScript庫(kù)十分簡(jiǎn)單。Backbone適用于構(gòu)建復(fù)雜的HTML5前端。在我看來，Nashron和JVM現(xiàn)在是Node.js的優(yōu)秀備選方案，因?yàn)槟憧梢栽贜ashron的代碼庫(kù)中充分利用Java的整個(gè)生態(tài)系統(tǒng)，例如JDK的全部API，以及所有可用的庫(kù)和工具。要記住你在使用Nashron時(shí)并不限制于Java -- 想想 Scala、Groovy、Clojure和jjs上的純JavaScript。

這篇文章中可運(yùn)行的代碼托管在Github上（請(qǐng)見這個(gè)文件）。請(qǐng)隨意fork我的倉(cāng)庫(kù)，或者在Twitter上向我反饋。

GPU云服務(wù)器云服務(wù)器 backbone.js 在php中使用組件在VBScript中使用類 webrtc在qt下編譯

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

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

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

登陸后可評(píng)論

0條評(píng)論

gotham

男|高級(jí)講師

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

TA的文章

項(xiàng)目中引入特殊字體【小程序、h5】包括canvas畫圖

閱讀 3249·2019-08-30 15:55
前端代碼集

閱讀 2973·2019-08-30 13:46
Chrome, vh Is Always Calculated as If the Url Bar

閱讀 1471·2019-08-29 17:29
移動(dòng)前端知識(shí)總結(jié)

閱讀 3542·2019-08-29 11:08
從一滴水說起，談?wù)凜SS形狀的生成思路

閱讀 3469·2019-08-29 11:04
CSS中那些微妙模糊的屬性

閱讀 1111·2019-08-28 18:20
React項(xiàng)目中碰到的IE問題

閱讀 565·2019-08-26 13:37
freeCodeCamp 學(xué)習(xí)記錄——初級(jí)算法「01」翻轉(zhuǎn)字符串

閱讀 1358·2019-08-26 11:49

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

資訊專欄INFORMATION COLUMN

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

[譯] 在 Nashron 中使用 Backbone.js

相關(guān)文章