Hanjst汉吉斯特与龙书编译原理

时间过得时而飞快，时而缓慢。我们人类已经与新冠肺炎疫情奋战了快两年了，好消息是随着疫苗的不断改进和持续的普及防护能力在提升，随着口服特效药面世和不断优化升级人类也不再不堪一击了。

就像不断改进和增强的疫苗和特效药一样，Hanjst汉吉斯特🙋( https://ufqi.com/dev/hanjst/ )也在持续的优化改进升级。回顾上一次更新是在 2021年3月份：Hanjst汉吉斯特🙋优化升级开发者模式（ https://ufqi.com/blog/hanjst-updt-with-safari-tel/ ），差不多是年头一次主要升级，年尾一次主要升级。这次针对Hanjst汉吉斯特🙋改进，也是半年多来的累积改进，其中较大的亮点之一是改进针对注释语句的替换的操作。

在Hanjst汉吉斯特🙋的模板语言中，既有HTML的表述语言，也有原生的JavaScript程序代码，相应地会有HTML的注释语句，如
<!– 这是HTML注释内容 –> ，

也会有JavaScript的注释语句，如
//- 这是一个JavaScript注释行， 
/* 注释段落 JavaScript行1
     行2
     注释段落尾部
*/

其中在 JavaScript的单行注释时，这个注释既可以是一个单独的内容行，也可能是紧紧跟随在一段代码之后，如
const aString = “a-string-sample”; //- 声明一个JavaScript字符串变量

为兼容各种情况，程序逻辑事情变得异常的糟糕，经过很多次尝试之后，我们小结所遇到的困境和可能的出路时，目光一下子聚焦到被称之为”龙书（Dragon book）”的计算机程序编译的《编译原理》这本书。这本书的全民是 Compiler: Principles, Techniques and Tools (编译器: 原理，技术和工具）， 在线内容收录在 有福经典UfqiLong: https://ufqi.com/news/clscpage.1075.html?tit=编译原理 Compilers: Principles, Techniques, and Tools 。

从本质上说，从模板语言到可执行的生成终端页面呈现HTML的其他程序语言，就是一次编译过程，这个过程与龙书编译原理所描述的过程一个模样。

侠义的编译是将人类易读通用的程序语言代码“翻译”成为机器可以执行的机器语言代码。比如，将C语言程序代码“翻译”成为机器语言代码，将Java语言程序代码“翻译”成为机器语言代码。
Hanjst汉吉斯特🙋也做了类似的工作。整个翻译逻辑过程如下：

Hanjst模板语言代码 –> （翻译过程） –> JavaScript 语言程序代码 –> （翻译过程） –> 机器语言代码

这其中的“翻译过程”，就是编译器的工作过程，负责读入原语言代码，经过一系列的转换规则过滤与约束和改头换面的操作步骤，最终输出可供执行的目标语言代码程序。
如果所生成的目标代码程序是静态的文件程序代码，称之为静态语言，如果从abc.c 程序原代码到可执行的 abc.out.exe 程序文件。
对应的，如果所生成的目标程序是临时的内存态或者其他过程性临时文件，则称之为解释型语言，或者 动态语言，如直接执行 abc.js 或者 abc.pl 等，其编译后的临时文件只在运行时存在，执行完了或缓存下来或就直接被抛弃了。
整个链条中，Hanjst汉吉斯特只是做了第一个翻译过程，第二个翻译过程通常是有浏览器自带的 JavaScript编译和执行引擎来完成，比如 在 Google Chrome等浏览器中用到的 JavaScript V8 引擎 ( https://v8.dev/ )。

What is V8?

V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++. It is used in Chrome and in Node.js, among others. It implements ECMAScript and WebAssembly, and runs on Windows 7 or later, macOS 10.12+, and Linux systems that use x64, IA-32, ARM, or MIPS processors. V8 can run standalone, or can be embedded into any C++ application.

如果事情再往复杂方向继续发展，我们将不得不面临升级 Hanjst汉吉斯特的编译引擎到通用编译器的逻辑那样：
1)词法分析 Lexical  Analysis ,
2)语法分析 Syntax Anaylsis,
3) 语义分析 Semantic Analysis

目前，Hanjst汉吉斯特对模板语言的翻译尚未从最基础的词法分析，而是跳过将程序代码进行“标签化（Tokenized）” 的过程，上来就从语法分析入手，逐行对模板语句进行扫描，使用基于关键词的正则表达式对模板语句进行语义分析。经分析是当前行包括有 Hanjst汉吉斯特定义的语法关键词及相应表达式时，做如下转换：

Hanjst模板语言代码 –> （翻译过程） –> JavaScript 语言程序代码 

如果发现，当前行的内容没有相关关键词及相应的表达式时，直接跳过，将当前行视为一个普通常量字符串数据。

更上一层的语义分析的实现，则是基于语法语句分析的基础上，对包括条件控制语句、循环、退出等情况的处理，需要进行结束条件控制、关闭循环等语义层的操作时，根据一个结构数据表来进行一一对应补全。
这样的结构设计可以应付诸如模板语言这样的简单表达，同时也避免上来就进行Tokenized 的计算开销，可能是因地制宜的平衡之道吧。

然而，如果再复杂一些的情况，比如 Hanjst汉吉斯特这次修改的一个重点就是兼容行如下面的注释行，

const aString = “a-string-sample”; //- 声明一个JavaScript字符串变量

虽然几经周折，结合关键词和正则表达式成功在一些应用场景实现了预期目标，但也是逼仄式的采用了各种“奇技淫巧”——经验上看，约束条件越多，其普适性就会越差，甚至可以遇见，还有我们无法感知到的场景未被覆盖，“黑天鹅”也许就在远方。
这也许就是归纳法范式天然的缺陷。

也许，当下一只“黑天鹅”再出现时，就触及我们当前算法背后的极限，不得不使用《编译原理》中的名门正派的功夫来应对更加复杂的场景，以演绎、推理的形式彻底解决无穷尽的应用场景。

1)词法分析 Lexical  Analysis , –> 标签流Tokens Stream
2)语法分析 Syntax Analysis, –> 语法树 Syntax Tree
3) 语义分析 Semantic Analysis –> 语法树 Syntax Tree.

附加1:
来自JavaScript V8 Engine的页面JavaScipt提速优化建议
1) Improve download time, 提高JavaScript的脚步程序下载速度，一般不要超过 50KB , 再大了就拆小点， 对移动端尤其越要再小些。

2) Improve execution time, 提升执行速度，避免在主线程中放入 Long tasks. 这样才能提升页面渲染速度，尽早呈现出来。
Long tasks 是那些执行时间超过 50ms 的任务，Hanjst汉吉斯特完成翻译一个中等复杂程度的页面执行时间通常在 30ms左右。

Long task

Any uninterrupted period where the main UI thread is busy for 50 ms or longer. Common examples include:

• Long running event handlers.
• Expensive reflows and other re-renders.
• Work the browser does between different turns of the event loop that exceeds 50 ms.

3) Avoid large inline scripts, 避免页面内直接书写太长JavaScript程序代码，如果内嵌代码长度超过 1KB，就考虑将其移入某个 .js 程序文件中。

4) JSON parse is faster than Object, 这似乎超出普通认知了…

const data = { foo: 42, bar: 1337 }; // 🐌

const data = JSON.parse('{"foo":42,"bar":1337}'); // 🚀

---

Hanjst 汉吉斯特 2021年近一年来的主要更新摘要:

* 09:08 2021-03-17, imprvs for debug in mobile browsers, +support for if conditionExpr
* 17:09 2021-04-26, + _enSafeExprAsCondition .
* 21:32 2021-05-19, bugfix for remedyMemoLine .
* 12:31 2021-05-21, bugfix for &amp; .
* 09:04 2021-06-07, add more _enSafeExpr .
* 21:51 2021-06-29, +comment: use Firefox to figure out exact error lineNumber and columnNumber in tpl2code in new Function
* 21:55 2021-11-11, imprvs for remedyMemoLine

更多参考 Hanjst汉吉斯特官网：https://ufqi.com/dev/hanjst/

---

Hanjst 汉吉斯特 Logo

🙋Hanjst汉吉斯特 是一种基于JavaScript的模板语言及模版解析引擎，她运行在客户端或服务器端。

🙋Hanjst汉吉斯特 能够表述逻辑控制，能够实现与服务器端模版语言相同的强大功能。

• Hanjst当完全在客户端解析时，节省服务器端计算资源;

• Hanjst模板语言独立，不与服务器端资源做任何绑定；

• 纯粹的MVC，层间数据用JSON格式传递；

• 常见模板语言功能全支持，附带复杂而强大的JavaScript编程能力；

• 无学习成本，直接使用JavaScript书写模板语言；

• ….

Hanjst is a JavaScript-based templating language and parsing engine that runs on both the client-side and/or server-side.

Hanjst can express logical controls and achieve the same functionalities as the server-side templating languages.

• Hanjst’s Run-time in client-side, reduce computing render in server-side;

• Hanjst is Language-independent, not-bound with back-end scripts or languages;

• Totally-isolated between MVC, data transfer with JSON;

• Full-support template tags with built-in logic and customized JavaScript functions;

• No more tags languages to be learned, just JavaScript;

• ….

Hanjst汉吉斯特🙋与龙书编译原理