javascript-utils.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="javascript-utils.js" type="application/javascript"></script>
  7. </head>
  8. <body>
  9. <div class="container">
  10. </div>
  11. </body>
  12. </html>
  13. <script type="text/javascript">
  14. var nodes = {
  15. CallExpression:{
  16. render:function (json){
  17. return `<span class="CallExpression">
  18. <div class="expression">
  19. <span>执行函数</span><span class="callee">${render(json.callee)}</span></div>
  20. <span>参数</span><span>${renderList(arguments)}</span>
  21. </span>`
  22. }
  23. },
  24. ExpressionStatement:{
  25. render:function (json){
  26. return `<span class="ExpressionStatement">
  27. <div class="expression">${render(json.expression)}</div>
  28. </span>`
  29. }
  30. },
  31. ThisExpression:{
  32. render:function (json){
  33. return "this";
  34. }
  35. }
  36. ,
  37. MemberExpression:{
  38. render:function (json){
  39. return `<span class="MemberExpression">
  40. <span class="member-object">${render(json.object)}</span><span class="member-property">.${json.property}</span>
  41. </span>`
  42. }
  43. },
  44. Identifier:{
  45. render:function (json){
  46. return json.name;
  47. }
  48. },
  49. VariableDeclaration: {
  50. render: function (json) {
  51. return `<span class="VariableDeclaration">
  52. <span>声明变量</span>
  53. <span class="var-name"><input value="${render(json.id)}"></span>
  54. <span class="var-is">值为</span>
  55. <span class="var-init">${render(json.init)}</span>
  56. </span>`
  57. }
  58. }
  59. }
  60. function render(json) {
  61. let type = nodes[json.type];
  62. if(!type){
  63. return "";
  64. }
  65. return type.render(json);
  66. }
  67. function renderList(json) {
  68. let list = [];
  69. for(let i=0;i<json.length;i++){
  70. list[i] = render(json[i]);
  71. }
  72. return list.join("");
  73. }
  74. function parse(json){
  75. let container = document.getElementsByClassName('container')[0];
  76. for(let i=0;i<json.length;i++){
  77. container.innerHTML=render(json[i]);
  78. }
  79. }
  80. </script>