Este artículo describe el método para implementar tablas de Excel con menos de 30 líneas de código JS. Se puede ver que jQuery no es insustituible. Compártelo para su referencia. El análisis específico es el siguiente:
Un programador extranjero demostró una aplicación de tabla de Excel escrita por JS nativo y no se basa en bibliotecas de terceros, con las siguientes características:
① Implementado por menos de 30 líneas de código nativo de JavaScript
② Sin dependencia de las bibliotecas de terceros
③ Análisis semántico al estilo de Excel (la fórmula comienza con "=")
④ Apoye cualquier expresión (= A1+B2*C3)
⑤ Evitar referencias circulares
⑥ Almacenamiento automático de almacenamiento persistente local basado en el almacenamiento local
La pantalla del efecto se muestra en la siguiente figura:
Análisis de código:
Se omite CSS, HTML Core es solo una línea:
Copie el código de la siguiente manera: <Able> </table>
El código JavaScript es el siguiente:
Copie el código de la siguiente manera: para (var i = 0; i <6; i ++) {
var fila = document.QuerySelector ("Tabla"). InserTrow (-1);
para (var j = 0; j <6; j ++) {
var letra = string.FromCharCode ("A" .CharCodeat (0)+J-1);
Row.insertCell (-1) .innerhtml = i && j? "": i || letra;
}
}
var data = {}, inputs = []. slice.call (document.queryselectorAll ("entrada"));
Entradas
Elm.onfocus = function (e) {
E.Target.Value = LocalStorage [e.target.id] || "";
};
Elm.onblur = function (e) {
LocalStorage [e.target.id] = e.target.value;
CompuTeAnl ();
};
var getter = function () {
valor var = localstorage [elm.id] || "";
if (value.charat (0) == "=") {
con (datos) return eval (value.substring (1));
} else {return isnan (parsefloat (valor))? valor: parsefloat (valor); }
};
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) {}});
}) ();
De hecho, a través del artículo anterior, podemos ver que los pasos más centrales utilizan las características de EMEAscript5 y HTML5, como:
QuerySelectorall: proporciona una consulta similar a los selectores jQuery. Se puede ver que las bibliotecas JS de terceros, como JQuery, no son necesariamente un gran número.
La copia del código es la siguiente: var coincides = document.querySelectorAll ("div.note, div.alert");
DefineProperty proporciona clases con los métodos de preprocesamiento de acceso/establecimiento de Java, así como algunas otras propiedades de configuración, como: si es configurable, enumerable, etc.
La copia del código es la siguiente: object.defineProperty (o, "b", {get: function () {return bvalue;},
set: function (newValue) {bvalue = newValue; },
enumerable: verdadero,
configurable: true});
Espero que este artículo sea útil para la programación de JavaScript de todos.