在使用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> <!-- 页面内容 --> <h2>Hi,结果请看console</h2> <!-- 数据存储节点,可以同时存在多个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操作放置在全域的母模板中,然後具體的子模板只要繼承了母模板就可以使用該功能,方便程式碼的複用。
推薦:《最新的10個thinkphp影片教學》