يلعب! الإطار: أفضل الممارسات لاستخدام عناوين URL في ملفات JavaScript منفصلة؟

Question

أنا حاليا إعادة تنظيم المسرحية! المشروع حيث يوجد الكثير من رمز JS في ملفات قالب HTML. يجب نقل هذا الرمز إلى ملفات JS الخارجية لتحسين قابلية القراءة وأوقات تحميل الصفحات بشكل أسرع. ومع ذلك ، عندما أقوم فقط بإنشاء ملف JS في المجلد العام ، لم تعد جميع بدائل الارتباط @{controller.method} تعمل. كنت أفكر في استدعاء بعض وظائف التهيئة من قوالب HTML التي توفر فقط عناوين URL المطلوبة

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

ومع ذلك ، أصبح هذا مرهقًا للغاية ومعرضًا للخطأ مع أي عنوان URL الذي يتم إضافته. شيء آخر هو أن I18N لم يعد يعمل أيضًا. إذن ما هي أفضل ممارسة لسيناريوهات مثل هذه ، حيث لديك رمز JS الخاص بك في ملف منفصل ولكن لا يزال ترغب في استخدام توليد URL و I18N في JS الخاص بك؟

Answer 1

في القالب الرئيسي ، قم بإنشاء "جهاز توجيه JavaScript" ، شيء مثل:

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

ثم في أي ملف JavaScript "ثابت" ، استخدم جهاز التوجيه هذا:

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

Answer 2

الحيلة هي الحصول على الإطار لتحليل 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 /} علامة ، لكنني أعتقد أنني قد استحوذت على مساحة كافية بالفعل.

---