Question

在我的记事本webapp中，StatusBar有四个功能。我想简化它们...... 请给我一些建议或想法，我该怎么办... （我想保持功能相同......）

感谢。

var textarea = document.getElementById("textarea"),
  statusBar = document.getElementById("status-bar"),
  inputFile = document.getElementById("input-file"),
  appname = "notepad",
  isModified = false,
  showStatusBar = false,
  filename;

function changeDocTitle(newFilename) { // Change doc title
  filename = newFilename;
  document.title = filename + " - " + appname;
}

function dontSave() { // Confirm dont save
  if (confirm("You have unsaved changes that will be lost.")) {
    isModified = false;
    return true;
  }
}

function newNote(text, name) { // New
  if (!isModified || dontSave()) {
    textarea.value = text || "";
    changeDocTitle(name || "untitled.txt");
  }
  if (showStatusBar) {
    updateStatusBar();
  }
  textarea.focus();
}

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

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

function saveNote() { // 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 updateStatusBar() { // Update statusBar
  var text = textarea.value,
    chars = text.length,
    words = text.split(/\S+/g).length - 1,
    lines = text.split("\n").length;
  statusBar.value = lines + " lines, " + words + " words, " + chars + " characters";
}

function showStatusBarFunc() { // Show StatusBar
  textarea.style.height = "calc(100% - 23px)";
  statusBar.style.display = "";
  showStatusBar = true;
  updateStatusBar();
}

function hideStatusBar() { // Hide StatusBar
  textarea.style.height = "";
  statusBar.style.display = "none";
  showStatusBar = false;
}

function toggleStatusBar() { // Toggle StatusBar
  if (showStatusBar) {
    hideStatusBar();
  } else {
    showStatusBarFunc();
  }
}

textarea.addEventListener("input", function() {
  isModified = true;
  if (showStatusBar) {
    updateStatusBar();
  }
});

inputFile.addEventListener("change", function() { // Load file
  var file = inputFile.files[0],
    reader = new FileReader();
  reader.onload = function() {
    newNote(reader.result, file.name);
  };
  reader.readAsText(file);
});

document.addEventListener("keydown", function(e) { // Shortcuts
  if (e.altKey && e.shiftKey) { // Alt+Shift
    newNote();
  }
  if (e.ctrlKey) { // Ctrl+
    switch (e.keyCode) {
      case 79: // O
        e.preventDefault();
        openNote();
        break;
      case 83: // S
        e.preventDefault();
        saveNote();
        break;
      case 66: // B
        e.preventDefault();
        toggleStatusBar();
        break;
      case 191: // /
        e.preventDefault();
        alert("Help note for " + appname + " will be added soon!");
        break;
    }
  }
  if (e.keyCode == 9) { // Tab
    e.preventDefault();
    var sStart = textarea.selectionStart,
      text = textarea.value;
    textarea.value = text.substring(0, sStart) + "\t" + text.substring(textarea.selectionEnd);
    textarea.selectionEnd = sStart + 1;
  }
});

onunload = function() { // Store localStorage
  if (isModified) {
    localStorage.setItem("text", textarea.value);
    localStorage.setItem("name", filename);
  } else {
    localStorage.removeItem("text");
  }
  localStorage.setItem("showStatusBar", showStatusBar);
};

onload = function() { // Load localStorage
  if (localStorage.getItem("text")) {
    newNote(localStorage.getItem("text"), localStorage.getItem("name"));
    isModified = true;
  } else {
    newNote();
  }
  if (JSON.parse(localStorage.getItem("showStatusBar"))) {
    showStatusBarFunc();
  } else {
    hideStatusBar();
  }
};

Answer 1

尝试JavaScript Object Literals：

var StatusBar = {

    updateStatusBar:function() { // Update statusBar
      var text = textarea.value,
      chars = text.length,
      words = text.split(/\S+/g).length - 1,
      lines = text.split("\n").length;
      statusBar.value = lines + " lines, " + words + " words, " + chars + " characters";
   },

    showStatusBarFunc:function() { // Show StatusBar
      textarea.style.height = "calc(100% - 23px)";
      statusBar.style.display = "";
      showStatusBar = true;
      updateStatusBar();
   },

   hideStatusBar:function() { // Hide StatusBar
     textarea.style.height = "";
     statusBar.style.display = "none";
     showStatusBar = false;
  },

   toggleStatusBar:function() { // Toggle StatusBar
     if (showStatusBar) {
        hideStatusBar();
     } else {
      StatusBar.showStatusBarFunc();
   }
  }
 };

然后您可以从对象中调用函数，如下所示：

StatusBar.updateStatusBar();

查看我的Demo。

简化Javascript webapp代码

1 个答案: