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 ビデオ チュートリアル