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

王一之

Hangover 发表于 2022-1-30 14:00
大佬还有别的方案吗

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

复制代码

var TranslationButton = document.createElement("button");
document.body.appendChild(TranslationButton);

放一起

Hangover

王一之 发表于 2022-1-30 17:27
var TranslationButton = document.createElement("button");
document.body.appendChild(TranslationB ...

我想要的不仅是性能上的优化，还想知道有没有别的方法能实现，框架除外

王一之

Hangover 发表于 2022-1-30 18:22
我想要的不仅是性能上的优化，还想知道有没有别的方法能实现，框架除外
...

想不到了

cxxjackie

Hangover 发表于 2022-1-30 14:00
大佬还有别的方案吗

1. Translation.style.cssText = `display: block; left: ${left + 50}px; top: ${top + 50}px;`;

复制代码

这样？还有把创建元素改成insertAdjacentHTML之类的，不过绑事件比较麻烦，不是很有必要。其他感觉没什么了，硬要说的话，你的命名不太规范，变量的首字母不应该大写，一般是类名才写成这样，有兴趣可以查一下“驼峰命名法”。

Hangover

cxxjackie 发表于 2022-1-30 22:18
这样？还有把创建元素改成insertAdjacentHTML之类的，不过绑事件比较麻烦，不是很有必要。其他感觉没什 ...

小学英语支撑到现在的我，起变量名靠的是百度翻译，有时候都想直接用abcd代替了。。。感觉不是团队协作的话，啥规范都不太重要吧，不过养成习惯还是好的