综合演示：公用模块、全局变量、全局函数、及使用外部CDN库演示

本示例展示如何使用全局公用模块，项目内自定义中文脚本资源文件、全局封装函数复用，跨页面使用函数、以及使用外部CDN库、网络资源库。

关于“引用”关键字

在轻语言中，引用 关键字用于引入外部脚本文件，支持以下三种场景：

引用类型	示例	说明
项目内 JSX 脚本	`引用 "公用模块1.jsx"`	引入项目中自定义的中文脚本文件
外部 CDN 库	`引用 "https://code.jquery.com/jquery-1.12.4.min.js"`	引入网络上的第三方库
后端 PHP 文件	`引用 "static/lib.php"`	在后端 API 接口中引入 PHP 文件

编译时，在网页前端 引用 "xxx.jsx" 会被转换为标准的 <script src="xxx.js"> 标签，在 PHP 后端会转换为标准的 include "/file.php" 语句。

定义并使用公用脚本全局函数、全局变量

公用模块1.jsx

' ****************************************************************************
' 版权说明：Copyright（C） All Rights Reserved VcnStudio
' 程序版本：V1.0
' 文件描述：公用模块，定义全局变量和函数，供整个应用复用
' 修改日志：
' ****************************************************************************

' 全局变量：在整个应用中可直接访问
变量 公用模块1_网站URL = "http://www.vcnstudio.com"

' 全局函数：在整个应用中可直接调用
函数 公用模块1_计算乘法(参数一, 参数二)
    返回 参数一 * 参数二
结束 函数

' 带参数校验的全局函数
函数 公用模块1_计算除法(被除数, 除数)
    如果(除数 == 0)
        返回 0
    结束 如果
    返回 被除数 / 除数
结束 函数

测试公用模块页面.spl

' ****************************************************************************
' 版权说明：Copyright（C） All Rights Reserved VcnStudio
' 程序版本：V1.0
' 窗口描述：测试页面
' ****************************************************************************

' 引用项目中的公用模块
引用 "公用模块1.jsx"

事件 页面加载完毕()
    标签1.文本 = "页面加载完毕，欢迎使用 VcnStudio！"
结束 事件

事件 按钮1.被单击(来源对象, 事件源)
    ' 调用公用模块中的变量和函数
    调试输出("网站URL：" + 公用模块1_网站URL)
    调试输出("3 × 20 = " + 公用模块1_计算乘法(3, 20))
    调试输出("100 ÷ 4 = " + 公用模块1_计算除法(100, 4))
结束 事件

引用外部CDN库示例

' 引用 jQuery 库
引用 "https://code.jquery.com/jquery-1.12.4.min.js"

' 引用 Axios 库
引用 "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"

事件 按钮1.被单击(来源对象,事件源)
    ' 使用 jQuery 操作组件 
    $(标签1.取原生对象()).text("jQuery 修改文本成功！")

    ' 使用 axios 发送请求
    axios.get("/api/data").then((响应) => {
        调试输出(响应.data)
    })
结束 事件

跨页面共享数据

公用模块2.jsx

在 公用模块2.jsx 中定义全局变量，可以实现跨页面数据共享：

变量 公用模块2_全局登录状态 = 假
变量 公用模块2_全局用户信息 = 空

函数 公用模块2_设置登录状态(状态, 用户信息)
    公用模块2_全局登录状态 = 状态
    公用模块2_全局用户信息 = 用户信息
    保存配置("用户信息", JSON编码(用户信息))
结束 函数

函数 公用模块2_取登录状态()
    返回 公用模块2_全局登录状态
结束 函数

登录页面.spl

引用 "公用模块2.jsx"

' 登录页面中设置
事件 按钮_登录.被单击(源对象, 事件源)
    公用模块2_设置登录状态(真, {"姓名":"张三", "角色":"管理员"})
    切换页面("首页")
结束 事件

首页.spl

' 首页 页面中读取
事件 页面加载完毕()
    如果(公用模块2_取登录状态())
        标签1.文本 = "欢迎，" +公用模块2_全局用户信息.姓名
    否则
        切换页面("登录页")
    结束 如果
结束 事件

⚠️ 注意事项

全局变量和函数不可重复声明：在多个 .jsx 文件中不能声明同名的全局变量或函数，否则后声明的会覆盖先声明的。
建议添加前缀：为了避免命名冲突，建议在全局变量和函数名前添加模块名前缀，例如 公用模块1_网站URL、公用模块1_计算乘法。
引用顺序：如果多个模块之间互相依赖，需要确保引用顺序正确，被依赖的模块先引用。
作用域：在模块中声明的全局变量和函数，在整个应用中都可以访问，不需要额外导出。

学习要点

通过本综合演示，你可以学习到以下轻语言模块化开发技术：

知识点	代码位置	说明
引用关键字	`引用 "公用模块1.jsx"`	引入项目内 `.jsx` 中文脚本文件，编译时转换为 `<script src="xxx.js">`
外部 CDN 库引用	`引用 "https://code.jquery.com/jquery-1.12.4.min.js"`	引入网络第三方库，编译时同样转为 `<script>` 标签，可在前端直接调用 `jQuery` 等对象
后端 PHP 引用	`引用 "static/lib.php"`	在 `.sph` 后端脚本中引入 PHP 文件，编译时转换为标准 `include` 语句
全局变量定义	`变量公用模块1_网站URL = "http://www.vcnstudio.com"`	在 `.jsx` 文件顶层用 `变量` 声明即可成为全局变量，所有页面共享
全局函数定义	`函数公用模块1_计算乘法(参数一, 参数二)`	在 `.jsx` 文件顶层用 `函数` 声明即可成为全局函数
跨页面共享数据	`公用模块2_全局登录状态`	在模块中声明的全局变量在多页面之间共享，无需额外导出
持久化存储	`保存配置("用户信息", JSON编码(用户信息))`	使用 localStorage 存储用户数据，配合 `JSON编码`/`JSON解析` 序列化对象
读取持久化数据	`JSON解析(读取配置("用户信息", "{}"))`	读取 localStorage 中的字符串并用 `JSON解析` 还原为对象
原生对象调用	`$(标签1.取原生对象()).text("xxx")`	在轻语言中通过 `取原生对象()` 拿到 DOM 节点，再用 jQuery 等原生库操作
页面跳转	`切换页面("首页")`	在事件中跳转到指定名称的页面

扩展方向

你可以基于本演示继续扩展以下功能：

网络请求统一封装：在 .jsx 中封装一个全局函数 网络请求_带Token(接口,参数,回调)，自动在请求头携带登录凭证
路由守卫：在每个受保护页面 页面加载完毕 事件中调用 公用模块2_取登录状态()，未登录则跳转登录页
多语言支持：在 lang.zh.jsx、lang.en.jsx 中定义语言键值对，根据用户选择切换语言
主题切换：使用 保存配置("主题","dark") 保存用户选择，在 页面加载完毕 时动态切换 CSS 变量
数据缓存：使用 读取配置/保存配置 缓存首页轮播图、商品列表等高频数据，减少网络请求
接口拦截器：基于 Axios 封装全局响应拦截器，统一处理 401 跳转登录、500 错误提示

💡 相关文档：本演示中使用的 保存配置/读取配置 函数用法请参考文档轻语言网站：变量与数组与对象的定义；网络请求相关函数（发送GET请求、发送POST数据、请求接口）请参考文档轻语言网站：发送网络请求与接口请求；与原生 JS 集成开发请参考文档轻语言网站：与原生JS混合开发；界面 XML 标签和属性定义请参考文档轻语言网站：界面XML定义规范。

轻语言网站开发SDK文档