Code Structure for Multi-Purpose URL Worker
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:
buildValueItemFunc = buildValueTxt
3. In main.js, use the same code logic:
The idea is clear, and writing the code is not difficult.
Github: https://github.com/crazypeace/url-Shorten-Worker/
Demo site:
Short link: https://1way.eu.org/bodongshouqulveweifengci
Online notepad: https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue
Image hosting: https://imghost.crazypeace.workers.dev/imghostimghost
========
By the way, how to do local development and debugging on your own machine.
You should have already cloned or downloaded the full project code.
Open main.js and hardcode these two parameters at the beginning to your worker address and your password
Open index.html and hardcode the reference to CSS at the beginning. (If you don't need to modify CSS, you don't need to do this. If you're only modifying the logic, you probably don't need it.)
At the end of index.html, hardcode the reference to main.js
If you're debugging the index.html under the theme directory, pay attention to the directory structure.
Next, you can open index.html in your local browser to debug. Your local modifications to index.html and main.js will also take effect in your local browser.
After making the above modifications locally, you can use different index.html files for the same worker to see what different effects there are.
Posts
