无服务器 自建短链服务 Url-Shorten-Worker 优化已保存数据的列表的显示 (2 END)

上一篇, 我们找到了合适的代码来显示不同类型的内容. 有的是大段文字, 用textarea来显示; 有的是图片, 用img来显示.

但是我们使用一个怎样的代码结构呢?

我想了一下准备这样:

1. 把不同的显示方式包装为不同的函数, 放到 main.js 中. 如:

function buildValueTxt(longUrl) {}
function buildValueImg(longUrl) {}
function buildValueTxtarea(longUrl) {}

2. 设置一个函数变量, 在不同的 index.html 中, 赋值为不同的函数, 如:

在短链的 index.html 中
buildValueItemFunc = buildValueTxt

在 Pastebin 的 index.html 中

buildValueItemFunc = buildValueTxtarea

在图床的 index.html 中

buildValueItemFunc = buildValueImg

3. 在 main.js 中, 使用同样的代码逻辑:

// 长链接信息 Long url

child.appendChild(buildValueItemFunc(longUrl))

思路清晰了, 代码写起来没什么难度.

Github: https://github.com/crazypeace/url-Shorten-Worker/

演示站: 

短链: https://1way.eu.org/bodongshouqulveweifengci

网络记事本: https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue

图床: https://imghost.crazypeace.workers.dev/imghostimghost

========

顺便说一下, 如何在你自己本地做开发调试.

你应该已经 clone 或者下载了项目全代码.

打开 main.js 把开头这两个参数固定设置为你的worker地址和你的password

打开 index.html 开头固定设置对CSS的引用. (如果你不需要修改CSS那就不用了. 如果你只是修改逻辑, 大概率用不着)

在 index.html 的末尾, 固定设置对 main.js 的引用

如果你是调试 theme 目录下的 index.html  要注意目录结构.

接下来, 你就可以在本地浏览器打开 index.html 来调试了. 你在本地对 index.html 和 main.js 的修改也能实现在你本地的浏览器上.

你可以在本地, 做了以上修改以后, 对同一个worker, 使用不同的index.html来看看有什么不同的效果.