下面thinkphp框架教程栏目将给大家介绍PHP框架中JS优雅获取模板变量的方式,希望对需要的朋友有所帮助!
在使用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视频教程》
以上就是TP中JS如何获取模板变量(示例详解)的详细内容,更多请关注亿码酷站其它相关文章!
<!––>TP中JS如何获取模板变量(示例详解)
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除
转载请注明来源:TP中JS如何获取模板变量(示例详解)
本文永久链接地址:https://www.ymkuzhan.com/45836.html
本文永久链接地址:https://www.ymkuzhan.com/45836.html
下载声明:
本站资源如无特殊说明默认解压密码为www.ymkuzhan.com建议使用WinRAR解压; 本站资源来源于用户分享、互换、购买以及网络收集等渠道,本站不提供任何技术服务及有偿服务,资源仅提供给大家学习研究请勿作它用。 赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持,如果你喜欢该程序,请购买正版! 版权声明:
下载本站资源学习研究的默认同意本站【版权声明】若本站提供的资源侵犯到你的权益,请提交版权证明文件至邮箱ymkuzhan#126.com(将#替换为@)站长将会在三个工作日内为您删除。 免责声明:
您好,本站所有资源(包括但不限于:源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来,并未取得原始权利人授权,因此禁止一切商用行为,仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除,一切因下载人使用所引起的法律相关责任,包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读,理解、同意以上内容,如对以上内容持有异议,请勿下载,谢谢配合!支持正版,人人有责,如不慎对您的合法权益构成侵犯,请联系我们对相应内容进行删除,谢谢!