Hanjst汉吉斯特优化+JsonDataFromScript等

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

<div id=”Hanjstjsondata” style=”display:none;height:0px;width:0px;”>

HANJST_JSON_DATA
</div>

这么设计并实施有显而易见的好处，简单易行，而且部署实施复杂度和实际运行效率，都在可以接受的范围。然而在一些极端情况下，网速较慢时这个DIV会曝露给终端用户，而且需要在浏览器中读取到这个DIV的内容，并进行JSON.parse操作。有没有可能将服务器返回的HanjstJsonData 直接以JavaScript的JSON变量形式放入浏览器中，使得JavaScript和Hanjst可以直接调用？这样改进后，运行速度是否会更快？

同时，还要考虑的问题是，如果做这样的改动，比如可以接收来自JavaScript脚本的JSON数据，与此同时同时，还要前向兼容目前已经使用的方式方法，也即，需要继续支持能够使用DIV形式来传递JSON数据。

另外，还要考虑到，如果新的功能，来自JavaScript的JSON数据被引用，那么是否就丢弃来来自DIV的JSON数据？两者是否需有一个优先级？

从理论上分析，如果从服务端返回的JSON数据直接放入JavaScript的JSON对象中，会减少现有的JavaScript中读取DIV内容，并进行JSON.parse的过程，与之对应地，需要考察的过程就是JavaScript中处理较大的JSON对象的效率，这个过程是否高于从DIV中读取contents并对读取到对contents进行JSON.parse？

实践出真知。我们最终决定改造Hanjst的解析引擎，使之支持来自JavaScript的JSON数据对象，在Hanjst运行环境初始化完成后，开始对JSON数据对象的探测。Hanjst 使用window.hasOwnProperty(Hanjstjsondata) 的方法来探测是否在当前JavaScript运行时环境中已经定义了Hanjst Json data的数据对象。 如果探测到已经定义了有来自JavaScript的Hanjst JSON data数据对象被定义，则使用这个作为后续的数据源。

如果没有探测到相应的数据对象被定义，则程序进行之前的过程——根据HanjstJsonDataId寻求相应的DIV，然后读取DIV的contents，然后再对contents进行JSON.parse 的操作。

如此以来，将来自JavaScript的JSON数据对象置为第一优先级，如果有则终止对DIV对探寻，如果没有再继续之前的DIV中的JSON数据的读取。既实现了对之前对兼容，也扩展了对来自JavaScript的JSON数据的支持。

改进之后增加使用JavaScript声明变量来引入JSON数据对象的写法：

<script async>

//- first order, detect

//- HANJST_JSON_DATA

var Hanjstjsondata = {“pagetitle”: “-Hanjst, Hanjst汉吉斯特”};

</script>

 

在 Hanjst demo （ https://ufqi.com/dev/hanjst/Hanjst.demo.html） 的页面实测中，使用来自DIV的JSON数据和使用来自JavaScript的JSON数据对象，两者在运行时间上并没有明显的区别。Hanjst demo的解析运行时间 （普通PC桌面浏览器），在两种情况下均在 20～40ms之间，也即 0.02～0.04s之间完成页面的样式和内容的merging操作并更新整个页面的body。

可能是Hanjst demo页面尺寸和复杂度较低，JSON data数据对象也不大，所以在运行时间上无法明显区分开来。待有正式商用的较大尺寸的页面和较复杂的页面逻辑、较大尺寸的JSON data时，再做详细的对比。目前只能从理论上证明：使用来自JavaScript的JSON对象可能会快些。

这是最近接二连三地对 Hanjst汉吉斯特进行更新的第三篇，前两篇分别是：
https://ufqi.com/blog/hanjst-ensafeexpr-updt/ ， 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等； https://ufqi.com/blog/hanjst-showimage-dotpos/ ， 🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等；

其他一些改进：

1）修改了一处 正则表达式中的 matchStr 被引用时，将双引号“进行转义操作。
2）改进了一处 关于注释代码清理的正则匹配问题，在检查 // 注释之前，先行去除 /* */

/\/\*([^]+?)\*\//gm

….

---

 

 

🙋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;

• ….

 

 https://ufqi.com/blog/hanjst-updt-jsondata-from-script/
-R/N2SL