溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

TP中JS怎么獲取模板變量

發(fā)布時(shí)間：2021-10-15 11:03:57 來(lái)源：億速云 閱讀：180 作者：小新 欄目：編程語(yǔ)言

這篇文章給大家分享的是有關(guān)TP中JS怎么獲取模板變量的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

在使用PHP框架（本文以ThinkPHP為例）進(jìn)行頁(yè)面開(kāi)發(fā)的時(shí)候，經(jīng)常遇到需要將控制器方法中的模板變量代入到頁(yè)面JS內(nèi)操作的情況，常見(jiàn)的方式如：

  let admin={:json_encode($admin)},  //$admin是php數(shù)組
      level={$level};  
  console.log(admin, level);

這種方式確實(shí)是可以取到值的，只是存在幾個(gè)問(wèn)題

  • 模板變量的語(yǔ)法放在js中，編輯器會(huì)報(bào)語(yǔ)法錯(cuò)誤

  • 當(dāng)采用編輯器的自動(dòng)格式化功能時(shí)，模板變量的聲明結(jié)構(gòu)會(huì)被破壞，從而影響了自動(dòng)格式化代碼功能的使用

  • 不夠美觀

在實(shí)踐中比較推薦的方式是：將模板變量存到特定的節(jié)點(diǎn)中，然后由全局方法將其轉(zhuǎn)成全局的變量，最后需要用到這些變量的方法再讀取這些全局變量。下面以一個(gè)完整的模板為例：

<!DOCTYPE html>  
<html lang ="en">  
<head>  
 <meta charset="UTF-8">  
 <title>PHP框架中JS優(yōu)雅獲取模板變量的方式</title>  
 <style>  
 /* 通用的模板數(shù)據(jù)存放標(biāo)簽，視覺(jué)不可見(jiàn) */  
 .data-box {  
      display: none;  
  }  
 </style>  
</head>  
<body>  
<!-- 頁(yè)面內(nèi)容 -->  
<h3>Hi,結(jié)果請(qǐng)看console</h3>
  
<!-- 數(shù)據(jù)存儲(chǔ)節(jié)點(diǎn),可以同時(shí)存在多個(gè)data屬性 -->  
<!-- 如果模板變量是數(shù)組，須先轉(zhuǎn)成json字符串（如$admin） -->  
<div class="data-box" data-admin='{:json_encode($admin)}' data-level='{$level}'></div>  
  
  
<script>  
  /* 獲取數(shù)據(jù)的操作 */  
  
 /* 初始化頁(yè)面渲染時(shí)傳過(guò)來(lái)的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格式的字串才轉(zhuǎn)對(duì)象  
  });  
  
 /**  
  * 判斷字串是否屬于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>  
  /* 使用數(shù)據(jù) */  
 //所有保存到數(shù)據(jù)節(jié)點(diǎn)的變量都成為`dataBox`對(duì)象的屬性  
  console.log(dataBox.admin, dataBox.level);  
</script>  
</body>  
</html>

實(shí)際開(kāi)發(fā)中，我會(huì)將這里的css和獲取數(shù)據(jù)的js操作放置在全局的母模板中，然后具體的子模板只要繼承了母模板就可以使用該功能，方便代碼的復(fù)用。

感謝各位的閱讀！關(guān)于“TP中JS怎么獲取模板變量”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手