溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關TP中JS怎么獲取模板變量的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
在使用PHP框架（本文以ThinkPHP為例）進行頁面開發的時候，經常遇到需要將控制器方法中的模板變量代入到頁面JS內操作的情況，常見的方式如：
let admin={:json_encode($admin)}, //$admin是php數組
level={$level};
console.log(admin, level);這種方式確實是可以取到值的，只是存在幾個問題
模板變量的語法放在js中，編輯器會報語法錯誤
當采用編輯器的自動格式化功能時，模板變量的聲明結構會被破壞，從而影響了自動格式化代碼功能的使用
不夠美觀
在實踐中比較推薦的方式是：將模板變量存到特定的節點中，然后由全局方法將其轉成全局的變量，最后需要用到這些變量的方法再讀取這些全局變量。下面以一個完整的模板為例：
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>PHP框架中JS優雅獲取模板變量的方式</title>
<style>
/* 通用的模板數據存放標簽，視覺不可見 */
.data-box {
display: none;
}
</style>
</head>
<body>
<!-- 頁面內容 -->
<h3>Hi,結果請看console</h3>
<!-- 數據存儲節點,可以同時存在多個data屬性 -->
<!-- 如果模板變量是數組，須先轉成json字符串（如$admin） -->
<div class="data-box" data-admin='{:json_encode($admin)}' data-level='{$level}'></div>
<script>
/* 獲取數據的操作 */
/* 初始化頁面渲染時傳過來的js變量 */
let dataContainerElem = document.querySelector('.data-box'),
data = dataContainerElem ? dataContainerElem.dataset : {},
dataBox = {}; //模板變量容器，`.data-box`類選擇器所在的所有`data`屬性值集合
Object.keys(data).forEach(function (key) {
dataBox[key] = data[key];
if (isJsonString(data[key])) dataBox[key] = JSON.parse(data[key]); //是json格式的字串才轉對象
});
/**
* 判斷字串是否屬于json字串
*/
function isJsonString(str) {
let flag = false;
if (typeof str != 'string') return flag;
try {
JSON.parse(str);
flag = true;
} catch (e) {}
return flag;
}
</script>
<script>
/* 使用數據 */
//所有保存到數據節點的變量都成為`dataBox`對象的屬性
console.log(dataBox.admin, dataBox.level);
</script>
</body>
</html>實際開發中，我會將這里的css和獲取數據的js操作放置在全局的母模板中，然后具體的子模板只要繼承了母模板就可以使用該功能，方便代碼的復用。
感謝各位的閱讀！關于“TP中JS怎么獲取模板變量”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
