Cet article décrit la méthode d'implémentation de tables Excel avec moins de 30 lignes de code JS. On peut voir que jQuery n'est pas irremplaçable. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Un programmeur étranger a démontré une application de table Excel écrite par native JS et ne compte pas sur des bibliothèques tierces, avec les caractéristiques suivantes:
① Implémenté par moins de 30 lignes de code JavaScript natif
② Aucune dépendance aux bibliothèques tierces
③ Analyse sémantique de style Excel (la formule commence par "=")
④ Soutenez toute expression (= a1 + b2 * c3)
⑤ Empêcher les références circulaires
⑥ Stockage persistant local automatique basé sur localstorage
L'affichage de l'effet est illustré dans la figure ci-dessous:
Analyse du code:
CSS est omis, le noyau HTML n'est qu'une seule ligne:
Copiez le code comme suit: <table
Le code JavaScript est le suivant:
Copiez le code comme suit: pour (var i = 0; i <6; i ++) {
var row = document.QuerySelector ("table"). insertrow (-1);
pour (var j = 0; j <6; j ++) {
var lettre = string.fromCharcode ("A" .CharCodeat (0) + J-1);
row.insertCell (-1) .InnerHtml = i && j? "": i || lettre;
}
}
var data = {}, entrées = []. Slice.Call (document.QuerySelectorAll ("Input"));
Entrées.ForEach (fonction (elm) {
elm.onfocus = fonction (e) {
e.target.value = localStorage [e.target.id] || "";
};
elm.onblur = fonction (e) {
localStorage [e.target.id] = e.target.Value;
OPROPORMEALL ();
};
var getter = function () {
Var Value = LocalStorage [elm.id] || "";
if (value.charat (0) == "=") {
avec (data) return ev (value.substring (1));
} else {return isnan (parsefloat (value))? valeur: parsefloat (valeur); }
};
Object.defineProperty (data, elm.id, {get: getter});
Object.defineProperty (data, elm.id.tolowercase (), {get: getter});
});
(window.CompPuleTeAl = function () {
Entrées.ForEach (function (elm) {try {elm.value = data [elm.id];} catch (e) {}});
}) ();
En fait, via l'article ci-dessus, nous pouvons voir que les étapes les plus principales utilisent les fonctionnalités d'EeaScript5 et HTML5, telles que:
QuerySelectorall: fournit une requête similaire aux sélecteurs jQuery. On peut voir que les bibliothèques JS tierces telles que jQuery ne sont pas nécessairement un grand nombre.
La copie de code est la suivante: var correspond = document.QuerySelector ("div.note, div.alert");
DefineProperty fournit des classes avec les méthodes de prétraitement GET and Set Access / Set de Java, ainsi que d'autres propriétés de configuration, telles que: si elle est configurable, énumérable, etc.
La copie de code est la suivante: object.defineproperty (o, "b", {get: function () {return bValue;},
set: function (newValue) {bValue = newValue; },
Énumérable: vrai,
configurable: true});
J'espère que cet article sera utile à la programmation JavaScript de tous.