Lors de l'utilisation du framework PHP (cet article utilise ThinkPHP comme exemple) pour le développement de pages, nous rencontrons souvent le besoin de remplacer les variables de modèle dans le méthode du contrôleur dans la page JS Dans le cas d'opérations internes, les méthodes courantes sont :
let admin={:json_encode($admin)}, //$admin是php数组
level={$level};
console.log(admin, level);
Cette méthode peut effectivement récupérer la valeur, mais il y a quelques problèmes
- La syntaxe des variables du modèle est placée en js, et l'éditeur signalera une erreur de syntaxe
- Lors de l'utilisation de la fonction de formatage automatique de l'éditeur, la structure de déclaration des variables du modèle sera détruite, affectant ainsi l'utilisation de la fonction de formatage automatique du code
- Pas assez belle
En pratique, plus. La méthode recommandée est la suivante : Enregistrez les variables du modèle sur un nœud spécifique, puis utilisez la méthode globale pour la convertir en variable globale. Enfin, vous devez utiliser les méthodes de ces variables pour lire ces variables globales. Prenons un modèle complet comme exemple ci-dessous :
<!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>Dans le développement réel, je placerai le css ici et l'opération js pour obtenir des données dans le modèle mère global, puis des sous-modèles spécifiques peuvent l'utiliser tant qu'ils héritent du modèle mère global. fonction modèle mère pour faciliter la réutilisation du code.
Recommandé : "Les 10 derniers didacticiels vidéo thinkphp"