Express/Node.js: Hiển thị javascript tùy chỉnh làm phản hồi

Question

Trong ứng dụng của tôi, tôi cần cung cấp API (giống như API Javascript của Google Maps), qua đó tôi có thể gửi một số javascript tùy chỉnh (với một số phiên và yêu cầu thông tin liên quan) như là phản ứng. Sau đó, javascript được sử dụng để vẽ một số đồ thị trên giao diện người dùng. Tôi đang sử dụng Express with Jade làm công cụ tạo khuôn mẫu của tôi. Mã mà tôi đang sử dụng là:

app.use('/graph',function(req, res){ 
    //send out graph data 
    var var_name = req.session.var_name //fetch something from session 
    var graphData = fetchGraphData(req.query.graph); //function that fetches graph data 
    res.contentType("text/javascript"); 
    res.render(__dirname + '/views/graph.jade', { 
    title: "Title", queryStr: JSON.stringify({var_name: var_name, graphData: graphData }) 
    }); 
}); 

Và file ngọc:

| some_var_name = { 
|  initGraph : function(divId){ 
|  //some code here 
|  var graphData = !{graphData} 
|  // do something        

Là một workaround, tôi đã bắt đầu mỗi dòng của file ngọc với |, vì vậy ngọc đó phân tích các văn bản dưới dạng văn bản thuần túy và không thêm bất kỳ thẻ html nào! Nó hoạt động tốt, nhưng có một cách sạch hơn để làm điều này? Các giải pháp có thể hoặc không thể sử dụng Jade!

Answer 1

Bạn nên xem xét underscore templates. Tôi nghĩ rằng để tạo ra đầu ra văn bản tùy ý nó sẽ được phần nào sạch hơn. Jade là mục đích xây dựng để hiển thị HTML.

Bạn cũng có thể thử Mustache hoặc Handlebars.

Dựa trên nhận xét của bạn, tôi thấy bạn muốn tiếp tục sử dụng res.render để hiển thị mẫu. consolodate.js thêm hỗ trợ cho tất cả các công cụ mẫu chính Express. Bao gồm các mẫu Underscore, Handlebars, Mustache và Dust, được đề cập bởi @ TheHippo.

Answer 2

Bạn có thể thử xác định các hàm JavaScript bạn cần gửi cho trình duyệt trong một mô-đun riêng biệt, nằm ngoài mẫu, có lẽ là cách chính xác hơn từ quan điểm "phân tách mối quan tâm". Ngoài ra, nếu các hàm được định nghĩa trong một mô-đun riêng biệt, chúng có thể được sử dụng cả trong máy chủ và trong trình duyệt. Sau đó, bạn có thể chuyển đổi các hàm thành các chuỗi bằng cách sử dụng phương thức toString() của nó trong một hàm gọi mẫu hoặc ngay bên trong khuôn mẫu, nếu nó hỗ trợ JavaScript đơn giản, trường hợp với các mẫu gạch dưới, EJS và doT (I) thử cả hai nhấn mạnh và EJS và kết thúc bằng dấu chấm mà không chỉ là nhanh nhất nhưng rất linh hoạt - check it out): mã

JS:

// if you send the same functions you may want to convert them to strings in advance 
var data = { 
    funcStr: func.toString(); 
}; 
res.render(view, data); 

Template (dOT):

<script type="text/javascript"> 
    func = {{= it.funcStr }}; 

    // now you can call it here if you want but I would use 
    // separate JavaScript files 
    func(); 
</script> 

Tôi sử dụng nó để gửi các mẫu đã được biên dịch trước cho trình duyệt cùng với trang tải trang đầu tiên, nhưng tôi nghĩ nó cũng có thể được sử dụng trong trường hợp của bạn.

Là câu hỏi phụ, tại sao bạn không thể gộp tất cả các chức năng này trong một mô-đun JavaScript riêng biệt và tải chúng dưới dạng tệp tập lệnh thông thường?