Comment implémenter un tableau Excel en moins de 30 lignes de compétences JS code_javascript

L'exemple de cet article décrit comment implémenter un tableau Excel avec moins de 30 lignes de code JS. On voit que jQuery n'est pas irremplaçable. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Un programmeur étranger a fait la démonstration d'un tableur Excel écrit en JS natif qui ne s'appuie pas sur des bibliothèques tierces. Il présente les fonctionnalités suivantes :

① Implémenté par moins de 30 lignes de code JavaScript natif
② Ne s'appuie pas sur des bibliothèques tierces
③ Analyse sémantique de style Excel (formules commençant par "=")
④ Prend en charge n'importe quelle expression (=A1 B2*C3)
⑤ Empêcher les références circulaires
⑥ Stockage persistant local automatique basé sur localStorage

L'effet est illustré ci-dessous :

Analyse du code :

CSS omis, une seule ligne du noyau HTML :

Copier le code Le code est le suivant :

Le code JavaScript est le suivant :

Copier le code Le code est le suivant :

pour (var i=0; i<6; i) {
var row = document.querySelector("table").insertRow(-1);
pour (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 = fonction(e) {
         e.target.value = localStorage[e.target.id] || "";
};
elm.onblur = fonction(e) {
LocalStorage[e.target.id] = e.target.value;
         calculateAll();
};
var getter = fonction() {
         var value = localStorage[elm.id] || "";
Si (value.charAt(0) == "=") {
Avec (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 = fonction() {
INPUTS.forEach(function(elm) { try { elm.value = DATA[elm.id]; } catch(e) {} });
})();

En fait, d'après ce qui précède, nous pouvons voir que les étapes principales utilisent les fonctionnalités d'EMEAScript5 et HTML5, telles que :

querySelectorAll : fournit des requêtes similaires au sélecteur jQuery. On voit que les bibliothèques JS tierces telles que jQuery ne sont pas essentielles.

Copier le code Le code est le suivant :

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

defineProperty fournit des classes avec des méthodes de prétraitement d'accès/définition Java get et set, ainsi que d'autres propriétés de configuration, telles que : si elle est configurable, énumérable, etc.

Copier le code Le code est le suivant :

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

set: function(newValue){ bValue = newValue },
énumérable : vrai,
Configurable : vrai});

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.