Sự khác nhau giữa handlebar.js và handlebar.runtime.js là gì?

Question

Tôi thấy rằng handlebar.runtime.js không có phương pháp compile. Vì vậy, tôi đã tải xuống không phải phiên bản phù hợp để chỉ sử dụng công cụ tạo mẫu.

Nhưng handlebar.runtime.js là gì?

Sẽ thú vị hơn là Download: runtime-1.0.0 sẽ không đáng kể hơn trên trang tải xuống?

Answer 1

Handlebars sử dụng các thẻ trông giống như {{this}} mà trình duyệt không thể hiểu một cách nguyên bản. Để trình duyệt hiển thị các thẻ này, chúng phải được biên dịch. Việc biên dịch có thể xảy ra trước hoặc sau khi bạn tải trang.

Để tăng tốc mọi thứ, bạn có thể biên dịch trước các mẫu của mình. Thông tin thêm tại số handlebars site. Nếu bạn làm điều này, bạn chỉ cần bao gồm tập lệnh chạy trên trình xử lý trên trang của mình. Nó nhỏ hơn script handlebars đầy đủ vì nó không cần phải lo lắng về việc biên dịch mẫu. Nó giả định bạn đã biên dịch trước chúng.

Khi mẫu được biên dịch, nó được chuyển đổi thành một hàm, khi được gọi, sẽ trả về HTML thực trong đó thẻ ngoặc nhọn đã được chuyển đổi thành giá trị mà trình duyệt hiểu.

Ví dụ, đây ...

<div class="entry"> 
    <h1>{{title}}</h1> 
    <div class="body"> 
    {{body}} 
    </div> 
</div> 

... sẽ được chuyển đổi thành như sau (tính đến tháng 6 năm 2014) sau khi được biên dịch sẵn:

(function() { 
    var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {}; 
templates['test.hbs'] = template({"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) { 
    var helper, functionType="function", escapeExpression=this.escapeExpression; 
    return "<div class=\"entry\">\n <h1>" 
    + escapeExpression(((helper = helpers.title || (depth0 && depth0.title)),(typeof helper === functionType ? helper.call(depth0, {"name":"title","hash":{},"data":data}) : helper))) 
    + "</h1>\n <div class=\"body\">\n " 
    + escapeExpression(((helper = helpers.body || (depth0 && depth0.body)),(typeof helper === functionType ? helper.call(depth0, {"name":"body","hash":{},"data":data}) : helper))) 
    + "\n </div>\n</div>\n"; 
},"useData":true}); 
})(); 

Các takeaway quan trọng ở đây là tại một số điểm, mẫu handlebars phải được chuyển đổi thành hàm này để HTML thực có thể được tạo ra. Kịch bản lệnh handlebars runtime không chứa trình biên dịch do đó làm cho nó nhỏ hơn. Và bằng cách biên dịch trước các mẫu của bạn, sẽ có một bước ít nặng nề hơn mà JavaScript phải trải qua trước khi hiển thị trang.