Este artigo descreve o método de implementar tabelas do Excel com menos de 30 linhas de código JS. Pode -se observar que o jQuery não é insubstituível. Compartilhe para sua referência. A análise específica é a seguinte:
Um programador estrangeiro demonstrou um aplicativo de tabela do Excel escrito por JS nativo e não depende de bibliotecas de terceiros, com os seguintes recursos:
① Implementado por menos de 30 linhas de código JavaScript nativo
② Sem dependência de bibliotecas de terceiros
③ Análise semântica no estilo Excel (a fórmula começa com "=")
④ Suporte a qualquer expressão (= A1+B2*C3)
⑤ Prevenção de referências circulares
⑥ Armazenamento local automático persistente com base no localStorage
A tela de efeito é mostrada na figura abaixo:
Análise de código:
CSS é omitido, o núcleo html é apenas uma linha:
Copie o código da seguinte
O código JavaScript é o seguinte:
Copie o código da seguinte forma: para (var i = 0; i <6; i ++) {
var row = document.QuerySelector ("Tabela"). Insertrow (-1);
for (var j = 0; j <6; j ++) {
var letter = string.FromCharCode ("A" .CharCodeat (0)+J-1);
row.insertCell (-1) .innerhtml = i && j? "": i || letra;
}
}
var dados = {}, inputs = []. slice.call (document.QuerySelectorAll ("input"));
Inputs.ForEach (função (ELM) {
elm.onfocus = function (e) {
e.target.value = localStorage [e.target.id] || "";
};
elm.onBlur = function (e) {
LocalStorage [e.target.id] = e.target.value;
ComputEalll ();
};
var getter = function () {
var valor = localStorage [elm.id] || "";
if (value.charat (0) == "=") {
com (dados) retornar avaliar (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 = dados [elm.id];} catch (e) {}});
}) ();
De fato, através do artigo acima, podemos ver que as etapas mais centrais usam os recursos do EMESTRACET5 e HTML5, como:
QuerySelectorAll: fornece consulta semelhante aos seletores de jQuery. Pode-se observar que bibliotecas JS de terceiros, como o jQuery, não são necessariamente um grande número.
A cópia do código é a seguinte: var Matches = Document.QuerySelectorAll ("Div.Note, Div.alert");
A DefineProperty fornece a classes com os métodos de pré -processamento GET e Set Access/Definir Java, bem como algumas outras propriedades de configuração, como: se é configurável, enumerável etc.
A cópia do código é a seguinte: Object.DefineProperty (O, "B", {get: function () {return bvalue;},
SET: function (newValue) {bvalue = newValue; },
enumerável: verdadeiro,
configurável: verdadeiro});
Espero que este artigo seja útil para a programação JavaScript de todos.