🙋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网速及页面提速中的延迟加载Lazyloadinghttps://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;
  • ….
🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

-R/02SQ

原文链接:segmentfault.com

上一篇:React性能优化之shouldComponentUpdate、PureComponent和React.memo
下一篇:每天一道力扣题:496. 下一个更大元素 I

相关推荐

  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    4 个月前
  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    4 个月前
  • 汉吉斯特Hanjst模板语言及引擎在线文档Doc&API首发

    经过一段时间的梳理总结、精心编制,汉吉斯特Hanjst在线文档和API已经完成初版,并发布在 //wadelau.github.io 上,为方便检索和使用,兹列目录如下,供查询、使用。

    1 年前
  • 汉吉斯特Hanjst+更新升级:error reporting, innerLoop和loadingLayer

    过去的几个月里,汉吉斯特Hanjst进行了一些升级,有功能增强,也有性能优化,为Hanjst的生产环境部署增砖添瓦、保驾护航。为便于后续维护和持续更新改进,兹备忘于下。

    1 年前

官方社区

扫码加入 JavaScript 社区