ICDYCT / I Can Do, You Can Too

In the previous post, we found suitable code to display different types of content. Some are large chunks of text, displayed using textarea; some are images, displayed using img. But what kind of code structure should we use? I've thought about it and plan to do this: 1. Wrap different display methods as different functions and put them in main.js. For example: function buildValueTxt(longUrl) {} function buildValueImg(longUrl) {} function buildValueTxtarea(longUrl) {} 2. Set a function variable, and assign it to different functions in different index.html files, for example: In the short link's index.html buildValueItemFunc = buildValueTxt In Pastebin's index.html buildValueItemFunc = buildValueTxtarea In the image hosting's index.html buildValueItemFunc = buildValueImg 3. In main.js, use the same code logic: // Long url information Long url child.appendChild(buildValueItemFunc(longUrl))

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

Among the Short Link System, Web Notepad System, and Image Hosting System, the requirements for displaying the list of saved data are different. The Notepad System should display the value using a multi-line text box. As shown below: The Image Hosting System should display the value in the form of an image. As shown below: The Short Link System uses the original display method. Just display the entire value as text. The code is already written. The functionality is correct as well.  The current question is, how to design the code structure reasonably, so that the configuration items in worker.js can control the display method of the list. The configuration item for setting the system is in worker.js. At most, there is one more item, which controls which index.html to load. But the function of implementing the list display is in main.js.  The file main.js is on Github. It is specified to load in the index.html file. If the content of main.js is moved out and put into index.html, and the...

在 短链系统, 网络记事本系统, 图床系统 中, 已保存数据的列表的显示方式 需求是不同的. 记事本系统, 应该用一个多行文本框来显示 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

Requirements In the previous step we implemented the core functionality of the image hosting service , saving and retrieving data. But to convert images to Base64 data, you have to open another page , that's too... So we "borrow" this page into our own image hosting operation page.

需求 上一步我们已经实现了图床的核心功能 , 保存和读取数据. 但是为了把图片转换为Base64数据, 还要 另外开一个页面 , 这也太... 所以我们把这个页面"借鉴"到自己图床的操作页面上.

Requirements Posting on NodeSeek requires you to bring your own image hosting. We have already implemented a simple KV database . So, by the same principle, isn't image hosting just the same thing? You send the system a path, and the system returns the image data to you.

需求 在 NodeSeek 上发贴, 是要自备图床的. 我们已经实现了单纯的KV数据库 . 那么, 同样的原理, 图床不就是一样的事情吗? 发给系统一个path, 系统还给你一个图片的数据.

The original author of Url-Shorten-Worker designed it to support different themes from the start. It works by loading different index.html files. By default it's empty, which means it loads the default index.html from the Repo root directory. We create a new directory under theme called pastebin, then copy an index.html into it, and make some modifications based on that. Since this is for use as an online notepad PasteBin, the value often involves large blocks of text, so I changed it to a textarea element. The final result is as follows, ======== End Github:  https://github.com/crazypeace/Url-Shorten-Worker Demo:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue  

Url-Shorten-Worker 原作者本来就设计了可以支持不同的主题. 其实就是加载不同的index.html 默认是空, 也就是加载默认的 Repo 根目录下的 index.html 我们在 theme 下新建一个目录, pastebin, 再把 index.html 复制一份进来, 以此为基础做一些修改. 因为如果是当网络记事本PasteBin使用的话, value常常遇到大段文字的情况, 所以我修改为 textarea 元素. 最终效果如下, ======== 完 Github:  https://github.com/crazypeace/Url-Shorten-Worker 演示站:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue  

Requirement When both visit_count and load_kv are enabled, the result will be displayed as follows. Comments also mentioned the hope to hide it. Approach When qryall assembles the returned data, skip data ending with '-count'. ======== End Github:  https://github.com/crazypeace/Url-Shorten-Worker Demo:  https://1way.eu.org/bodongshouqulveweifengci   You can view the visit count, but you cannot see the query result of -count

需求 当 visit_count 和 load_kv 同时打开的时候, 会显示出这样的结果. 评论也提到希望隐藏.

Requirement I believe everyone has already used many online notepad applications, such as:  https://gist.github.com/ https://pastebin.ubuntu.com/ Actually, I've had this idea for a long time. A short link service is essentially about inputting a Key and returning a Value. It just does one more step, treating the Value as the target URL and automatically redirecting to it. So what if we don't do the redirect? We simply display the Value corresponding to the Key, and that would be a simple online notepad.

需求 相信大家已经用过很多网络记事本的应用了. 比如:  https://gist.github.com/ https://pastebin.ubuntu.com/ 其实我很早就有这样的想法. 短链服务本质上就是输入一个Key, 返回一个Value. 只不过多做了一步, 把Value当作目标网址, 自动跳转. 那么如果我们不做跳转呢? 仅仅是显示Key对应的Value, 那么就是一个简单的网络记事本了.

Requirement Diet & Health, January 2, 2024, GMT+8 03:52:00 Hope you can add a feature to query previously added short links from Cloudflare. Otherwise, if the browser cache is wiped, or when I want to query and manage short links on another computer, I have to log into Cloudflare, which is quite troublesome. When I first designed this short link system, I intended it to be shared among people I know. That's why I used the browser's localStorage — the benefit is that each person only sees the short links they added themselves, without interfering with each other. Later I added a delete feature, so you won't accidentally delete someone else's short links either. However, since someone specifically asked for it, let me think again — if this system is only used by myself, then the need to read KV is reasonable.

需求 饮食健康 2024年1月2日 GMT+8 03:52:00 希望能添加从cloudflare查询以往添加的短链接的功能，不然如果清除了浏览器缓存或在另一台电脑上想要查询和管理短链接的话必须登录cloudflare才行，比较麻烦。 我一开始设计这个短链系统的时候, 是作为可以和熟悉的人共同使用的, 所以我使用浏览器的localStorage的好处是, 每个人都只看到自己添加过的短链. 不会互相干扰, 我后来添加了删除短链的功能, 你也不会误删别人的短链. 但是, 既然有人特别提出来了, 那么我再想想, 如果这个系统是只给我自己一个人用呢, 那么这个读取KV的需求是合理的.