© 2011 Cisco and/or its affiliates. All rights reserved. 1 1 EasyTemplate A JavaScript template...

15
© 2011 Cisco and/or its affiliates. All rights reserved. 1 © 2011 Cisco and/or its affiliates. All rights reserved. 1 EasyTemplate A JavaScript template engine Charlie Du F2E Architect 7/23/2011

Transcript of © 2011 Cisco and/or its affiliates. All rights reserved. 1 1 EasyTemplate A JavaScript template...

© 2011 Cisco and/or its affiliates. All rights reserved. 1© 2011 Cisco and/or its affiliates. All rights reserved. 1

EasyTemplateA JavaScript template engineCharlie DuF2E Architect

7/23/2011

© 2011 Cisco and/or its affiliates. All rights reserved. 2© 2011 Cisco and/or its affiliates. All rights reserved. 2

© 2011 Cisco and/or its affiliates. All rights reserved. 3

© 2011 Cisco and/or its affiliates. All rights reserved. 4© 2011 Cisco and/or its affiliates. All rights reserved. 4

© 2011 Cisco and/or its affiliates. All rights reserved. 5

© 2011 Cisco and/or its affiliates. All rights reserved. 6

EasyTemplate

Cisco CSG You You You You新浪微博

© 2011 Cisco and/or its affiliates. All rights reserved. 7

Fast1000 Records, Timeused:0ms

Simply4 usage only

ScalabilityExtend any rules if you want

© 2011 Cisco and/or its affiliates. All rights reserved. 8© 2011 Cisco and/or its affiliates. All rights reserved. 8

© 2011 Cisco and/or its affiliates. All rights reserved. 9

Next PageGet JSON data, and render it

by EasyTemplate in JavaScript

Next PageGet JSON data, and render it

by EasyTemplate in JavaScript

First ViewRendered by server side’s response content normally

© 2011 Cisco and/or its affiliates. All rights reserved. 10© 2011 Cisco and/or its affiliates. All rights reserved. 10

© 2011 Cisco and/or its affiliates. All rights reserved. 11

© 2011 Cisco and/or its affiliates. All rights reserved. 12

FreeMarker

EasyTemplate

<#macro MacroNameVariableNam>

</#macro>

<#macro TeplateName ObjectName>

</#macro>

<#if (…)>

<#elseif (…)>

<#else>

</#if>

<#if (…)>

<#elseif (…)>

<#else>

</#if>

<#list LIST as list>

${list_index}

${list.property}

</#list>

<#list LIST as list>

${list_index}

${list.property}

</#list>

${variable}

${variable?1:0}

© 2011 Cisco and/or its affiliates. All rights reserved. 13

• PrincipleMake the speed, depends on native JavaScript’s execution

• Markup transitionSeparation pattern: <#…>, </#...>, ${…}, ’, \r\n, …

Parsing pattern: {|}, +macro, -macro, …

• OptimizationMake it static

Cache parsed template

Return value as late as possible

© 2011 Cisco and/or its affiliates. All rights reserved. 14

http://www.easyui.org.cn/easyTemplate.html

http://www.w3cgroup.com/article.asp?id=300

http://www.w3cgroup.com/article.asp?id=311

© 2011 Cisco and/or its affiliates. All rights reserved. 15

Thank you.