자바 스크립트 웹 코드 단순화

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

자바 스크립트를 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를 참조하십시오.