Tiddlywiki中怎样引用外部JavaScript代码

在TiddlyWiki中引用外部JavaScript代码主要通过以下几种方式实现：直接在HTML中添加<script>标签、使用TiddlyWiki的$:/tags/Startup机制、利用Widget和macro进行封装。这些方法使得TiddlyWiki可以灵活地引入和应用JavaScript，从而扩展其功能和可定制性。每种方法都有其适用的场景和优势。直接在HTML中添加<script>标签是最直接的方法，适用于需要在TiddlyWiki加载时就引入JavaScript代码的场景。下面将详细介绍这一方法。

一、直接在HTML中添加`<script>`标签

在TiddlyWiki中，直接在HTML文件中添加<script>标签是引入外部JavaScript代码的最简单直接的方法。这种方式特别适用于那些希望在TiddlyWiki启动时即加载JavaScript代码的应用场景。

添加方法

首先，打开TiddlyWiki文件（通常是一个单一的HTML文件），找到<head>标签的区域，然后在该区域内部插入<script>标签来引用你的JavaScript文件。例如：

<script src="https://example.com/your-script.js"></script>

这行代码会告诉浏览器从指定的URL下载JavaScript文件，并在页面加载时执行该脚本。这个过程完全基于标准的HTML和JavaScript行为，因此，几乎在所有的浏览器中都能正常工作。

应用场景

这种方法最适合引用公共库（如jQuery、Lodash等）或者你自己在服务器上托管的脚本。它能确保在TiddlyWiki的其他脚本运行之前，所需的JavaScript已经被加载和执行。使用这种方法时，你需要确保引用的JavaScript代码不会干扰TiddlyWiki的内部机制，尤其是那些直接操作DOM的脚本。

二、使用TiddlyWiki的`$:/tags/Startup`机制

TiddlyWiki提供了一个强大的机制，允许在启动时运行自定义的JavaScript代码。通过创建带有$:/tags/Startup标签的tiddler，可以在TiddlyWiki启动时自动执行其中的JavaScript代码。

创建步骤

要使用这一机制，你需要创建一个新的tiddler，并将其标签设置为$:/tags/Startup。在tiddler的文本区域内，写入你的JavaScript代码。

代码示例

/*\
title: $:/plugins/yourname/yourscript.js
type: application/javascript
module-type: startup
tags: $:/tags/Startup
\*/
exports.name = "yourscript";
exports.after = ["render"];
exports.synchronous = true;
exports.startup = function() {
    // 你的代码...
};

这段代码定义了一个在启动时运行的脚本。通过设置module-type: startup，TiddlyWiki会识别这段脚本应当在启动时执行。exports.startup函数中包含了需要执行的JavaScript代码。

应用场景

这种方式特别适合那些需要在TiddlyWiki完全加载后执行的脚本，比如初始化某些设置、动态修改界面元素或者注册定制的事件监听器等。

三、利用Widget和Macro进行封装

TiddlyWiki的Widget和Macro机制允许开发者以一种更为模块化和可复用的方式引入JavaScript代码。

创建自定义Widget

通过创建自定义的Widget，可以将JavaScript代码封装在一个可重复使用的组件中。Widget可以直接放置在TiddlyWiki的界面中，或者通过其他Widget和Macro调用。

/*\
title: $:/plugins/yourname/customwidget.js
type: application/javascript
module-type: widget
tags: $:/tags/Widget
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var CustomWidget = function(parseTreeNode,options) {
    this.initialise(parseTreeNode,options);
};
/*
Inherits from the widget base class
*/
CustomWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
CustomWidget.prototype.render = function(parent,nextSibling) {
    this.parentDomNode = parent;
    this.computeAttributes();
    this.execute();
    var span = this.document.createElement("span");
    span.innerHTML = this.getAttribute("text","Hello world!");
    parent.insertBefore(span,nextSibling);
    this.domNodes.push(span);
};
/*
Compute the internal state of the widget
*/
CustomWidget.prototype.execute = function() {
    // 你的脚本逻辑...
};
exports.customwidget = CustomWidget;
})();

这段代码创建了一个简单的自定义Widget，它可以通过<$customwidget/>标签在TiddlyWiki中使用，并且允许包含一些自定义的逻辑和界面展示。

使用Macro执行JavaScript代码

Macro在TiddlyWiki中用于执行一些动态的内容生成。通过定义一个Macro，可以包装一段JavaScript代码，并在TiddlyWiki的不同部分调用它。

/*\
title: $:/macros/yourname/yourmacro.js
type: application/javascript
module-type: macro
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
exports.name = "yourmacro";
exports.params = [
    {name: "param1"}
];
/*
Run the macro
*/
exports.run = function(param1) {
    // 你的脚本逻辑...
    return "Result based on " + param1;
};
})();

这段代码定义了一个简单的Macro，它可以接收参数，并根据参数执行逻辑，返回结果。调用方式是在TiddlyWiki中使用\<<yourmacro "param">>。

结论

无论是直接在HTML中添加<script>标签、使用$:/tags/Startup机制，还是通过Widget和Macro进行封装，TiddlyWiki为开发者提供了多样化的方式来引用和执行外部JavaScript代码。这些方法各有优势，开发者可以根据实际需求和应用场景选择最适合的方式来丰富和扩展TiddlyWiki的功能。通过灵活运用这些技巧，可以使TiddlyWiki成为一个更加强大和个性化的知识管理工具。