关于javascript: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:

1. 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
2. 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:

1. Connect your iOS device (iPhone or iPad) to your mac
2. On the device browse to your site in Mobile Safari
3. On your mac’s Safari, under the Develop menu you should see an option for your iOS device (either called iPhone or iPad).
4. 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.
5. Start your investigation!

• • *

通过一番摸索和折腾，最终咱们在Mac的Safari管制台上看到在iOS上的Safari拜访咱们的指标故障页面的调试输入信息，后果出乎所料。

iOS Safari 连贯Mac Safari调试

在控制台输入的调试信息中，Hanjst汉吉斯特的确执行失败了，抛出异样的音讯是遇到未辨认的关键词“tel”， 而tel 在上文中批示为“tel:00030101″。 依据这些信息，问题就高深莫测了，iOS版的Safari在收到 addrCode=00030101 这样的文本时，依据浏览器设置，主动地对 00030101 加上了电话协定的链接，相干参数变成了： addrCode=00030101 . 于是问题产生了，Hanjst预期的是对纯文本进行显示，后果多出了 等这些字符。

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

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

弄清问题之后，咱们开始着手进行修改，将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;
• ….

响应结尾北京的沙尘暴！

北京风和日丽-vs-沙尘暴

 [http://ufqi.com/blog/hanjst-u…
](https://ufqi.com/blog/?p=2489…-R/12Sg