资讯专栏INFORMATION COLUMN

[译] 在 Nashron 中使用 Backbone.js

gotham / 1375人阅读

摘要:原文译者飞龙协议这个例子展示了如何在的引擎中使用模型。在年三月首次作为的一部分发布,并通过以原生方式在上运行脚本扩展了的功能。将二者放在一起下一个目标是在中,例如在服务器上复用模型。最后,我们在中调用函数。总结在中复用现存的库十分简单。

原文: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;
};

这个脚本首先加载了相关的外部脚本Underscore 和 Backbone(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://www.ucloud.cn/yun/64959.html

相关文章

  • [] Nashron 使用 Backbone.js

    摘要:原文译者飞龙协议这个例子展示了如何在的引擎中使用模型。在年三月首次作为的一部分发布,并通过以原生方式在上运行脚本扩展了的功能。将二者放在一起下一个目标是在中,例如在服务器上复用模型。最后,我们在中调用函数。总结在中复用现存的库十分简单。 原文:Using Backbone.js with Nashorn 译者:飞龙 协议:CC BY-NC-SA 4.0 这个例子展示了如何在Java8...

    tabalt 评论0 收藏0
  • [] Java 8 Nashorn 教程

    摘要:未来的主要发布基于。在中调用函数支持从代码中直接调用定义在脚本文件中的函数。下面的函数稍后会在端调用为了调用函数,你首先需要将脚本引擎转换为。调用函数将结果输出到,所以我们会首先看到输出。幸运的是,有一套补救措施。 原文:Java 8 Nashorn Tutorial 译者:飞龙 协议:CC BY-NC-SA 4.0 这个教程中,你会通过简单易懂的代码示例,来了解Nashorn Ja...

    _ivan 评论0 收藏0
  • 用Jasmine和Sinon测试Backbone应用 ()

    摘要:框架本身可以很好地支持自下而上的单元测试。在中,这些原因可以分为性能真实的操作,依靠定时行为及网络活动减慢了测试隔离单元测试应把重点放在小的一块功能成为可能,并解耦不可靠的或低依赖使用对象是拥抱和的基本组成部分。 最近在慢慢深入Backbone,也试着写一些测试,找一些合适的文档来学习。于是就找到了一个系列的文章 : Testing Backbone applications with...

    ralap 评论0 收藏0
  • 】JavaScript 框架的探索与变迁(上)

    摘要:正文在年,框架的选择并不少。特别的,通过思考这些框架分别如何处理状态变化是很有用的。本文探索以下的数据绑定,的脏检查的虚拟以及它与不可变数据结构之间的联系。当状态产生变化时,只有真正需要更新的部分才会发生改变。 译者言 近几年可谓是 JavaScript 的大爆炸纪元,各种框架类库层出不穷,它们给前端带来一个又一个的新思想。从以前我们用的 jQuery 直接操作 DOM,到 Backb...

    Jaden 评论0 收藏0
  • []学习如何去学习 JavaScript - 5 个你应该如何花学习 JS 上时间的建议

    摘要:拥抱异步编程纵观发展史也可以说成开发的发展史,你会发现异步彻底改变了这场游戏。可以这么说,异步编程已成为开发的根基。这也是你应尽早在上投入大量时间的一处核心知识点,这其中包含和等重要概念。这也是最突出的一项贡献。 原文地址:Medium - Learning How to Learn JavaScript. 5 recommendations on how you should spend ...

    wanglu1209 评论0 收藏0

发表评论

0条评论

gotham

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<