站長資訊網(wǎng)下面thinkphp框架教程欄目將給大家介紹PHP框架中JS優(yōu)雅獲取模板變量的方式，希望對需要的朋友有所幫助！
在使用PHP框架（本文以ThinkPHP為例）進(jìn)行頁面開發(fā)的時候，經(jīng)常遇到需要將控制器方法中的模板變量代入到頁面JS內(nèi)操作的情況，常見的方式如：
let admin={:json_encode($admin)}, //$admin是php數(shù)組 level={$level}; console.log(admin, level);
這種方式確實(shí)是可以取到值的，只是存在幾個問題
- 模板變量的語法放在js中，編輯器會報(bào)語法錯誤
- 當(dāng)采用編輯器的自動格式化功能時，模板變量的聲明結(jié)構(gòu)會被破壞，從而影響了自動格式化代碼功能的使用
- 不夠美觀
在實(shí)踐中比較推薦的方式是：將模板變量存到特定的節(jié)點(diǎn)中，然后由全局方法將其轉(zhuǎn)成全局的變量，最后需要用到這些變量的方法再讀取這些全局變量。下面以一個完整的模板為例：
<!DOCTYPE html> <html lang ="en"> <head> <meta charset="UTF-8"> <title>PHP框架中JS優(yōu)雅獲取模板變量的方式</title> <style> /* 通用的模板數(shù)據(jù)存放標(biāo)簽，視覺不可見 */ .data-box { display: none; } </style> </head> <body> <!-- 頁面內(nèi)容 --> <h2>Hi,結(jié)果請看console</h2> <!-- 數(shù)據(jù)存儲節(jié)點(diǎn),可以同時存在多個data屬性 --> <!-- 如果模板變量是數(shù)組，須先轉(zhuǎn)成json字符串（如$admin） --> <div class="data-box" data-admin='{:json_encode($admin)}' data-level='{$level}'></div> <script> /* 獲取數(shù)據(jù)的操作 */ /* 初始化頁面渲染時傳過來的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格式的字串才轉(zhuǎn)對象 }); /** * 判斷字串是否屬于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> /* 使用數(shù)據(jù) */ //所有保存到數(shù)據(jù)節(jié)點(diǎn)的變量都成為`dataBox`對象的屬性 console.log(dataBox.admin, dataBox.level); </script> </body> </html>
實(shí)際開發(fā)中，我會將這里的css和獲取數(shù)據(jù)的js操作放置在全局的母模板中，然后具體的子模板只要繼承了母模板就可以使用該功能，方便代碼的復(fù)用。
推薦：《最新的10個thinkphp視頻教程》
