JavaScript JST模板引擎.docx

JavaScript JST模板引擎Trimpath JavaScript 是个轻量级的，基于JavaScript的，跨浏览器，采用APL/GPL开放源代码协议的，可以让你轻松进行基于模板编程方式的纯JS引擎。新浪的评论系统使用的就是此模板。它有如下的特点：1、采用标准的JavaScript编写，支持跨浏览器2、模板语法类似于：FreeMarker，Velocity,Smarty3、采用简易的语言来描述大段的字串以及Dom/DHTML操作4、可以很方便的解析XML文件格式的数据到指定模板。采 用该引擎，可以让它来完全处理View方面的事情，服务端Module直接输出Data就可以。让你的MVC模式连成一体，而且由于View由浏览器来处 理，大大减少了服务器的负担，用来构建Ajax技术的网络信息系统应用是一个非常好的选择。下面将通过翻译该站的文章来给大家介绍这个JST引擎的使用。CODE:1. 2. 3. 4. 5. 6. 7. 8. 9. vardata= 10. products:name:mac,desc:computer, 11. price:1000,quantity:100,alert:null, 12. name:ipod,desc:musicplayer, 13. price:200,quantity:200,alert:onsalenow!, 14. name:cinemadisplay,desc:screen, 15. price:800,quantity:300,alert:bestdeal!, 16. customer:first:John,last:Public,level:gold 17. ; 18. 19. 20. Hello$customer.first$customer.last. 21. Yourshoppingcarthas$products.lengthitem(s): 22. 23. NameDescription 24. PriceQuantity&Alert 25. forpinproducts 26. $|capitalize$p.desc 27. $p.price$p.quantity:$p.alert|default:|capitalize 28. 29. forelse 30. Noproductsinyourcart. 31. /for 32. 33. ifcustomer.level=gold 34. Weloveyou!PleasecheckoutourGoldCustomerspecials! 35. else 36. BecomeaGoldCustomerbybuyingmorestuffhere. 37. /if 38. 39. 40. /Theonelineprocessingcall. 41. varresult=TrimPcessDOMTemplate(cart_jst,data); 42. /Voila!Thatsit-theresultvariablenowholds 43. /theoutputofourfirstrenderedJST. 44. /Alternatively,youmayalsoexplicitlyparsethetemplate. 45. varmyTemplateObj=TrimPath.parseDOMTemplate(cart_jst); 46. /Now,callstomyTemplateOcess()wonthaveparsingcosts. 47. varresult=myTemplateOcess(data); 48. /SettinganinnerHTMLwiththeresultisacommonlaststep. 49. document.getElementById(outputDiv).innerHTML=result; 50. /Youmightalsodoadocument.write()orsomethingsimilar. 51. 52. 53. JST十分钟简介JST APIJST Markup SyntaxJST Standard ModifiersJST DownloadsJST Community WikiJST Browser CompatibilityJST Online Demo1、API首先到下载页面下载 template.js然后在你的JSP/ASP/PHP等文件中引用CODE:当你引用了template.js文件之后，脚本将创建一个名叫“trimpath的物件给你使用。TrimPath Object这个物件是一个全局的单一变量，也是所有trimpath组件的访问入口，除了它自身，我们尝试建立一个清晰的命名空间给您使用。下面是 Trimpath 定义的方法：CODE:TrimPath.parseDOMTemplate ( elementId, optionalDocument )得到页面中ID为elementId的Dom组件的InnerHTML，并将其解析成一个模板，这个方法返回一个templateObject对象(下面将详细描述)，解析出错时将抛出一个异常，下面是这个方法的参数：elementId DOM组件，其innerhtml将用来做模板optionalDocument 一个可选参数，在使用iframe，frameset或者默认多文档时会有用通常用来做模板的DOM元素是一个隐藏的TrimPcessDOMTemplate ( elementId, contextObject, optionalFlags, optionalDocument )一 个辅助函数，里面调用了TrimPath.parseDOMTemplate() 和 then the process() 方法以获得templateObject。输出的是templateOcess() 中返回的对象。解析出错时将抛出一个错误。下面是这个方法的参数：elementId 包含模板内容的DOM元素IDcontextObject 参考templateOcess()optionalFlags 参考templateOcess()optionalDocument 参考TrimPath.parseDOMTemplateTrimPath.parseTemplate ( templateContentStr, optionalTemplateName )解析模板方法，将一个字符串做为模板解析并返回一个templateObject参数表：templateContentStr 符合JST语法的字符串，例如: Hello $firstName $lastNameoptionalTemplateName 一个可选的字符串用来指定模板名称，辅助查错。The templateObjectTrimPath.parseTemplate() 和 TrimPath.parseDOMTemplate()的成功运行将产生一个 templateObject 它只有一个主方法templateOcess ( contextObject, optionalFlags )这个方法将模板和数据结合在一起，可以重复调用，如果没有重新解析，templateObjects的缓存和重用将获得最好的系统性能。这个函数的返回值是一个经过“渲染”过的模板的字符串。参数contextObject 必须是一个对象，并将成为模板的一个访问域，比如一个模板是：$a，那么contextObject.a必须是可以访问到的。同样$a.b.c, contextObject.a.b.c也是可以访问到的。注 意：contextObject 可以是javascript中的任意对象，包含字符串, 数字, 日期, 对象和函数。所以$groupCalender(new Date() 可以这样来调用contextObject.groupCalender(new Date()。当然，你必须自己编程实现groupCalender() 这个函数。参数optionalFlags 可以是空值，也可以是一个下面列表描述的对象：throwExceptions 默认是false,当true的时候，process() 方法将重新抛出异常，当false的时候，任何异常将停止解析模板，并在方法返回值包含一个出错信息。keepWhitespace 默认是falsel，当值为true时，模板的空白将保留。当为false时，空白(换行、空格、TAB)将被截取。Scess() 方法Scess ( contextObject, optionalFlags )做为一个便捷的方式为string对象加入一个process()的方法，让它来执行解析模板的动作。参数跟process()一样。CODE:var result = hello $firstNcess(data)/ .is equivalent to.var result = TrimPath.parseTemplate(hello $firstName).process(data);添加自定义标识符如果要采用自定义标识符，你必须把他们放在_MODIFERS 这个对象中，这些标识符集将被添加到contextObject 对象中，然后最终传给process()解析。每一个自定义标识符必须是一个函数并且至少有一个字符串参数输入和一个字符串输出。例子：CODE:var myModifiers = hello : function(str, greeting) if (greeting = null)greeting = Hello;return greeting + , + str;,zeroSuffix : function(str, totalLength) return (str + 000000000000000).substring(0, totalLength);var myData = firstName : John,getCurrentPoints : function() /* Do something here. */ return 12; myData._MODIFIERS = myModifiers;$firstNcess(myData) = John$firstName|cess(myData) = Hello, John$firstName|hello:Buenos Dcess(myData) = Buenos Dias, John$firstName|hello:Buenos Dias|cess(myData) = BUENOS DIAS, JOHN$getCurrentPoints().process(myData) = 12$getCurrentPoints()|zeroSuffix:4.process(myData) = 1200JST 的语法和语句语法CODE:$expr$expr|modifier$expr|modifier1|modifier2|.|modifierN$expr|modifier1:argExpr1_1$expr|modifier1:argExpr1_1,argExpr1_2,.,argExpr1_N$expr|modifier1:argExpr1_1,argExpr1_2|.|modifierN:argExprN_1,argExprN_2,.,argExprN_M表达式可以是除了“”之外的任何合法的javascript字符串标识符看起来像这种结构：modifierName:argExpr1,argExpr