Javascript 为什么出现意外字符串（帮助重写难看的代码）

注：





相关范例解释：

（（）=>{}

（（）

返回{}

我正在寻找关于如何正确理解和重写难看代码的帮助

这是我收到的一段有效且经过测试的代码：

document.body.appendChild(document.createElement('script')).text = '(' + (() => {
 addEventListener('message', function _(e) {
   if (e.data && e.data.type === 'getSelectedTextReply') {
     removeEventListener('message', _);
     alert('SUCCESS:\n' + e.data.selectedText);
   }
 });
 document.getElementById('plugin').postMessage({type: 'getSelectedText'}, '*');
   }) + ')()';

var scriptElement = document.createElement('script');

function listener(){
  return {
     addEventListener('message', function _(e) {
       if (e.data && e.data.type === 'getSelectedTextReply') {
         removeEventListener('message', _);
         alert('SUCCESS:\n' + e.data.selectedText);
       }
     });
     document.getElementById('plugin').postMessage({type: 'getSelectedText'}, '*');
   };
}

scriptElement.text = '(' + listener + ')()';
document.body.appendChild(scriptElement);

addEventListener('message', function _(e) {

脚本的当前状态，已测试且正在工作：

---

早些时候，解决了：

---

这就是我所做的：

document.body.appendChild(document.createElement('script')).text = '(' + (() => {
 addEventListener('message', function _(e) {
   if (e.data && e.data.type === 'getSelectedTextReply') {
     removeEventListener('message', _);
     alert('SUCCESS:\n' + e.data.selectedText);
   }
 });
 document.getElementById('plugin').postMessage({type: 'getSelectedText'}, '*');
   }) + ')()';

var scriptElement = document.createElement('script');

function listener(){
  return {
     addEventListener('message', function _(e) {
       if (e.data && e.data.type === 'getSelectedTextReply') {
         removeEventListener('message', _);
         alert('SUCCESS:\n' + e.data.selectedText);
       }
     });
     document.getElementById('plugin').postMessage({type: 'getSelectedText'}, '*');
   };
}

scriptElement.text = '(' + listener + ')()';
document.body.appendChild(scriptElement);

addEventListener('message', function _(e) {

但是，现在它有一个错误：

未捕获的语法错误：意外字符串myscript.js:5

这是第五行，出现语法错误：

document.body.appendChild(document.createElement('script')).text = '(' + (() => {
 addEventListener('message', function _(e) {
   if (e.data && e.data.type === 'getSelectedTextReply') {
     removeEventListener('message', _);
     alert('SUCCESS:\n' + e.data.selectedText);
   }
 });
 document.getElementById('plugin').postMessage({type: 'getSelectedText'}, '*');
   }) + ')()';

var scriptElement = document.createElement('script');

function listener(){
  return {
     addEventListener('message', function _(e) {
       if (e.data && e.data.type === 'getSelectedTextReply') {
         removeEventListener('message', _);
         alert('SUCCESS:\n' + e.data.selectedText);
       }
     });
     document.getElementById('plugin').postMessage({type: 'getSelectedText'}, '*');
   };
}

scriptElement.text = '(' + listener + ')()';
document.body.appendChild(scriptElement);

addEventListener('message', function _(e) {

你需要放一个

function()

在javascript中，在第4行的括号之前，必须使用

function（）

，才能将某些内容作为函数

您的新代码将更像：

return function(){
...};

---

你需要清楚你打算用

listener

方法做什么

从这行

scriptElement.text='（“+listener+”）（）”；

判断，我相信您希望您的

addEventListener

和其余逻辑在附加到正文后调用

listener

后立即运行

仔细看，您实际上是在返回一个围绕逻辑的包装器，一个对象

function listener(){
  return {
    ...
  };
  ...
}

脚本附加到DOM后，代码不会立即执行，相反，对

listener

的调用只会返回一个包装器（至少应该是这样的，但也有一个错误）

如果需要，则查找解决方案1和解决方案2，否则查找解决方案3（推荐）

解决方案1 若您打算返回一个围绕逻辑的包装器，若必须立即运行它，那个么将侦听器实现更改为如下所示-

function listener() {
    return function () {
        addEventListener('message', function _(e) {
          if (e.data && e.data.type === 'getSelectedTextReply') {
              removeEventListener('message', _);
              alert('SUCCESS:\n' + e.data.selectedText);
          }
        });
        document.getElementById('plugin').postMessage({ type: 'getSelectedText' }, '*');
    }
}

你的

监听器

像这样呼叫-

scriptElement.text=”（“+listener+”）（）”；

解决方案2（不太可能是选择）

如果您打算在逻辑周围返回一个包装器，而该包装器也是一个对象，那么您就有多个语法错误。 像-

1。您正在返回一个对象，但没有指定键，因此addEventListener调用返回的值不会分配给返回对象中的任何属性

这就是解释程序报告异常字符串的原因，因为根据旧ES，包含函数的对象必须使用以下语法定义：

{ 'addEventListener': function (msg, callBack) {} }

根据ES6，对象可以呈现这样的形状-

{
  addListener (msg, callBack) {}
}

function listener() {
  addEventListener('message', function _(e) {
      if (e.data && e.data.type === 'getSelectedTextReply') {
          removeEventListener('message', _);
          alert('SUCCESS:\n' + e.data.selectedText);
      }
  });
  document.getElementById('plugin').postMessage({ type: 'getSelectedText' }, '*');
}

正如您所看到的，在这两种情况下，我们都没有调用addListener函数，只是将其定义为prop in对象。但是在您的代码中，在返回的函数中，您实际上调用了addListener方法，并且没有地方保存返回值

2.对象中不能有分号分隔的键值对。这也是我认为您不打算返回对象的原因

function listener(){
  return {
    ...
  };
  ...
}

如果要返回对象，请将侦听器实现更改为如下所示-

function listener(){
  return {
    methodName () {
      addEventListener('message', function _(e) {
        if (e.data && e.data.type === 'getSelectedTextReply') {
        removeEventListener('message', _);
        alert('SUCCESS:\n' + e.data.selectedText);
      }
    });
   document.getElementById('plugin').postMessage({type: 'getSelectedText'}, '*');
   }
  }
}

解决方案3（根据场景推荐）

只需删除return语句，您的函数应该如下所示-

{
  addListener (msg, callBack) {}
}

function listener() {
  addEventListener('message', function _(e) {
      if (e.data && e.data.type === 'getSelectedTextReply') {
          removeEventListener('message', _);
          alert('SUCCESS:\n' + e.data.selectedText);
      }
  });
  document.getElementById('plugin').postMessage({ type: 'getSelectedText' }, '*');
}

---

所有设置都将在脚本附加到body node后立即执行。

谢谢Himanshu，由于您的解释和工作正常，现在脚本的状态更好了。在大多数旁观者看来，它仍然不太好。但至少现在更容易理解脚本的大部分功能。这对我来说很好f您可以给我您对脚本当前状态的看法。另外，文档中的哪个元素是addEventListener（'消息'，回调）；分配给？w3school似乎只建议使用以下语法：element.addEventListener（事件，函数，useCapture），但在这种情况下，没有元素，只有函数：addEventListener（'消息'，回调）；那么，我们最终会得到垃圾邮件stackoverflow。我隐藏它是因为可以隐藏它。它需要理解代码中写的内容。当您从答案中获得有关问题的更多信息时，问题会发生变化。在这种情况下，是问题详细信息。这个问题是否仍然存在？我认为这已经解决了。