代码之家 › 专栏 › 技术社区 › Jan Thomä

玩吧!框架:在单独的JavaScript文件中使用url的最佳实践?

playframework external frameworks javascript

Jan Thomä · 技术社区 · 14 年前

我正在重新组织一个剧本!有很多JS的项目 HTML模板文件中的代码。此代码应移到外部 JS文件具有更好的可读性和更快的页面加载时间。然而, 当我在公共文件夹中创建一个JS文件时 @{Controller.method}链接替换不再工作。我是从HTML调用初始化函数的思考只提供所需url的模板,如

initialize({ "Application.doThis" : "@{Application.doThis}"})

但是,对于任何URL,这都变得非常麻烦和容易出错这是补充。另一件事是,I18N也不再工作了。所以对于这样的场景,最佳实践是什么 JS代码在一个单独的文件中,但仍然希望使用URL生成和我在你的JS里?

2 回复 | 直到 13 年前

Brad Mace Mike King 14 年前

在主模板中,生成“Javascript路由器”,如下所示:

<script>
    var routes = {
        doThis: #{jsAction @Application.doThis(user, ':param1', ':param2') /},
        doThat: #{jsAction @doThat() /}
    } 
</script>

然后在任何“静态”javascript文件中,使用此路由器:

$.get(routes.doThis({param1: x, param2: 'yop'}))

craigmj 13 年前

诀窍是让框架解析javascript、CSS或静态目录中的任何内容。这是一个简单的解决办法。

添加 controllers.StaticParser 控制器:

package controllers;
import play.mvc.Controller;

public class StaticParser extends Controller {
    public static void parse(String route) {
        render("/" + route);
    }
}

给你的 conf/routes 文件添加:

GET  /parse/{<.*>route} StaticParser.parse

该路由中的regexp非常重要,否则不能向请求添加路径。要请求解析的静态资源,例如js脚本,请使用:

<script src="/parse/public/javascripts/test.js"
   language="javascript" type="text/javascript" ></script>

不幸的是,你不能使用 #{script 'test.js' /} 格式化,因为脚本标记查找静态文件。为了纠正这种令人讨厌的现象,这里有一个无耻的脚本标签: #{parsescript 'test.js'/} 标签。它应该去 /views/tags/parsescript.tag :

{
 *  insert a parsescript tag in the template.
 *  by convention, referred script must be put under /public/javascripts
 *    src     (required)   : script filename, without the leading path "/public/javascripts"
 *    id      (opt.)       : sets script id attribute
 *    charset (opt.)       : sets source encoding - defaults to current response encoding
 *
 *    #{parsescript id:'datepicker' , src:'ui/ui.datepicker.js', charset:'${_response_encoding}' /}
}*
%{
    (_arg ) && (_src = _arg);

    if (!_src) {
        throw new play.exceptions.TagInternalException("src attribute cannot be empty for script tag");
    }
    _src = "/public/javascripts/" + _src
    try {
        _abs = play.mvc.Router.reverseWithCheck(_src, play.Play.getVirtualFile(_src), false);
    } catch (Exception ex) {
        throw new play.exceptions.TagInternalException("File not found: " + _src);
    }
}%
<script type="text/javascript" language="javascript"#{if _id} id="${_id}"#{/if}#{if _charset} charset="${_charset}"#{/if}  src="/parse${_abs}"></script>

它的工作原理和 #{script /} 标记,但在返回文件之前分析该文件: #{parsescript 'test.js' /}

一个人也可以无耻地 #{stylesheet /} 标签,但我想我已经占据了足够的空间。