how-to-realize-a-velocity-template-interpreters

how to realize a velocity template language interpreters, use Jison.

Transcript

1. Velocity.js 如何实现⼀一个编译器 1 12年12月28⽇日星期五
2. 来源：Plum • demo服务器和静态⽂文 件服务器 • less statics proxy php tms • velocity 2 12年12月28⽇日星期五
3. 要有⼀一个velocity解释器 3 12年12月28⽇日星期五
4. 解决⽅方案1 $ java -jar velcoity.jar foo.vm foo.json 4 12年12月28⽇日星期五
5. 5 12年12月28⽇日星期五
6. ⽅方案2 6 12年12月28⽇日星期五
7. ⽅方案2 6 12年12月28⽇日星期五
8. ⽅方案2 • jsVelocity 6 12年12月28⽇日星期五
9. ⽅方案2 • jsVelocity • EJS 6 12年12月28⽇日星期五
10. ⽅方案2 • jsVelocity • EJS • handlerbars 6 12年12月28⽇日星期五
11. ⽅方案2 • jsVelocity • EJS • handlerbars • doT.js 6 12年12月28⽇日星期五
12. ⽅方案2 • jsVelocity • EJS • handlerbars • doT.js • Juice 6 12年12月28⽇日星期五
13. ⽅方案2 • jsVelocity • EJS • handlerbars • doT.js • Juice • Logic-less templates 6 12年12月28⽇日星期五
14. jsVelocity • 第⼀一步：识别变量 7 12年12月28⽇日星期五
15. 可以处理的情况 8 12年12月28⽇日星期五
16. 实际情况是 9 12年12月28⽇日星期五
17. 上⾯面只是简单模式 10 12年12月28⽇日星期五
18. 复杂的情况 • 变量是由三种基本模式 组合⽽而来，正则⽆无法匹 配 11 12年12月28⽇日星期五
19. 复杂的情况 • 变量是由三种基本模式 组合⽽而来，正则⽆无法匹 配 11 12年12月28⽇日星期五
20. 复杂的情况 • 变量是由三种基本模式 组合⽽而来，正则⽆无法匹 配 11 12年12月28⽇日星期五
21. 复杂的情况 • 变量是由三种基本模式 组合⽽而来，正则⽆无法匹 配 11 12年12月28⽇日星期五
22. 复杂的情况 • 变量是由三种基本模式 组合⽽而来，正则⽆无法匹 配 11 12年12月28⽇日星期五
23. ⽤用ruby和python语法写js 共同之处在于，如何解析复杂规则 http://coffeescript.org/ 12 12年12月28⽇日星期五
24. 在解释什么是jison之前，总节 一下本次分享的第一个重要的 话题。前面讲了很多，其实是 如何实现一个编译器这个问题 最关键的步骤，后面是具体怎 么做，前面的步骤是，找到解 决问题的方法，我觉得，前者 更加重要。 13 12年12月28⽇日星期五
25. 在解释什么是jison之前，总节 一下本次分享的第一个重要的 话题。前面讲了很多，其实是 如何实现一个编译器这个问题 最关键的步骤，后面是具体怎 么做，前面的步骤是，找到解 决问题的方法，我觉得，前者 更加重要。 13 12年12月28⽇日星期五
26. What can Jison do? 14 12年12月28⽇日星期五
27. vexflow 15 12年12月28⽇日星期五
28. handlebarsjs 16 12年12月28⽇日星期五
29. zaach/reflect.js 17 12年12月28⽇日星期五
30. Jison是⼀一种通⽤用技术 • css render https://speakerdeck.com/ dmosher/so-you-want-to-be-a-front-end- engineer 18 12年12月28⽇日星期五
31. Tom and Jerry 19 12年12月28⽇日星期五
32. Tom 和 Jerry为什么会 发⽣生故事？ 20 12年12月28⽇日星期五
33. 猫吃⽼老⿏鼠 21 12年12月28⽇日星期五
34. ⽣生物链规则 22 12年12月28⽇日星期五
35. ⽣生物链规则 • 为什么是猫吃⽼老⿏鼠，⽽而 不是Tom eat Jerry? 22 12年12月28⽇日星期五
36. ⽣生物链规则 • 为什么是猫吃⽼老⿏鼠，⽽而 不是Tom eat Jerry? • 编译器实现的是⼀一套语 法规则的解析 22 12年12月28⽇日星期五
37. ⽣生物链规则 • 为什么是猫吃⽼老⿏鼠，⽽而 不是Tom eat Jerry? • 编译器实现的是⼀一套语 法规则的解析 • 语法规则和⾷食物链规则 类似 22 12年12月28⽇日星期五
38. ⽣生物链规则 • 为什么是猫吃⽼老⿏鼠，⽽而 不是Tom eat Jerry? • 编译器实现的是⼀一套语 法规则的解析 • 语法规则和⾷食物链规则 类似 • 分为Grammer和Lex 22 12年12月28⽇日星期五
39. 语法规则 • reference = $ + id + attributes • attributes = attribute | attributes + attribute • attribute = method | index | property • method = id + ( + param + ) • index = [ + reference + ] • property = dot + id 23 12年12月28⽇日星期五
40. 递归 • 递归定义 • 问题不断拆分成⼩小问题 • ⽆无法匹配⼀一个vm语法 的复杂规则，但是可以 匹配规则的元素 24 12年12月28⽇日星期五
41. 25 12年12月28⽇日星期五
42. 语法分析过程 http://zaach.github.com/jison/demos/calc/ 26 12年12月28⽇日星期五
43. 语法分析过程 http://zaach.github.com/jison/demos/calc/ 26 12年12月28⽇日星期五
44. $hello.foo[0] { "type": "references", "id": "hello", "leader": "$", "path": [ { "type": "property", "id": "foo" }, { "type": "index", "id": { "type": "integer", "value": "0" } } ] } 27 12年12月28⽇日星期五
45. #if($foo > 10) { "type": "if", "condition": { "type": "math", "operator": ">", "expression": [ { "type": "references", "id": "foo", "leader": "$" }, { "type": "integer", "value": "10" } ] } } 28 12年12月28⽇日星期五
46. #foreach($bar in [-2..4]) { "type": "foreach", "to": "bar", "from": { "type": "array", "isRange": true, "value": [-2, "4"] } } 29 12年12月28⽇日星期五
47. 第⼆二步，解释 30 12年12月28⽇日星期五
48. • http://git.shepherdwind.com/velocity.js/ runner/tests.html?grep=expression • https://github.com/shepherdwind/velocity.js/ blob/master/src/compile/expression.js#L11 • https://github.com/shepherdwind/velocity.js/ blob/master/src/parse/velocity.yy#L190 expression 31 12年12月28⽇日星期五
49. Block语法 32 12年12月28⽇日星期五
50. 解决问题(解释器) 理论(编译原理) 问题(vm规则) + 问题解决⼀一般思路 实现编译器之前，需要知道编译原理 33 12年12月28⽇日星期五
51. 3.学习需要的技术 4.解决问题 5.总结 2.寻找相似问题解决⽅方案 1.关注问题 6.编译原理 实际问题解决过程 34 12年12月28⽇日星期五
52. 3.学习需要的技术 4.解决问题 5.总结 2.寻找相似问题解决⽅方案 1.关注问题 6.编译原理 实际问题解决过程 34 12年12月28⽇日星期五
53. 灵感来源：顿悟 35 12年12月28⽇日星期五
54. Thanks 36 12年12月28⽇日星期五