记不得，憋不住 | Can't Remember, Can't Shut Up

上一篇, 我们找到了合适的代码来显示不同类型的内容. 有的是大段文字, 用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))

在 短链系统, 网络记事本系统, 图床系统 中, 已保存数据的列表的显示方式 需求是不同的. 记事本系统, 应该用一个多行文本框来显示 value. 如下: 图床系统, 应该以图片的形式显示 value. 如下: 短链系统就是原来的显示方式. 以文本形式显示全部value即可. 代码已经有了. 功能也是对的.  现在问题是, 怎么合理的设计代码结构, 让 worker.js 里面的配置项可以控制列表的显示方式. 设置什么系统的配置项是在 worker.js 里面. 最多还有一项, 控制加载哪个 index.html 但是实现列表显示的功能在 main.js 里面.  main.js 这个文件在 Github 上. 在 index.html 文件里面指定加载. 如果把 main.js 的文件内容搬出来放到 index.html, 然后不同的系统使用不同的 index.html , 小改一下 JS 代码的逻辑, 实现显示效果的差异.  这样是能够实现效果没错, 但 main.js 里面大段相同的代码要复制到每个 index.html 里面, 太不优雅了.  如果以后, 相同部分的代码需要修改, 那就是霰弹枪伤, 要打开这么多个index.html一个一个的改, 如果改错了, 漏掉了, 就有问题了. - To Be Continued

源码 GitHub:  https://github.com/crazypeace/Url-Shorten-Worker 搭建教程:  https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html localStorage里只写短链的随机字符串 略 显示urlList的部分不用<ul>里面套<li>了。改为<div>里面套<div> 略 显示短链的时候，前面加个删除按钮 先把自动加载localStorage关了，然后在html里试着写一下，看看效果。 <div class="card-text">   <div classs="list-group" id="urlList">      <div class="list-group-item">       <button type="button" class="btn btn-danger">X</button>       <span>some text</span>     </div>     <div class="list-group-item">       <button type="button" class="btn btn-danger">X</button>       <span>some text some text some text some text some text some text some text some text some text some text some text </span>     </div>   </div> </div> API支持删除短链 POST增加字段 cmd: 取值add, del; keyPhrase: 在add时，是自定义短链；在del

源码 GitHub: https://github.com/crazypeace/Url-Shorten-Worker 搭建教程: https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html 效果:

源码 GitHub: https://github.com/crazypeace/Url-Shorten-Worker 搭建教程: https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html 效果: 不同的浏览器页面，缓存不互通。这样，不同的使用者互相之间不知道用本服务创建了什么短链。

源码 GitHub: https://github.com/crazypeace/Url-Shorten-Worker 搭建教程: https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html 准备美化一下  https://github.com/crazypeace/Url-Shorten-Worker/ 看了一下源项目，使用的是 Bootstrap 4 参考： https://getbootstrap.com/docs/4.0/components/input-group/ 我们准备抄这个设计格式 找到对应的示例是: <div class="input-group mb-3">   <div class="input-group-prepend">     <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>   </div>   <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </div>  最终效果：

源码: https://github.com/crazypeace/Url-Shorten-Worker 搭建方法: https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html

源码GitHub:  https://github.com/crazypeace/Url-Shorten-Worker 搭建方法： https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html

源码 GitHub  https://github.com/crazypeace/Url-Shorten-Worker 演示站  https://urlsrv.crazypeace.workers.dev/bodongshouqulveweifengci 申请Cloudflare账号，略。 创建一个KV 记得这个KV的名字，以  urlsrv  为例 查看此KV 添加一个条目Entry 密钥key为 password ，值value为一个随机字符串. * password 这个key是在脚本中要引用的，所以要设置这个。 随机字符串可以使用http://git.io/xkcdpw生成 随机字符串以  yejiandianci  为例 创建Worker服务 设置绑定KV 变量名称必须设置为 LINKS ， KV的名字选刚刚创建的 urlsrv * LINKS 是在脚本中要引用的，所以要设置这个。换句话说，如果你使用别的脚本，可能这个变量名称就不是LINKS了。 编辑Worker的脚本 把原有的内容全部删掉 换成： https://github.com/crazypeace/Url-Shorten-Worker/blob/main/worker.js 的内容 保存并部署 ====== 完 要访问 你的worker域名/ yejiandianci  来打开使用页面 如：https://snowy-disk-fd82.ciys.workers.dev/yejiandianci ====== 后记 你可以通过 在你自己的域名下worker页面添加一个路由指向worker 的方式来实现比如  https://1way.eu.org/mtSzm6  替代 snowy-disk-fd82.ciys.workers.dev/yejiandianci 的效果。 ====== 配置参数的作用 const config = {   result_page: false, // After get the value from KV, if use a page to show the result.   theme: "", // Homepage theme, use the empty value for default theme. To use urlcool

基于GitHub项目https://github.com/xyTom/Url-Shorten-Worker 本质是使用Cloudflare的Workers搭一个网页服务，使用Cloudflare的KV当"数据库"用。 因为Cloudflare的KV免费档 "100,000 - 每日键值读取"，不想公开给别人扫。所以修改一下。