轻语言网站：与原生JS混合开发

文档概述

在轻语言网页开发中，其界面逻辑代码文件（.spl）、与 .jsx 文件代码可以与原生 JS 代码或引用外部 js 文件混合开发，也可以直接使用原生 JS 函数、即浏览器支持的任意 API 函数。

学习目标

阅读本文档后，你应当能够掌握以下内容：

使用 引用 "URL" 引入外部 JS 文件（CDN 或项目内 ./static/）
直接调用原生 JS 内置函数：alert()、console.log() 等
使用 document.createElement 创建原生 DOM 元素并加入布局
使用 创建 Date() 创建原生 JS 对象
调用引入的 JS 库中的函数（如 jQuery 的 $.get）
同源策略与跨域（CORS）限制
通过 根布局.添加组件(原生元素) 将原生 DOM 加入轻语言布局

涉及关键字与函数

关键字： 引用、变量、事件 ... 结束事件、创建

引用语句：

引用 "网络URL" —— 引入 CDN 上的 JS 文件
引用 "./static/路径" —— 引入项目内 static 目录的 JS 文件

原生 JS API：

alert(文本) —— 弹出提示框
console.log(内容) —— 控制台输出
document.createElement(标签名) —— 创建 DOM 元素
创建 Date() —— 创建原生 Date 对象
$.get(地址, 回调) —— jQuery 的 GET 请求

布局方法：

布局.添加组件(原生元素) —— 将原生 DOM 元素添加到轻语言布局

使用原生JS文件

代码示例：

' 添加并引用网络地址的 jquery
引用 "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"

' 添加并引用项目资源文件夹中的外部js库
' 注意：需要添加 "./static/" 资源文件夹的路径前缀，添加网络CDN地址不需要
引用 "./static/js/lunar.min.js"

事件 页面加载完毕()
	
结束 事件

事件 按钮1.被单击(源对象,事件源)
	变量 局_Solar = Solar.fromDate(创建 Date())
    调试输出(局_Solar)
    ' 转阴历
    变量 局_阴历 = 局_Solar.getLunar()
    调试输出(局_阴历.toString())
    调试输出(局_阴历.toFullString())
结束 事件

事件 按钮2.被单击(源对象,事件源)
    ' 注意：这里由于同源策略的安全限制，请求地址只能为同一个IP或域名的地址
    ' 如果直接访问非本源地址，会报跨域错误 Access-Control-Allow-Origin
    $.get("http://www.vcnstudio.com/",(请求结果)=>{
        调试输出(请求结果)
    })
结束 事件

引用外部 JS 要点

CDN 地址：引用 "https://..." 直接引入网络 JS 文件
项目内 JS：引用 "./static/..." 必须带 ./static/ 前缀
引用位置：引用 语句写在文件顶部（事件外）
调用库函数：引用后可直接使用库中的全局对象，如 Solar.fromDate()、$.get()
跨域限制：使用 $.get 等网络请求受同源策略限制

使用JS原生函数

代码示例：

事件 按钮3.被单击(源对象,事件源)
    ' 轻舟网站开发支持直接与原生JS代码混合开发，以及直接使用原生JS函数
    ' 例如：
    ' 网页开发中常见的内置函数，console.log()、alert() 等等
    alert("我是原生Js函数调用的信息框")
    console.log("我是原生js函数调用的控制台输出信息")
结束 事件

事件 按钮4.被单击(源对象,事件源)
    ' 使用纯JS代码创建网页元素
    变量 mBtn = document.createElement("button")
    ' 通过 style 属性设置元素样式
    mBtn.style.width = "200px"
    mBtn.style.height = "100px"
    mBtn.style.backgroundColor = "lightblue"
    mBtn.style.border = "1px solid black"
    mBtn.style.textAlign = "center"
    mBtn.style.lineHeight = "100px"
    mBtn.style.position = "absolute"
    mBtn.style.top = "300px"
    mBtn.style.left = "300px"
    ' 注册组件被单击事件
    mBtn.addEventListener("click",()=>{
        mBtn.textContent = "你点击了这个 div!"
        ' 改变背景颜色
        mBtn.style.backgroundColor = "lightgreen" 
    })
    ' 设置元素文本（这里我们创建的是一个按钮）
    mBtn.textContent = "这是一个使用JS创建的按钮"
    ' 将组件添加到页面根布局中
    根布局.添加组件(mBtn)
结束 事件

原生 JS 函数使用要点

内置函数直接调用：alert()、console.log()、document.createElement() 等
创建原生对象：创建 Date() 创建原生 JS 对象（创建 关键字替代 new）
DOM 操作：可直接操作 style、addEventListener、textContent 等原生属性
混入布局：通过 布局.添加组件(原生元素) 将原生 DOM 元素加入轻语言布局中
事件注册：使用原生 addEventListener("click", 回调) 注册事件

注意事项

引用位置：引用 语句必须写在文件顶部（所有事件/函数之外）。
项目内 JS 需带前缀：引用 static 目录的 JS 文件必须带 ./static/ 前缀；CDN 地址不需要。
同源策略：使用 $.get 等原生网络请求时，请求地址只能为同源（同 IP/域名）地址，跨域会报 Access-Control-Allow-Origin 错误。
创建 替代 new：创建原生 JS 对象时使用 创建类名()，而非 new 类名()。
DOM 元素加入布局：原生 document.createElement 创建的元素通过 布局.添加组件(元素) 加入轻语言布局。
库函数依赖引用：使用库中函数前必须先 引用 对应的 JS 文件，否则会报"未定义"错误。
跨域解决方案：如需跨域请求，服务端需配置 CORS 响应头，或使用 JSONP、代理等方式。

学习要点总结

知识点	关键代码	适用场景
引用 CDN	`引用 "https://..."`	引入网络 JS
引用项目 JS	`引用 "./static/..."`	引入项目内 JS
内置函数	`alert()` / `console.log()`	原生 API
创建原生对象	`创建 Date()`	替代 `new`
创建 DOM	`document.createElement(...)`	原生元素
DOM 加入布局	`根布局.添加组件(元素)`	混合开发
事件注册	`addEventListener("click", 回调)`	原生事件
jQuery 请求	`$.get(地址, 回调)`	网络请求
跨域限制	同源策略 / CORS	安全限制

轻语言网站开发SDK文档

轻语言网站：与原生JS混合开发

文档概述

学习目标

涉及关键字与函数

使用原生JS文件

引用外部 JS 要点

使用JS原生函数

原生 JS 函数使用要点

注意事项

学习要点总结

相关文档