Dieser Artikel beschreibt die Methode zur Implementierung von Excel -Tabellen mit weniger als 30 Zeilen JS -Code. Es ist zu sehen, dass JQuery nicht unersetzlich ist. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Ein Fremdprogrammierer hat eine von native JS geschriebene Excel-Tabellenanwendung demonstriert und stützt sich nicht auf Bibliotheken von Drittanbietern mit den folgenden Funktionen:
① implementiert durch weniger als 30 Zeilen nativer JavaScript -Code
② Keine Abhängigkeit von Bibliotheken von Drittanbietern
③ Semantische Analyse im Excel-Stil (die Formel beginnt mit "=")
④ Unterstützen Sie einen beliebigen Ausdruck (= A1+B2*C3)
⑤ Zirkuläre Referenzen verhindern
⑥ Automatischer lokaler persistierter Speicher basierend auf LocalStorage
Die Effektanzeige ist in der folgenden Abbildung dargestellt:
Codeanalyse:
CSS wird weggelassen, HTML Core ist nur eine Zeile:
Kopieren Sie den Code wie folgt: <table> </table>
Der JavaScript -Code lautet wie folgt:
Kopieren Sie den Code wie folgt: für (var i = 0; i <6; i ++) {
var row = document.querySelector ("Tabelle"). Insertrow (-1);
für (var j = 0; j <6; j ++) {
var Letter = string.fromCharCode ("a" .Chodeat (0)+j-1);
row.insertcell (-1) .innerhtml = i && j? "": i || Brief;
}
}
var data = {}, inputs = [].
Inputs.foreach (Funktion (ELM) {
elm.onfocus = function (e) {
E.Target.Value = localStorage [e.Target.id] || "";
};
Elm.onblur = Funktion (e) {
LocalStorage [e.target.id] = e.Target.Value;
publideAll ();
};
var getter = function () {
var value = localStorage [elm.id] || "";
if (value.charat (0) == "=") {
mit (Daten) return eval (value.substring (1));
} else {return isnan (Parsefloat (Wert))? Wert: Parsefloat (Wert); }
};
Object.DefineProperty (Daten, Elm.id, {get: Getter});
Object.DefineProperty (Data, elm.id.tolowerCase (), {get: Getter});
});
(window.comPuteAll = function () {
Inputs.foreach (Funktion (elm) {try {elm.value = data [elm.id];} catch (e) {}});
}) ();
Tatsächlich können wir im obigen Artikel sehen, dass die meisten Kernschritte die Merkmale von EMeascript5 und HTML5 verwenden, wie z. B.:
QuerySelectorAll: Bietet Abfragen ähnlich wie JQuery -Selektoren. Es ist ersichtlich, dass JS-Bibliotheken von Drittanbietern wie JQuery nicht unbedingt eine große Anzahl sind.
Die Codekopie lautet wie folgt: var übereinstimmt = document.querySelectorAll ("div.note, div.alert");
DefineProperty bietet Klassen mit Java's Get and Set Access/Set -Vorverarbeitungsmethoden sowie einige andere Konfigurationseigenschaften, z. B.: Ob konfigurierbar, aufzählbar usw.
Die Codekopie lautet wie folgt: Object.DefineProperty (o, "B", {get: function () {return bValue;},
set: function (newValue) {bValue = newValue; },
Aufzählbar: wahr,
Konfigurierbar: true});
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.