Starlight - 在网页中运行 Lua

本文讲的是Starlight - 在网页中运行 Lua,

Hello world

这里是个简单示例:

JS Bin on jsbin.com

可以看到,我们把 Lua 代码包围在一个 type="application/lua" 的 <script> 标签内部。这样的标签告诉浏览器不要把这段代码当作 JavaScript,也通知 Starlight 对该标签的代码进行解析。

同时我们在浏览器环境中也引入了 Babel,因为 Starlight 输出的是 ES6 代码。并且至少到目前为止,大多数的浏览器也尚未全面支持 ES6。希望在不远的未来我们对于「引入 Babel」的需求可以大大降低。也可以参见 使用 Grunt 与 Starlight 协作 来学习如何通过预编译来避免引入 Babel。

我们还需要引入 Starlight 本身。在这里,我们使用 data-run-script-tags 这个布尔属性来告诉 Starlight 在页面载入时运行脚本。缺少这个属性的话,这些脚本就只能被手动执行了。

到这里为止就不需要其他准备工作了。注意 print() 方法会把内容输出到浏览器的控制台窗口。这一行为可以在 Starlight 的配置中修改。

MIME 类型

Starlight 会解析所有含有以下 type 的标签:

  • text/lua
  • text/x-lua
  • application/lua
  • application/x-lua

引入远端脚本

如同 JavaScript 一样,你也可以利用 src 属性来引入并运行远端的 Lua 脚本。但有一点不同,远端的文件是通过 XHR 载入的,因此远端需要做出相应的 CORS 配置。

counter-app.lua JS Bin on jsbin.com

脚本会按照在页面出现的顺序进行解析。要实现非阻塞的加载,你可以添加一个 defer 属来将某个脚本的加载动作延迟到其余所有脚本都加载完毕之后。在内联脚本标签中,defer 会被忽略。

在JavaScript中直接执行Lua代码

使用 starlight.parser.parse() ,就可以用 Starlight 在 JavaScript 中执行任意 Lua 代码。

JS Bin on jsbin.com

在这种场景下,使用解析器(parser)的一个优秀范例是:将 Lua 代码放置在 script 标签中,然后按需执行它们。这样的话,要记得不要在页面加载时就执行这些 Lua 代码,也就是说,不要加上 data-run-script-tags 这个属性。

JS Bin on jsbin.com

模块

通过 data-modname 这个属性,我们可以将 script 标签转变成一个 Lua 模块。这个标签会被预加载但不会立刻执行,同时,可以被之后其他的 Lua 代码引用(require)。但要保证这个模块所在的标签出现在其他引用它的脚本之前。

JS Bin on jsbin.com

data-modname 这个属性同样可以被用在远端 script 标签上。使用 script标签时,所有模块必须在当前页面上显式定义。除非被引用的代码在页面上定义过,否则使用相对文件路径进行 require() 都会失败。以上规则不适用于使用 Starlight 进行预编译的情况,参见 使用 Grunt 与 Starlight 协作 来获取更多信息。

fibonacci-module.lua / fibonacci-app.lua JS Bin on jsbin.com

配置

通过在引入 Starlight 浏览器端库 之前 在 JavaScript 中创建一个配置对象,我们可以对 Starlight 进行配置。

这个对象就是 window.starlight.config,目前可以通过这个对象来覆盖 stdout 的目标位置,以及向 Lua 的全局命名空间中添加变量。

接下来的例子中,我们将把 stdout 的输出从浏览器的控制台重定向到 DOM 元素中。





原文发布时间为:2016年04月22日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值