Jak działają szablony silników w JavaScript?

Question

Czy mógłbyś mi wyjaśnić, jak działają szablony silników w JavaScript? Dziękuję Ci.

JSON

{ "color" : "red"} 

Szablon

<strong><%=color%></strong> 

Wynik

<strong>Red</strong> 

Answer 1

Mogą one różnić w zależności od implementacji, ale jeden mówisz wygląda jak to działa w następujący sposób:

1. Analizować strony patrząc na klucze w <%= %> tagów

2. dopasować klucz do pary klucz/wartość w formacie JSON

3. Zamień znaczniki/klucz na wartość.

Answer 2

Jako punkt wyjścia Polecam wam dać wygląd metody String.prototype.replace i specjalnie stosując swoją funkcję callback:

function replaceTokens(str, replacement) { 
    return str.replace(/<\%=([^%>]+)\%>/g, function (str, match) { 
    return replacement[match]; 
    }); 
} 

var input = "<strong><%=color%></strong>"; 
replaceTokens(input, { "color" : "Red"}); 
// returns <strong>Red</strong> 

replaceTokens("<%=var1%> <%=var2%>", { "var1" : "Hello", "var2": "world!"}); 
// returns "Hello world!" 

Daj spojrzeć na te artykuły:

• Search and Don't Replace
• John Resig's Micro-Templating Engine
• Better JavaScript Templates (JSP jak składnia)
• jQuery Templates Proposal

Answer 3

To nie jest bardzo różni się od innych rozwiązań szablonowych (na poziomie koncepcyjnym).

{ "color" : "red"} 

Określa atrybut color z wartością red.

<strong><%=color%></strong> 

oznacza „użyć wartości color gdziekolwiek mam <%=color%>. Na podstawie Wahat masz, tym szablonów silnikiem prawdopodobnie spacery DOM i stwierdza węzły, które mają wartości, które odpowiadają <%=somestring%>. Następnie sprawdza, czy tam jest atrybutem, który odpowiada wartości somestring Jeśli istnieje, zastępuje wartość <%=somestring%> o wartości określonej w JSON (który w tym przypadku jest red)

to w końcu daje:..

<strong>Red</strong>