JavaScript online TextEditor

Question

请检查我的代码/代码质量。

var textarea = document.getElementById("textarea"),
      inputFile = document.getElementById("input-file"),
      prtHelper = document.getElementById("prt-helper"),
      overlay = document.getElementById("overlay"),
      help = document.getElementById("help"),
      appname = " - notepad",
      filename = "untitled.txt",
      isModified = false;

    if (localStorage.getItem("txt")) { // Load localStorage
      textarea.value = localStorage.getItem("txt");
      filename = localStorage.getItem("filename");
      isModified = true;
    }

    window.onunload = function() { // Save localStorage
      if (isModified) {
        localStorage.setItem("txt", textarea.value);
        localStorage.setItem("filename", filename);
      } else {
        localStorage.clear();
      }
    };

    function changeDocTitle() { // Change doc title
      document.title = filename + appname;
    }
    window.onload = changeDocTitle();

    textarea.onpaste = textarea.onkeypress = function() { // Note is modified
      isModified = true;
    };

    function cancelSaving() { // Confirm cancel saving
      if (isModified && confirm("You have unsaved changes that will be lost.")) {
        isModified = false;
        return true;
      }
    }

    function New() { // New
      if (!isModified || cancelSaving()) {
        textarea.value = "";
        filename = "untitled.txt";
        changeDocTitle();
      }
      textarea.focus();
    }

    function Open() { // Open
      if (!isModified || cancelSaving()) {
        inputFile.click();
      }
      textarea.focus();
    }

    function loadFile() { // Load file
      var file = inputFile.files[0],
        fileReader = new FileReader();
      fileReader.onloadend = function(e) {
        filename = file.name;
        changeDocTitle();
        textarea.value = e.target.result;
      };
      fileReader.readAsText(file);
    }

    function rename() { // Rename
      var newFilename;
      do {
        newFilename = prompt("Name this note:", filename);
      } while (newFilename === "");
      if (newFilename) {
        filename = (newFilename.lastIndexOf(".txt") == -1) ? newFilename + ".txt" : newFilename;
        changeDocTitle();
        return true;
      }
    }

    function Save() { // Save
      if (rename()) {
        var blob = new Blob([textarea.value.replace(/\n/g, "\r\n")], {
          type: "text/plain;charset=utf-8"
        });
        saveAs(blob, filename);
        isModified = false;
      }
      textarea.focus();
    }

    function Print() { // Print
      prtHelper.innerHTML = textarea.value;
      window.print();
      prtHelper.innerHTML = "";
      textarea.focus();
    }

    function Help() { // Help
      help.setAttribute("aria-hidden", "false");
      overlay.setAttribute("aria-hidden", "false");
      textarea.blur();
      document.getElementById("cls-hlp").onclick = overlay.onclick = function() {
        closeHelp();
      };
    }

    function closeHelp() { // Close help
      help.setAttribute("aria-hidden", "true");
      overlay.setAttribute("aria-hidden", "true");
      textarea.focus();
    }

    function bookmark() { // temporarily change doc title
      var docTitle = document.title;
      document.title = "Notepad5";
      setTimeout(function() {
        document.title = docTitle;
      }, 3);
    }

    document.onkeydown = function(e) { // Keyboard shortcuts
      var key = e.keyCode || e.which;
      if (e.ctrlKey) {
        if (e.altKey && key == 78) { // Ctrl+Alt+N
          e.preventDefault();
          New();
        }
        switch (key) {
          case 79: // Ctrl+O
            e.preventDefault();
            Open();
            break;
          case 83: // Ctrl+S
            e.preventDefault();
            Save();
            break;
          case 80: // Ctrl+P
            e.preventDefault();
            Print();
            break;
          case 191: // Ctrl+/
            e.preventDefault();
            Help();
            break;
          case 68: //Ctrl+D
            bookmark();
            break;
          default:
            break;
        }
      }
      if (key == 27) { // Esc
        closeHelp();
      }
      if (key == 9) { // Tab
        e.preventDefault();
        var sStart = textarea.selectionStart,
          txt = textarea.value;
        textarea.value = txt.substring(0, sStart) + "\t" + txt.substring(textarea.selectionEnd);
        textarea.selectionEnd = sStart + 1;
      }
    };

Answer 1

一瞥，

代码有许多全局变量

无论是命名空间它还是滚动它，它都在自己的scrope中，而不是在窗口范围内。

将事件直接附加到元素

您应该使用addEventListener附加事件。

Answer 2

还有很多需要改进的地方

• 如前所述，你有很多(太多)全球
• 您应该查找MVC ( Model )
  • 我会将标题、文本和所有的保存/加载函数放在editor.model下
  • 我会把所有的路由逻辑都放在editor.controller中
  • 我将放置一个函数，从editor.model获取标题和文本，并将其显示到editor.view中，以及帮助显示/隐藏逻辑。

• 通常，尝试通过参数而不是全局传递数据到函数，例如函数New，它应该将isModified作为参数。
• 函数名应该以小写、open和new开始，而不是Open和New等等。

*