【Lua】用 Fengari 让 Lua 取代 JavaScript 吧！

大家好！

众所皆知，能开发网页的动态程序语言以 JavaScript 为首选，毕竟几乎所有浏览器都支援。
然而，因为原生 JavaScript 有缺陷，有时不得不使用框架和函式库来辅助。
刚好最近正在学习 Lua 的语法，也因此产生这次发文的动机，那麽我们赶紧进入主题吧！

Fengari

Fengari 是能让 Lua 在浏览器内执行的 JavaScript 专案，特色是采用 JavaScript 的垃圾回收机制，因此与 DOM 之间的操作不会造成记忆体泄漏。

Fengari 有个名为 js 的模组，能模拟 JavaScript 的行为，例如下方等价的程序码：

const str = new Date().toLocaleString('zh-Hant-TW', {
    dateStyle: 'full',
    timeStyle: 'medium'
});

str; // 2022年3月2日 星期三 03:45:00
console.log(str); // Log: 2022年3月2日 星期三 03:45:00

local js = require('js')
local window = js.global
local str = js.new(window.Date):toLocaleString('zh-Hant-TW', {
    dateStyle = 'full',
    timeStyle = 'medium'
})

print(str) -- 2022年3月2日 星期三 03:45:00
window.console:log(str) -- Log: 2022年3月2日 星期三 03:45:00

原生 JavaScript 的 Date 方法会根据系统来变更时间字串的格式，如果要自订统一格式的时间字串，可能需要函式库的辅助，或是自行编写函式才行。

然而，这时使用 Lua 就有极大的好处：

local str = os.date('%Y-%m-%d %H:%M:%S')

print(str) -- 2022-03-02 03:45:00
window.console:log(str) -- Log: 2022-03-02 03:45:00

是不是很简单呢？
如果能同时选择 Lua 和 JavaScript 各自的优势来使用，开发网页也应该不是什麽难事了。

不过，其实 Fengari 对於 JavaScript 也只是框架而已。

程序码

local js = require('js')
local window = js.global
local datetime = os.date('%Y-%m-%d %H:%M:%S')
local nickname = window:prompt('Please enter your nickname')
local document = window.document

if nickname == '' or nickname == js.null then nickname = 'unknown' end
nickname = nickname:gsub('^%l', string.upper)

document:getElementById('info').innerHTML = '<ul><li>Nickname: ' .. nickname .. '</li><li>Datetime: ' .. datetime .. '</li></ul>'

实测

<head>
    <title>Lua Demo</title>
    <script type="text/javascript" src="https://github.com/fengari-lua/fengari-web/releases/download/v0.1.4/fengari-web.js"></script>
</head>

<body>
    <article>
        <h1>Lua Demo</h1>
        <p id="info"></p>
        <p>This demo is programmed by <a href="https://www.lua.org/" target="_blank">Lua</a> and powered by <a href="https://fengari.io/" target="_blank">Fengari</a>.</p>
    </article>
    <script type="application/lua">
    <!-- 请放置上方 Lua 程序码 -->
    </script>
</body>

直接观看范例

差不多也到尾声了。
如果对文章有任何疑问，也欢迎在下方提问和建议！
我是 Felix，我们未来再见！

<<: 【JavaScript】检查Array阵列的各种方式

>>: ISO 27001 资讯安全管理系统【解析】(十二)