[译] 在 Nashron 中运用 Backbone.js

原文:Using Backbone.js with Nashorn
译者:飞龙
协定:CC BY-NC-SA 4.0

这个例子展现了如安在Java8的Nashron JavaScript引擎中运用Backbone.js模子。Nashron在2014年三月初次作为Java SE 8 的一部分宣布,并经由过程以原生体式格局在JVM上运转剧本扩大了Java的功用。关于Java Web开发者,Nashron特别有用,因为它可以在Java服务器上复用现有的客户端代码。传统的Node.js具有显著上风,然则Nashorn也可以收缩JVM的差异。

当你在HTML5前端运用当代的JavaScript MVC框架,比方Backbone.js时,越来越多的代码从服务器后端移动到Web前端。这个要领可以极大提拔用户体验,因为在运用视图的营业逻辑时节省了服务器的许多往复通讯。

Backbone许可你定义模子类,它们可以用于绑定视图(比方HTML表单)。当用户和UI交互时Backbone会跟踪模子的晋级,反之亦然。它也能经由过程和服务器同步模子来协助你,比方挪用服务端REST处置惩罚器的恰当要领。所以你终究会在前端完成营业逻辑,将你的服务器模子用于处置惩罚耐久化数据。

在服务端复用Backbone模子非常容易用Nashron完成,就像下面的例子所展现的那样。在我们最先之前,确保你经由过程浏览我的Nashorn教程熟习了在Nashron引擎中编程JavaScript。

Java 模子

起首,我们在Java中定义实体类Product。这个类可用于数据库的CURD操纵(增编削查)。要记着这个类是个地道的Java Bean,不完成任何营业逻辑,因为我们想让前端准确实行UI的营业逻辑。

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

Backbone 模子

如今我们定义Backbone模子,作为Java Bean的对应。Backbone模子Product运用和Java Bean雷同的数据结构,因为它是我们愿望在Java服务器上耐久存储的数据。

Backbone模子也完成了营业逻辑:getValueOfGoods要领经由过程将stockprice相乘盘算一切产物的总值。每次stockprice的更改都会使valueOfGoods从新盘算。

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言语扩大,我们可以在客户端(浏览器)和服务端(Java)安全地运用统一份代码。

要记着我特地挑选了非常简朴的函数来演示我的企图。实在的营业逻辑应该会更庞杂。

将两者放在一同

下一个目的是在Nashron中,比方在Java服务器上复用Backbone模子。我们愿望完成下面的行动:把一切属性从Java Bean上绑定到Backbone模子上,盘算valueOfGoods属性,末了将效果传回Java。

起首,我们建立一个新的剧本,它仅仅由Nashron实行,所以我们这里可以安全地运用Nashron的扩大。

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;
};

这个剧本起首加载了相干的外部剧本UnderscoreBackbone(Underscore是Backbone的必备条件),以及我们前面的ProductBackbone模子。

函数calcute接收ProductJava Bean,将其一切属性绑定到新建立的BackboneProduct上,以后返回模子的一切属性给挪用者。经由过程在Backbone模子上设置stockprice属性,ValueOfGoods属性因为注册在模子initialize组织函数中的事宜处置惩罚器,会自动盘算出来。

末了,我们在Java中挪用calculate函数。

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

我们建立了新的ProductJava Bean,而且将它通报到JavaScript函数中。效果触发了getValueOfGoods要领,所以我们可以从返回的对象中读取valueOfGoods属性的值。

总结

在Nashron中复用现存的JavaScript库非常简朴。Backbone适用于构建庞杂的HTML5前端。在我看来,Nashron和JVM如今是Node.js的优异备选计划,因为你可以在Nashron的代码库中充分利用Java的悉数生态系统,比方JDK的悉数API,以及一切可用的库和东西。要记着你在运用Nashron时并不限定于Java — 想一想 Scala、Groovy、Clojure和jjs上的纯JavaScript。

这篇文章中可运转的代码托管在Github上(请见这个文件)。请随便fork我的堆栈,或许在Twitter上向我反应。

    原文作者:飞龙
    原文地址: https://segmentfault.com/a/1190000006045176
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞