Hanjst汉吉斯特🙋优化升级开发者模式

今日之北京（2021Mar16）与昨日之北京，是地狱（狂风大作沙尘暴白昼如夜）与天堂（和风暖阳春光大好）。慨叹大自然之神力，喟然全人类仍渺小。

Hanjst汉吉斯特🙋距离上次更新差不多有一年左右，期间陆续部署和使用，均工作良好。近日在一个老项目（有福工坊UfqiWork ：https://ufqi.com/work ）的新模块中测试时，发现一个小问题，问题虽小，其排解复杂过程和背后隐藏的问题却是值得书记于此。

故障表征为在有福工坊UfqiWork 中当用户进行地址切换时，有时页面显示为空白页。这个“有时”的情况，经过多轮多设备、多浏览器的测试试验，发现只在iOS的Safari浏览器中会出现空白页现象。其他时候均正常显示，包括在iOS，Andr，Windows，Mac，Linux等，同时包括Chrome、Edge、Firefox、Safari等浏览器上，也均正常。问题锁定在 iOS + Safari 这个情况下是空白页。

由于是手机移动端，无法开启开发者模式（后面会动用iOS连接Mac的开发者模式大杀器，是后话），只能先从服务器端进行逐行诊断扫描。经过数次的接近对比，发现故障页面和正常页面的差异进一步地被定位到几行代码上，而这几行代码的共同特征又是页面的URL地址参数。

Notepad++ 文件逐行对比

通过NotePad++的文件对比功能，在上图中，左侧是能够正常显示的页面，右侧是无法正常显示，呈现为空白页的页面。由于从服务器端来看，已经正确地的输出相关代码，为何URL地址参数为影响到页面的正常加载？ Hanjst汉吉斯特在接管页面之后干了些啥？怎么会对URL参数进行区别对待或者进行相关修改？至此，后端、服务器端能做的工作已经到了极致，前端页面能显示和不能显示的差异已经很明确的定位到URL地址参数上了。

很快我们在前端打开了 Hanjst 的调试模式，在初始化时，给与变量 IsDebug 为 true.

window.Hanjst = {‘JsonDataId’:’Hanjstjsondata’,
‘IsDebug’:true,
‘RandomString’:’randi’,
‘LoadingLayerId’:’Hanjstloading’}; // optional

遗憾地是，当Hanjst设置为调试模式时，空白页故障页面依然没有给出更多的调试信息（后面为针对此处进行改变，是后话）。

迫不得已地，我们开始寻求在手机端怎么对其浏览器行为进行侦测，通过搜索引擎检索，找到iOS设备通过线缆连接到Mac上，然后同时开启Safari，可以在Mac的Safari的开发者模式下的控制台看到同步在iOS设备上是Safari相关页面的调试信息输出。

这个 iOS Safari + Mac Safari 的连接及配置的过程稍微复杂，下面是具体的步骤信息( -R/V2SS )，转载备忘。

To start debugging you’ll need your iOS device, a mac and a lightning cable. Then start by making sure both devices are configured to allow this.

Configure devices:

Launch Safari on your mac; open preferences and within the advanced tab click the checkbox for “Show Develop menu in menu bar”.
1. Confirm, you should now see a menu called Develop in the top bar
On your iOS device (iPhone or iPad) go to Settings > Safari > Advanced and slide the toggle on for Web Inspector.

Debug a site in Mobile Safari:

Connect your iOS device (iPhone or iPad) to your mac
On the device browse to your site in Mobile Safari
On your mac’s Safari, under the Develop menu you should see an option for your iOS device (either called iPhone or iPad).
In that sub-menu you should see the url of the website you want to debug. Click that url and it will open a new Safari window with the full Safari Dev Tools.
Start your investigation!

经过一番探索和折腾，最终我们在Mac的Safari控制台上看到在iOS上的Safari访问我们的目标故障页面的调试输出信息，结果出乎所料。

iOS Safari 连接Mac Safari调试

在控制台输出的调试信息中，Hanjst汉吉斯特确实执行失败了，抛出异常的消息是遇到未识别的关键词“tel”，而tel 在上文中指示为“tel:00030101″。根据这些信息，问题就一目了然了，iOS版的Safari在收到 addrCode=00030101 这样的文本时，根据浏览器设置，自动地对 00030101 加上了电话协议的链接，相关参数变成了： addrCode=<a href=”00030101″>00030101</a> . 于是问题发生了，Hanjst预期的是对纯文本进行显示，结果多出了 <a href=””></a> 等这些字符。

实际上，Hanjst有对待待处理的支付进行双引号转义的。此处之所以发生了异常，一时iOS Safari在终端对文本进行了修改加上了超链接，另一方面还在于这一句 Hanjst语句的书写。
{$pageUrl=”abc.jsp?addrCode=00030101″}

这种直接赋值语句的写法，就跳过了 Hanjst本身对待处理字符串的双引号转义的处理程序。
问题逐渐清晰，在iOS的Safari中，如果默认开启了电话号码识别，而且页面中相关变量又有点类似电话号码，再则在Hanjst的语句中写有如下这样的语句，四则碰巧这个语句是直接写在Hanjst的主模板文件( 参考 -Hanjst-doc )中，同时满足这四个条件，则触发这个异常报错。
{$aStr=”aName=00001234567″}
–>
{$aStr=”aName=<a href=”tel:00001234567″>00001234567</a>”}

弄清问题之后，我们开始着手进行修正，将aName的待赋值放入HTML的一个input元素之中，iOS的Safari目前默认将不对input元素的值进行自动追加tel协议超链接。如此则可以回避该问题。

{$aStr=”aName=00001234567″}
–>
<input id=”aNameTag” name=”aNameTag” value=”00001234567″ type=”hidden”/>
{$aStr=”aName=”+document.getElementById(‘aNameTag’).value}

故障原因找到，问题得以解决。
鉴于在移动终端上如此艰难地调试空白页面类似故障，我们还需要进一步地升级改进Hanjst汉吉斯特，使之能够在故障发生时，除了在控制台输出异常信息，还应该考虑移动终端上无法实时地、轻易地获取控制台输出信息的情况。结合这个Issue所反馈到的信息、解决问题获得的经验，对Hanjst汉吉斯特升级改进如下。

console.log(JSON.stringify(e1200, Object.getOwnPropertyNames(e1200));
–>
var tmpStr = JSON.stringify(e1200, Object.getOwnPropertyNames(e1200));
console.log(tmpStr);
if(isDebug){ window.alert((new Date())+’:\n’+tmpStr); }

如此改进之后，当Hanjst开启调试模式之后，遇有上述异常抛出，除了在控制台输出相关异常信息外，还通过windows.alert弹出框告知调用者，从而更方便移动终端用户进行相关信息调试。Hanjst改进后的调试信息如下图。

Hanjst 汉吉斯特在移动端浏览器调试

升级改进后的Hanjst将更加容易地的调试iOS上Safari的异常抛出信息，同样地，这些改进也可以帮助在移动设备上轻易地调试的Chrome、Firefox等中Hanjst的表现。

Hanjst汉吉斯特其他改进：

1. 改进对 if conditionExpr 的支持：
{if aString.indexOf(‘abc’) > -1}
{$hasAbd=true}
{/if}

祝愿明天会更好！就如同我们越来越明晰地看到全人类即将战胜新冠肺炎病毒！

以上跨屏、跨设备传输截图图片使用：

-Mobxpc: 跨屏数据传送, Tools for Data Travelling across devices and screens

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;
….