存在则更新,不存在则创建

Hangover

问题：想优化一下代码，让代码看起来更容易理解，大佬们有没有优雅一点的写法

代码思路：

1. 监听抬起鼠标左键后执行{
   
2.     if (是否选中文本) {
   
3.         if (按钮是否已存在) {
   
4.             存在则删除
   
5.         }
   
6.         创建按钮
   
7.     } else if (按钮是否存在) {
   
8.         存在则删除
   
9.     }
   
10. }

复制代码

1. document.addEventListener("mouseup", (event) => {
   
2.     event = event || window.event;
   
3.     var left = event.clientX;
   
4.     var top = event.clientY;
   
5.     var TranslationButton = document.querySelector('#speech-translation');
   
6.     var getSelection = window.getSelection().toString();
   
7.     if (getSelection != '') {
   
8.         if (TranslationButton) {
   
9.             document.body.removeChild(TranslationButton);
   
10.         }
    
11.         TranslationButton = document.createElement("button");
    
12.         document.body.appendChild(TranslationButton);
    
13.         TranslationButton.style.left = left + 50 + "px";
    
14.         TranslationButton.style.top = top + 0 + "px";
    
15.         TranslationButton.id = "speech-translation";
    
16.         TranslationButton.style.position = "fixed";
    
17.         TranslationButton.innerHTML = '翻译';
    
18.         TranslationButton.addEventListener('mouseup', function (e) {
    
19.             e.stopPropagation();
    
20.         });
    
21.         TranslationButton.onclick = function () {
    
22.             alert('666');
    
23.         };
    
24.     } else if (TranslationButton) {
    
25.         document.body.removeChild(TranslationButton);
    
26.     };
    
27. });

复制代码

cxxjackie

创建按钮那部分代码移到mouseup外面去，这样可以保证按钮一定是存在的，然后用display: none来控制按钮是否可见。

maxzhang

管他存在不存在

一律删掉重建

脚本体验师001

1. document.addEventListener("mouseup", (event) => {
   
2.     var TranslationButton = document.querySelector('#speech-translation');
   
3.     var getSelection = window.getSelection().toString();
   
4.     if (getSelection != '') {
   
5.         if (!TranslationButton) {
   
6.             event = event || window.event;
   
7.             var left = event.clientX;
   
8.             var top = event.clientY;
   
9.             TranslationButton = document.createElement("button");
   
10.             document.body.appendChild(TranslationButton);
    
11.             TranslationButton.style.left = left + 50 + "px";
    
12.             TranslationButton.style.top = top + 0 + "px";
    
13.             TranslationButton.id = "speech-translation";
    
14.             TranslationButton.style.position = "fixed";
    
15.             TranslationButton.innerHTML = '翻译';
    
16.             TranslationButton.addEventListener('mouseup', function (e) {
    
17.                 e.stopPropagation();
    
18.             });
    
19.         }
    
20.         TranslationButton.onclick = function () {
    
21.             alert('666');
    
22.         };
    
23.     } else {
    
24.         TranslationButton && document.body.removeChild(TranslationButton);
    
25.     };
    
26. });

复制代码

我觉得没必要每次都删除重建吧

Hangover

脚本体验师001 发表于 2022-1-29 18:37
我觉得没必要每次都删除重建吧

不删除重建的话 在下次选中文本的时候 按钮还是在原来的位置，你可以试试连续选中文本看看
你要是觉得我每次都用document.querySelector获取不如一开始直接赋值给变量，这也是我忽略的问题，已经改过来了，但重点不在那~

脚本体验师001

如果你希望按钮完成任务就消失，删除应该放在点击事件里吧，否则就改一下按钮位置不成吗

Hangover

脚本体验师001 发表于 2022-1-29 19:39
如果你希望按钮完成任务就消失，删除应该放在点击事件里吧，否则就改一下按钮位置不成吗 ...

如果我想点击多次呢？ 比如我那个语音翻译脚本里，翻译听一次不够，想多听几次是不是要重新选择文本？所以才把删除按钮放在取消选中文本事件中，只要文本是选中状态就能多次点击按钮语音翻译

脚本体验师001

Hangover 发表于 2022-1-29 20:13
如果我想点击多次呢？ 比如我那个语音翻译脚本里，翻译听一次不够，想多听几次是不是要重新选择文本？所以 ...

设一个变量存储选中的文本，就可以复读了嘛。取消选中的时候，按钮隐藏，文本变量清空。
下次再选中，文本变量赋值，按钮显示，这是个重复利用的过程，
总归觉得重复创建一个相同的按钮不太实际嘛

Hangover

cxxjackie 发表于 2022-1-29 22:50
创建按钮那部分代码移到mouseup外面去，这样可以保证按钮一定是存在的，然后用display: none来控制按钮是否 ...

这看起来好像是优雅了一点点👍

1. var TranslationButton = document.createElement("button");
   
2. document.body.appendChild(TranslationButton);
   
3. TranslationButton.id = "speech-translation";
   
4. TranslationButton.style.position = "fixed";
   
5. TranslationButton.style.display = 'none';
   
6. TranslationButton.innerHTML = '翻译';
   
7. TranslationButton.addEventListener('mouseup', function (e) {
   
8.     e.stopPropagation();
   
9. });
   
10. TranslationButton.onclick = function () {
    
11.     alert('666');
    
12. };
    
13. document.addEventListener("mouseup", (event) => {
    
14.     event = event || window.event;
    
15.     var left = event.clientX;
    
16.     var top = event.clientY;
    
17.     var Translation = document.querySelector('#speech-translation');
    
18.     var getSelection = window.getSelection().toString();
    
19.     if (getSelection != '') {
    
20.         Translation.style.display = 'block';
    
21.         Translation.style.left = left + 50 + "px";
    
22.         Translation.style.top = top + 0 + "px";
    
23.     } else {
    
24.         Translation.style.display = 'none';
    
25.     }
    
26. });

复制代码

Hangover

cxxjackie 发表于 2022-1-29 22:50
创建按钮那部分代码移到mouseup外面去，这样可以保证按钮一定是存在的，然后用display: none来控制按钮是否 ...

大佬还有别的方案吗