🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

自2019年元旦🙋Hanjst汉吉斯特模板语言及其编译引擎发布，已经过去一年多了。

这期间随着 🙋Hanjst汉吉斯特的推广应用，我们也陆续发布了如下一些更新内容：
🛠️Hanjst/汉吉斯特更新加JavaScript运行时优化等，
汉吉斯特Hanjst+更新升级:error reporting, innerLoop和loadingLayer，
汉吉斯特Hanjst模板语言及引擎在线文档Doc&API首发。

最近又对Hanjst汉吉斯特进行了一些更新，分别叙述如下，以备查备忘。

1. 升级: 增加API接口函数 Hanjst.showImageAsync, 用于显示HTML的图片元素

1.1. 背景及问题

<img src=”{$imgPath}” alt=”” />
该语句在 Hanjst 调用之前会造成一次对服务器端不存在的图片文件 “{$imgPath}” 的无效请求。
若非服务器端做了一些基于 .htaccess 的指向，这个请求多数情况下会返回 404 错误。实际是无意义的操作，应该设法避免。

1.2. 解决思路方法
解析HTML的页面元素 <img 是由浏览器的页面解析引擎触发，因此在流程上无法阻止对 <img 的解析。可行的思路是可以在 <img 的属性src上做文章，也即给 src 一个确定的，没有 Hanjst汉吉斯特变量的值，这样在加载时，就不会有异常抛出，然后在通过某种机制，让真正的 src值重载到这个 <img 元素上去。

给HTML中的 img 元素找一个合法合理的 src值并不容易，在网上已经讨论了很多，src值如果是“” 空值（src=“”）的话，往往会导致重新加载一次当前页面作为当前img的数据源，这显然不是预期的效果，同样的，src=“#”， src=“javascript:”, src=”about:blank”, src=”//:0″ 等等都不是很理想。

经过一番探索，我们觉得给src能够获取预期的效果的有两种思路：
A. 给予 src=”img/default.png” , 给一个默认缺省图片路径；
B. 给与 src=”data:image/png;base64,MA==” , 给与一个内容为 0 的base64图片值。

有了图片的src替代值，然后再使用 data-src 引入图片的真实的src值，通过JavaScript在页面元素加载完成后，将data-src值正式写入到当前的 <img 元素中去。

下一个待考虑的问题就是，如何调用这样一个方法或者对象，比如在 Hanjst里增加了 showImageAsync, 引用时，是写作： Hanjst.showImageAsync ，还是将这个方法输出到全局变量 window上去，写作 window.showImageAsync 或者 showImageAsync ?

经过一番思考，我们审慎地将 showImageAsync 输出到全局变量 window 上。这样在使用时，可以直接调用，写作： showImageAync(imgId) 。

1.3. 样例

修改前:
….
<img src=”{$imgPath}” alt=””/>
…

修改后:
…
<img src=”data:image/png;base64,MA==” alt=”” id=”{$imgId}” data-src=”{$imgPath}”/>
{$showImageAsync($imgId)}
…

1.4. 扩展支持更多图片异步加载
图片异步加载，对改善页面在低速网络下的表现有极大的帮助。我们在写写5G网速及页面提速中的延迟加载Lazyloading（https://ufqi.com/blog/5g-network-speed-webpage-lazyloading/）中进行了描述，如果在 Hanjst汉吉斯特中默认就集成了这样的功能，或者整个 Hanjst或者整个页面的表现具有较大的帮助。

在非上述情况下的一些场景中，也可以主动引入 showImageAsync 来使得图片能够异步加载。这一点可算是额外收获，买一赠一。

2. 改进：引入局部 bracketPos 和 dotPos ，用于判断模板语言的表述

2.1. 背景及问题

1) {$aFunc(0.2)} –> 解析有误。

在Hanjst的语法定义中，要在当前位置显示一个变量，直接使用如下写法即可：
2) {$var}

同时这个字符和后面的表达式还可以表示更多的意义：
3) {$aFunc()} –> 执行 aFunc函数并将结果显示在当前位置；
4) {$aFunc($var)} –> 携带参数执行 aFunc函数并将结果显示在当前位置；
5) {$aFunc($var1, $var2)} –> 携带两个以上参数执行 aFunc函数并将结果显示在当前位置；
6) {$var.substring(0, 10)} —> 针对变量 $var 执行JavaScript原生的字符串截取函数substring，并将结果显示在当前位置；
7) {$var=1} –> 正常的 JavaScript 赋值语句，不会在当前位置显示任何内容；
8) {$var++} –> 正常的 JavaScript 字符串运算操作，不会在当前位置显示任何内容；

然而，针对表达式 {$aFunc(0.2)} 的解析过程中，发送了错误，主要问题是在区分 . dot 和 , comma 时发生了异常，需要修复。

2.2. 解决思路方法

定位到问题的原因是由于 . dot 和 , comma 的位置问题，在程序中针对该场景下增加兼容即可，涉及到的改动也不算大，主要是在局部增加了变量 bracketPos 和 dotPos。判断的情况包括，当 dotPos 小于 bracketPos 时，是通常情况下的 6) 的表达式，当 dotPos 大于 bracketPos 时，就是要表达的 1) 式。

2.3. 样例

修改前:
…
{$aFunc(0.5)} –> 解析错误，程序抛出异常

修改后：
…
{$aFunc($abc)} –> aFunc($abc)
{$aFunc(0.5)} –> aFunc(0.5) ，携带参数 0.5 执行函数 aFunc 并将结果显示在当前位置
{$a.substring(0, 5)} –> $a.substring(0,5)
…

3. 其他一些改进优化

3.1. 重新启用 Hanjst.asyncScriptArr。
3.2. 改进 appendScript。
3.3. 改进了异步调用导入脚本程序的时序。
3.4. 同步更新了 Hanjst的在线文档手册( https://wadelau.github.io/hanjst/index )，+showImageAsync 自定义函数章节.

….

🙋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 control and achieve the same functionality 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;
….