Sử dụng JavaScript trong thẻ JSP

Question

Tôi đã xem this question regading việc nhập tệp js có liên quan đến nội dung thẻ. Tôi có một vấn đề tương tự, ở đây tôi có một thẻ jsp mà tạo ra một số HTML và có một js chung thực hiện xử lý các hành vi của HTML này. Hơn nữa tôi cần phải viết một số câu lệnh khởi tạo, vì vậy tôi có thể sử dụng nó sau đó thông qua JavaScript. Để có thể sử dụng "trình xử lý" này trong JavaScript của tôi, nó phải được truy cập bằng cách nào đó.

Câu hỏi đặt ra là ... Có phải OK để viết nội dòng tập lệnh > cùng với HTML của tôi cho mục đích khởi tạo và khởi tạo (cá nhân tôi không nghĩ rằng nó rất thanh lịch)? Và về việc có thể truy cập vào thế giới JS, tôi có nên để lại một var toàn cầu tham chiếu đến đối tượng xử lý của tôi (không phải là rất tao nhã như tôi nghĩ), có cách nào tốt hơn để làm điều đó không?

Answer 1

Bạn nên cố gắng javascript trong các tệp riêng của mình. Việc này thường được thực hiện với Progressive Enhancement. Nhưng đôi khi bạn không có lựa chọn, ví dụ khi cùng một JSP hiển thị các trang bằng các ngôn ngữ khác nhau. Đây là thực tế cuộc sống một ví dụ:

Các JSP:

<script src="/javascript/article_admin.js"></script> 
    <script type="text/javascript"> 
     NP_ArticleAdmin.initialize({ 
      text: { 
       please_confirm_deletion_of: '<i18n:output text="please.confirm.deletion.of"/>', 
       this_cannot_be_undone: '<i18n:output text="this.cannot.be.undone"/>' 
      } 
     }); 
    </script> 

Các javascript (article_admin.js):

/*global NP_ArticleAdmin, jQuery, confirm */ 
NP_ArticleAdmin = function ($) { 
    var text; 

    function delete_article(event) { 
     var article = $(this).parents("li.article"), 
     id = article.attr("id"), 
     name = article.find("h3.name").html(); 
     if (confirm(text.please_confirm_deletion_of + name + text.this_cannot_be_undone)) { 
      $.post("/admin/delete_article", {id: id}); 
      article.fadeOut(); 
     } 
     event.preventDefault(); 
     return false; 
    } 

    function initialize(data) { 
     text = data.text; 
     $("#articles a.delete").click(delete_article); 
    } 

    return {initialize: initialize}; 
}(jQuery); 

Trong ví dụ này, chỉ javascript trong tệp JSP là phần cần phải có ở đó. Chức năng cốt lõi được tách riêng trong tệp js của chính nó.

Answer 2

Mặc dù tôi đồng ý rằng nó không hoàn toàn thanh lịch, tôi đã biết làm điều đó một vài lần khi kết hợp các quyết định phía máy chủ với môi trường tích hợp AJAX. Echoing inline <script> thẻ để khởi tạo một số biến không phải là một điều khủng khiếp, miễn là không ai nhìn thấy nó.

Đối với các phương pháp tốt hơn, tôi không biết điều này. Tôi đã làm điều này rất hiếm khi tôi không tìm kiếm một giải pháp thanh lịch hơn hoặc "thích hợp".

Answer 3

Tôi không hoàn toàn chắc chắn những gì bạn yêu cầu ở đây, nhưng tôi không có bất cứ điều gì sai trái với việc bao gồm các thẻ <script> trong JSP để khởi tạo mã javascript. Tôi thường làm theo mô hình này, viết mã thư viện trong các tệp javascript bên ngoài và sau đó gọi các hàm tạo cho đối tượng của tôi từ các thẻ <script>.

Điều này giúp gỡ lỗi dễ dàng, vì logic là tất cả trong các tệp bên ngoài (và firebug dường như gặp sự cố với việc gỡ lỗi mã javascript nội tuyến). Các thư viện được lưu trữ, nhưng dữ liệu instantiating chúng không (đó là hành vi mong muốn).

Cách khác là để mã tạo mã được tạo động trong tệp javascript bên ngoài hoặc cuộc gọi AJAX. Tôi đã làm điều này quá, với kết quả tích cực.

Tôi nghĩ yếu tố quyết định là bạn có bao nhiêu dữ liệu động. Nếu bạn cần đại diện cho các cấu trúc dữ liệu lớn, tôi sẽ phục vụ nó thông qua một cuộc gọi AJAX trả về JSON. Nếu một cuộc gọi đơn giản tới một hàm tạo, hãy đặt nó trong JSP.

Đối với biến toàn cục, tôi thường sẽ có toàn cầu cho đối tượng cấp cao nhất khởi động mọi thứ. Bên trong đó, là tất cả các tham chiếu khác cho các đối tượng trợ giúp.

Answer 4

Đồng ý với việc sử dụng <script> thẻ phù hợp với HTML. Có những lúc nó là cần thiết, nhưng theo như bất kỳ cách nào tốt hơn tôi không biết. Nếu không làm cho mọi thứ có vẻ phức tạp hơn thì việc sử dụng thẻ <script> sẽ dễ dàng hơn khi tìm cách triển khai các tệp js.