🙋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

3)增加了一處顯示功能, {=$i+2} , 先對 $i 進行賦值操作,然後再在當前位置顯示出來
此前要顯示一個變量需要經過兩步驟:

a. 賦值操作: {$i=$i+2} , 空語句,只執行語句,不做顯示;
b. 顯示操作: {$i} ;

目前a, b兩步驟可以合并為一步: {=$i+2} , 先賦值操作,后顯示操作。
相當於截至目前,有兩種顯示操作方式:
3.1) {$i} : 在當前位置顯示 $i 的值;
3.2) {=$i+2} : 先進行賦值計算操作,然後再在當前位置顯示出 $i 的值. 

{$i} 等價於 {=$i+0} .

 

….


Hanjst

🙋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

This entry was posted in -Hanjst/-汉吉斯特, 编程技术, 计算机技术 and tagged , , , , . Bookmark the permalink.

发表评论

电子邮件地址不会被公开。 必填项已用*标注