玩!框架:最佳实践使用单独的JavaScript文件网址吗?
-
25-09-2019 - |
题
我目前重组一玩!项目中有很多JS 代码的HTML模板文件。这段代码应该移到外部 JS文件更好的可读性和更快的网页加载时间。然而, 当我刚刚在公共文件夹中创建一个JS文件,所有的 @ {} Controller.method更换的链接不再工作。我曾是 想着从HTML调用一些初始化函数 刚刚提供所需的URL等
的模板initialize({ "Application.doThis" : "@{Application.doThis}"})
然而,这变得非常麻烦且容易出错的任何URL 被添加。另一件事是,在国际化也不再起作用。所以 什么是喜欢这些场景的最佳实践,你有你 JS代码在一个单独的文件,但仍想使用URL生成和 在你的JS?
国际化解决方案
在主模板,产生一个 '的Javascript路由器',是这样的:
<script>
var routes = {
doThis: #{jsAction @Application.doThis(user, ':param1', ':param2') /},
doThat: #{jsAction @doThat() /}
}
</script>
和然后在任何 '静态' JavaScript文件时,使用该路由器:
$.get(routes.doThis({param1: x, param2: 'yop'}))
其他提示
诀窍是让框架来分析你的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
在该路线的正则表达式是非常重要的,否则你不能添加寻路到该请求。 要请求解析的静态资源,如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 /}
标签,但我想我已经采取了足够的空间了。
不隶属于 StackOverflow