🙋Hanjst漢吉斯特優化+JsonDataFromScript等詳情 - javascript,前端,html5,模板引擎,模板 wadelau 博客

近日繼續對 🙋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