TyranoScript 从入门到魔改 6 页面创造
内容提要
本文介绍用HTML替代TyranoScript编写游戏页面的方法。核心是kag.html函数，通过ajax加载HTML并用jsrender渲染模板。作者提出简化版htmlPure函数，去除模板引擎，直接返回HTML字符串，以便引入Vue实现MVVM。随后新增showExtendPage标签，将HTML页面淡入到指定图层，从而摆脱脚本跳转回调和层级清除的困扰。
延伸解读
从脚本到HTML：页面开发的思路转变
文章指出，用TyranoScript编写设定、CG等页面时，代码可读性差且层级管理混乱。作者建议改用HTML直接编写页面，通过kag.html函数加载并渲染。这种转变让页面结构更清晰，也便于引入现代前端工具，适合希望提升UI开发效率的开发者参考。
htmlPure函数：为Vue集成铺路
原有kag.html依赖jsrender模板引擎，会与Vue的模板语法冲突。作者提出简化版htmlPure函数，去除模板渲染，直接返回HTML字符串。这样就能自由使用Vue实现MVVM，同时避免修改Vue的delimiters，降低了集成复杂度。
showExtendPage标签：简化页面调用
新增的showExtendPage标签将HTML页面淡入到指定图层，并支持自定义z-index。它绕过了脚本跳转的回调和层级清除问题，调用后页面直接显示，无需额外管理菜单层或标题层。这使页面切换更直观，减少了状态维护的负担。
Q&A
TyranoScript 中如何用 HTML 替代脚本创建新页面？
使用 kag.html 函数加载 HTML 文件，并通过 jsrender 渲染模板。也可以自定义简化版 htmlPure 函数，直接返回 HTML 字符串，然后结合 showExtendPage 标签将页面淡入到指定图层。
kag.html 函数的具体参数和内部实现是怎样的？
kag.html 接收三个参数：html_file_name（文件名称）、data（传入的数据）、callback（回调函数）。内部先检查缓存，若存在则用 jsrender 渲染并回调；否则通过 $.loadText 用 ajax 加载 HTML 文件，再用 $.templates 和 tmpl.render 渲染，并缓存结果。
为什么要自定义 htmlPure 函数？它和 kag.html 有什么区别？
因为作者想引入 Vue 实现 MVVM，而 jsrender 模板可能与 Vue 模板冲突。htmlPure 去除了模板引擎渲染，直接将 HTML 字符串传入回调函数，更简单，便于与 Vue 集成。
showExtendPage 标签的作用是什么？如何使用？
showExtendPage 标签用于将 HTML 页面淡入到指定图层。它调用 htmlPure 获取 HTML 字符串，创建 jQuery 对象，设置图层 zIndex，清空并淡入图层，然后追加页面内容。使用方式：在脚本中调用该标签并传入页面名称等参数。
用 HTML 写页面相比用 TyranoScript 脚本有什么好处？
用 HTML 写页面更易理解和维护，避免了脚本跳转回调和层级清除的困扰，调用 showExtendPage 标签即可使页面淡入，简化了开发流程。
在 TyranoScript 中引入 Vue 需要注意什么？
如果保留 jsrender 模板引擎，需要修改 Vue 的 delimiters 以避免模板冲突。作者选择使用 htmlPure 去除 jsrender，从而直接引入 Vue 实现 MVVM。
