So implementieren Sie eine Excel-Tabelle in weniger als 30 Zeilen mit JS-Code_Javascript-Kenntnissen-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 16:31:16

Original

1653 Leute haben es durchsucht

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.