漢吉斯特Hanjst+更新升級:error reporting, innerLoop和loadingLayer

過去的幾個月裏，漢吉斯特Hanjst進行了一些升級，有功能加強，也有性能優化，爲Hanjst的生產環境部署增磚添瓦、保駕護航。爲便於後續維護和持續更新改進，茲備忘於下。

* 12:48 Saturday, April 27, 2019, + readable error reporting for template erros
* 19:19 Sunday, May 19, 2019, + renderTemplateRecurse for deep-in include files.
* 18:44 Friday, May 31, 2019, + allow limited support for variables in xxxelse scope, bugfix for includeScript.
* 07:58 6/2/2019, + imprvs with _appendScript to appendScript for async call.
* 16:31 Wednesday, June 5, 2019, + imprvs with parentNode=BODY
* 19:18 Monday, June 10, 2019, + bugfix for asyncScripts.
* 22:29 Thursday, June 13, 2019, + loadingLayer. 「<div id=」Hanjstloading」 style=」width: 100%; height: 100%; z-index: 99;」> Xxxx Loading… 加載中… </div>」 .
* 21:36 Thursday, June 20, 2019, + warning for MSIE browsers.

1. 增長可讀性錯誤異常報告
   當Hanjst遇到語法錯誤時，拋出可讀性的異常代碼描述，造成能夠追蹤的錯誤報告，其大體形式以下：

   Hanjst template code exec failed.

   {「stack」:」ReferenceError: $myAds2 is not defined\n at eval (eval at renderTemplate (http://example.com/view/default/js/Hanjst.js?v=201906171103:468:15), :405:1)\n at renderTemplate (http://example.com//view/default/js/Hanjst.js?v=201906171103:468:39)\n at _callRender (http://example.com//view/default/js/Hanjst.js?v=201906171103:679:9)\n at http://example.com//view/default/js/Hanjst.js?v=201906171103:698:9\n at http://example.com//view/default/js/Hanjst.js?v=201906171103:701:3″,」message」:」$myAds2 is not defined」}

   Line 404:

   Line 405: if( $myAds2[‘sadplace’]==’homepage_up_right’){

   Line 406: tpl2js.push(」 <a href=\」」);

    

   根據這些具體到行號的錯誤提示信息，開發者能夠較快地找到出錯位置並進行修正。如上所示，代表在模板引擎進行解析時，發如今第405行有未定義的 $myAds2 這樣的變量未經初始化就開始使用，因此報錯。

   注意！值得注意！ Hanjst 全程開啓 JavaScript 的 Strict mode，不容許使用未經定義的變量！
    

2. 改進Hanjst循環嵌套模板的處理方法
   在第一版的 Hanjst模板引擎設計中，咱們假定模板的嵌套只有一層，也即一個模板中經過include 指令引入了另一個模板內容。
   {include file=」$anotherTemplateFileContent」}

   隨着 Hanjst 應用場景的複雜化，多層嵌套成爲必然，有鑑於此，咱們升級改進了 Hanjst，容許無限層的模板內容嵌套。也就是父頁面能夠引入嵌套子頁面，子頁面內也能夠進一步的嵌套引入孫頁面，如此遞歸不止。
    

3. 增長對 forelse, foreachelse, whileelse下的模板語言支持
   一般狀況下，若是循環一個數列，若是遇到輪空的狀況，默認咱們設計了給一個提示，以下所示。

   {foreach $myList as $l}
       //- some data
   {foreachelse}
       //- a warning…
   {/foreach}

    

   此次改進是在 「a warning」 部分給與有限功能的模板支持，好比容許使用變量進行替換操做等。
    

4. 改進對async引入腳本的處理方法
   對嵌套頁面的腳本程序引入有兩種方式，一種是直接執行，另一種方式是記帳並延後進行引入。
   其中後面一種異步的async方式，對提高頁面加載速度有很大幫助。因此在 Hanjst的改進中予以實現，當有非必要能夠延後加載的腳本，均可以經過 async方式安排當頁面首屏加載完成後再繼續。
   上面是理想狀況，還有非理想的狀況時，當有些頁面元素還爲就緒時，一些依賴於其上的腳本就沒法執行，這時候就是無可奈何須要等頁面元素就緒後再加載腳本程序。
   根據這些，咱們建議對象什麼類腳本程序能夠直接加載，而對對象的調用類腳本，通常都安排async異步加載爲好。

   <!–
   JavaScript codes which will be run only once after Hanjst’s work, 
   should be placed below here, after Hanjst, and keep in mind:
   1) ‘use strict’ mode, add comma for each sentence;
   2) src of Objects should be loaded in sync mode, e.g. jquery.min.js;
   3) invokes with Objects should be loaded in async mode, e.g. base.js;
   –>

   
    

5. 增長對Hanjst父元素的探測
   這是改進是因爲 HTM自己限制致使的，根據實驗結果所示，瀏覽器的解析引擎進行頁面渲染時，若是是放入未關閉的 div 內的腳本，默認是不執行而直接跳過的。
   如此以來，若是將 Hanjst 放入一個 div 元素，則默認隨頁面自動啓動的 Hanjst解析引擎啓動後，隨後的加載嵌套頁面的腳本等就沒法實現了。
   有鑑於此，當 Hanjst啓動時，探測若是其父元素不是默認和預期的 body 時，就拋出異常進行報錯。
   待開發者進一步解決問題以後再繼續。

    

6. 增長loadingLayer
   當Hanjst進行編譯頁面時，原始代碼會曝露給調用者，儘管時間是 毫秒級（ms）的，但若是碰上較慢的網速，依然有不完美的「印象」。
   爲此，咱們設計了當 Hanjst 工做時，前端預置一個」幕布」, loadingLayer , 顯示給用戶，當頁面完成編譯後，大幕揭開，完美呈現！

   <div id=」Hanjstloading」 style=」width:100%;height:100%;z-index:99;opacity:0.92;position:absolute;background-color:#ffffff;」> Hanjst Loading… 加載中

    

   Hanjst loading layer默認的元素id是 Hanjstloading, 也能夠經過啓動參數：

   Hanjst.LoadingLayerId = ‘myLoadingLayer’;

    

   來指定自定義的元素Id。

7. 增長對過期MSIE的探測
   若是瀏覽器太老了，好比 微軟 IE瀏覽器，特別是8.0之前的版本，對JavaScript支持有限，沒法順利完成 Hanjst 的編譯與解析，就會出錯。
   爲便於用戶感知這些，咱們改進 Hanjst 增長了對 MSIE太老版本的探測，並給用於相應的提示。

    

---

Hanjst是一種基於JavaScript的模板語言及解析引擎，她運行在客戶端/服務器端。

Hanjst可以表述邏輯控制，可以實現與服務器端模塊語言相同的功能。

• Hanjst當徹底在客戶端解析時，節省服務器端計算資源;

• Hanjst模板語言獨立，不與服務器端資源作任何綁定；

• 純粹的MVC，層間數據用JSON格式傳遞；

• 常見模板語言功能全支持，附帶複雜而強大的JavaScript編程能力；

• 無學習成本，直接使用JavaScript書寫模板語言；

• ….
  
  -R/s2ST