Apabila menggunakan rangka kerja PHP (artikel ini menggunakan ThinkPHP sebagai contoh) untuk pembangunan halaman, kami sering dihadapi Apabila perlu untuk menggantikan pembolehubah templat dalam kaedah pengawal ke dalam halaman JS untuk operasi, kaedah biasa ialah:
let admin={:json_encode($admin)}, //$admin是php数组
level={$level};
console.log(admin, level);Kaedah ini memang boleh mendapatkan nilai, tetapi terdapat beberapa masalah
- Jika sintaks pembolehubah templat diletakkan dalam js, editor akan melaporkan ralat sintaks
- Apabila fungsi pemformatan automatik editor digunakan, struktur pengisytiharan pembolehubah templat akan dimusnahkan, dengan itu Mempengaruhi penggunaan fungsi kod pemformatan automatik
- Tidak cukup cantik
Dalam amalan, cara yang lebih disyorkan ialah: Simpan pembolehubah templat ke dalam nod tertentu, dan kemudian gunakan Kaedah global menukarnya kepada pembolehubah global Akhir sekali, anda perlu menggunakan kaedah pembolehubah ini untuk membaca pembolehubah global ini . Mari kita ambil templat lengkap sebagai contoh:
<!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>Dalam pembangunan sebenar, saya akan meletakkan css di sini dan operasi js untuk mendapatkan data dalam templat ibu global, dan kemudian sub-templat khusus hanya perlu untuk mewarisi Templat induk boleh menggunakan fungsi ini untuk memudahkan penggunaan semula kod.
Disyorkan: "10 tutorial video thinkphp terkini"
