javascript - 为什么出现意外的字符串(帮助重写难看的代码)

Question

笔记:
chrome.browserAction.onClicked.addListener with popup
Chrome Extension get selected text
Window.postMessage()
Capturing ctrl+z key combination in javascript
相关范例说明:(() => {} ES6 Arrow Function Is Simple, This Article Just Made It Simpler For JS Beginners(() What do parentheses surrounding an object/function/class declaration mean? return {} What do curly braces in JavaScript mean?

我正在寻找有关如何正确理解和重写丑陋代码的帮助。

这是一个经过测试的有效代码:

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'}, '*');
   }) + ')()';

脚本的当前状态，经过测试并可以正常工作:

function onKeyboardKeyDown() {
    //Checking if Content-Script is inserted inside PDF viewer extension)
    if (document.getElementById('plugin')) {
        alert('This is a PDF file opened by Chrome PDF viewer');


        //After opening a PDF page with Chrome PDF viewer
        //Assign a listener to the browser window,
        //to listen for a Selected Content by an User
        function addTextSelectionListener() {
            function receiveMessage(e) {
                if (e.data && e.data.type === 'getSelectedTextReply') {
                    removeEventListener('message', receiveMessage);
                    alert('SUCCESS:\n' + e.data.selectedText);
                }
            }
            //Setup listener to listen for a message from Chrome PDF viewer API
            window.addEventListener('message', receiveMessage);
            //Send request to get Selected Text from Chrome PDF viewer
            document.getElementById('plugin').postMessage({
                type: 'getSelectedText'
            }, '*');
        }


        //add Self executable addListener() function to the Script Tag
        //before appending it to the PDF viewer
        var scriptElement = document.createElement('script');
        scriptElement.text = '(' + addTextSelectionListener + ')()';
        document.body.appendChild(scriptElement);

    } else {
        //alert("This is not a PDF file page opened by Chrome PDF viewer");
    }

}
document.onkeydown = onKeyboardKeyDown;

较早解决:

This is what I have done yet:

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);

However, right now it has error:

Uncaught SyntaxError: Unexpected string myscript.js:5

这是发生语法错误的第五行:

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

Answer 1

您需要清楚打算使用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' }, '*');
    }
}

和您的listener调用是这样的-scriptElement.text = '(' + listener + ')()()'; 解决方案2(不太可能是一种选择)
如果您打算返回围绕您的逻辑的包装器以及该对象，那么那里存在多种语法错误。
喜欢 -
1. 您正在返回一个对象，但未指定键，因此addEventListener调用返回的值不会分配给返回对象中的任何 Prop 。
这就是解释器报告unexpected string错误的原因，因为对于旧的ES，必须使用以下语法定义包含函数的对象:

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

根据ES6，对象可以采用这样的形状-

{
  addListener (msg, callBack) {}
}

如您所见，在这两种情况下，我们都没有调用addListener函数，只是将其定义为prop in对象。但是在您的代码中，实际上在返回的函数中调用了该addListener方法，并且无处保存返回的值。
2. 对象中不能有分号分隔的键值对。这也是我认为您不打算返回对象的原因。
如果您打算返回一个对象，请将侦听器实现更改为如下所示-

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语句，您的函数应如下所示-

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' }, '*');
}

所有设置为在脚本附加到正文节点后立即执行。