В этой статье описывается метод реализации таблиц Excel с менее чем 30 строками кода JS. Можно видеть, что jQuery не является незаменимым. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
Иностранный программист продемонстрировал приложение Table Excel, написанное Native JS, и не полагается на сторонние библиотеки со следующими функциями:
① Реализовано менее чем 30 строк нативного кода JavaScript
② Нет зависимости от сторонних библиотек
③ Семантический анализ в стиле Excel (формула начинается с "=")
④ Поддержите любое выражение (= A1+B2*C3)
⑤ Предотвратить круговые ссылки
⑥ Автоматическое локальное постоянное хранение на основе LocalStorage
Эффект отображается на рисунке ниже:
Анализ кода:
CSS опущен, HTML Core - это всего лишь одна строка:
Скопируйте код следующим образом: <Таблица> </table>
Код JavaScript выглядит следующим образом:
Скопируйте код следующим образом: for (var i = 0; i <6; i ++) {
var row = document.queryselector ("таблица"). insertrow (-1);
for (var j = 0; j <6; j ++) {
var itled = string.fromCharcode ("a" .charcoDeat (0)+J-1);
row.insertcell (-1) .innerhtml = i && j? "": Я || Письмо;
}
}
var data = {}, inputs = []. slice.call (document.queryselectorall ("input"));
Inputs.foreach (function (elm) {
elm.onfocus = function (e) {
e.target.value = localstorage [e.target.id] || "";
};
elm.onblur = function (e) {
LocalStorage [e.Target.id] = e.target.value;
ComputeAll ();
};
var getter = function () {
var value = localstorage [elm.id] || "";
if (value.charat (0) == "=") {
с (данные) return eval (value.substring (1));
} else {return isnan (parsefloat (value))? значение: parsefloat (значение); }
};
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) {}});
}) ();
Фактически, через приведенную выше статью, мы видим, что наиболее основные шаги используют функции eMeascript5 и html5, такие как:
QuerySelectorall: предоставляет запрос, аналогичный селекторам jQuery. Можно видеть, что сторонние библиотеки JS, такие как jQuery, не обязательно являются большим числом.
Кода кода выглядит следующим образом: var matches = document.queryselectorall ("div.note, div.alert");
DefineProperty предоставляет классы с Java's Get и Set Access/Set методы предварительной обработки, а также некоторые другие свойства конфигурации, такие как: будь то настраиваемая, перечисляемая и т. Д.
Копия кода выглядит следующим образом: object.defineproperty (o, "b", {get: function () {return bvalue;},
set: function (newValue) {bvalue = newValue; },
перечисляется: правда,
настраивается: true});
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.