So implementieren Sie eine Excel-Tabelle in weniger als 30 Zeilen mit JS-Code_Javascript-Kenntnissen

Das Beispiel in diesem Artikel beschreibt, wie eine Excel-Tabelle mit weniger als 30 Zeilen JS-Code implementiert wird. Es ist ersichtlich, dass jQuery nicht unersetzlich ist. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Ein ausländischer Programmierer hat eine in nativem JS geschriebene Excel-Tabellenanwendung demonstriert, die nicht auf Bibliotheken von Drittanbietern angewiesen ist. Sie verfügt über die folgenden Funktionen:

① Implementiert durch weniger als 30 Zeilen nativen JavaScript-Code
② Verlässt sich nicht auf Bibliotheken von Drittanbietern
③ Semantische Analyse im Excel-Stil (Formeln beginnen mit „=")
④ Unterstützt jeden Ausdruck (=A1 B2*C3)
⑤ Zirkelverweise verhindern
⑥ Automatischer lokaler persistenter Speicher basierend auf localStorage

Der Effekt ist unten dargestellt:

Code-Analyse:

CSS weggelassen, nur eine Zeile HTML-Kern:

Code kopieren Der Code lautet wie folgt:

Der JavaScript-Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

for (var i=0; i<6; i) {
var row = document.querySelector("table").insertRow(-1);
für (var j=0; j<6; j ) {
      var letter = String.fromCharCode("A".charCodeAt(0) j-1);
            row.insertCell(-1).innerHTML = i&&j ? "" : i||letter;
}
}
var DATA={}, INPUTS=[].slice.call(document.querySelectorAll("input"));
INPUTS.forEach(function(elm) {
​ elm.onfocus = function(e) {
         e.target.value = localStorage[e.target.id] || "";
};
elm.onblur = function(e) {
LocalStorage[e.target.id] = e.target.value;
         computeAll();
};
var getter = function() {
          var value = localStorage[elm.id] || "";
If (value.charAt(0) == "=") {
Mit (DATA) return eval(value.substring(1));
              } else { return isNaN(parseFloat(value)) ? value : parseFloat(value); };
Object.defineProperty(DATA, elm.id, {get:getter});
Object.defineProperty(DATA, elm.id.toLowerCase(), {get:getter});
});
(window.computeAll = function() {
INPUTS.forEach(function(elm) { try { elm.value = DATA[elm.id]; } Catch(e) {} });
})();

Tatsächlich können wir aus dem oben Gesagten ersehen, dass die Kernschritte die Funktionen von EMEAScript5 und HTML5 nutzen, wie zum Beispiel:

querySelectorAll: Bietet Abfragen ähnlich dem jQuery-Selektor. Es ist ersichtlich, dass JS-Bibliotheken von Drittanbietern wie jQuery nicht unbedingt erforderlich sind.

Code kopieren Der Code lautet wie folgt:

var matches = document.querySelectorAll("div.note, div.alert ");

defineProperty stellt Klassen Java-Methoden zum Abrufen und Festlegen des Zugriffs/Festlegens sowie andere Konfigurationseigenschaften zur Verfügung, z. B. ob es konfigurierbar, aufzählbar usw. ist.

Code kopieren Der Code lautet wie folgt:

Object.defineProperty(o, "b", {get : function( ){ return bValue; },

set: function(newValue){ bValue = newValue },
aufzählbar: wahr,
Konfigurierbar: true});

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.