페이지 개발을 위해 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 작업을 배치한 다음 특정 하위 템플릿이 이를 상속하는 한 이를 사용할 수 있습니다. 코드 재사용을 용이하게 하는 어머니 템플릿 기능.