Настроить калькулятор для работы

Для чего на калькуляторах кнопки MC, MR, и другие

Большинство современных калькуляторов обладают одной очень удобной функцией, которой большинство людей, к сожалению, не пользуется. Эта функция — запоминание чисел. В этой статье вы узнаете, как правильно использовать незнакомые кнопки.

MS (Memory save) — записывает в память число, которое на экране.

Пример: производим вычитание 76 — 43 = 23, нажимаем MS, калькулятор запоминает число 23.

MR (Memory read) — выводит число из памяти на экран.

Пример: нажимаем MS, на экране появится число из памяти — 23

MC (Memory clear) — удаляет число из памяти.

Пример: нажимаем MS, число 23 удаляется из памяти.

M+ (Memory plus) — прибавление числа на экране к числу, записанному в памяти. На некоторых калькуляторах используется вместо MS, так как по умолчанию память равна нулю.

Пример: в памяти записано число 15, производим сложение 39 + 12 = 51, нажимаем M+, калькулятор складывает 51 и 15 и записывает в память 66.

M- (Memory minus) — вычитание числа на экране из числа, записанного в памяти.

Пример: в памяти записано число 62, производим сложение 41 + 17 = 58, нажимаем M-, калькулятор из 62 вычитает 58 и записывает в память 4.

MRC (Memory read-clear)- вывод числа из памяти на экран и обнуление памяти.

Пример: в памяти записано число 36, нажимаем MRC, на экране появится число из памяти — 36, нажимаем MRC ещё раз — память очищается.

Источник

Что означают кнопки на калькуляторе

Такие простые с первого взгляда устройства, как калькуляторы, могут оказаться сложными в обращении.

Всеми возможностями этих «счетных машинок» не пользуются даже опытные бухгалтеры, финансисты и программисты, уже не говоря о школьниках или студентах.

В первой части нашего материала рассмотрим функции самых простых калькуляторов (в качестве примера возьмем кнопки калькулятора Citizen), во второй – бухгалтерских, и в заключительной — инженерных (с поддержкой вычисления функций и т.п.).

За что отвечают кнопки на калькуляторе

Простейшие калькуляторы

Неотъемлемая часть любой вычислительной техники, работающей с числами – клавиши для ввода цифр. Поэтому кнопки от «0» до «9» в представлении не нуждаются.

Операторы основных математических операций, такие как умножение («*» или «×»), деление («/» или «÷»), сложение («+»), вычитание («-») и сравнение («=») знакомы по урокам математики.

Не должны вызвать проблем и операторы «квадратный корень от числа» («√»), квадрат числа («x2»), а также часть целого («1/x», единица делится на отображаемое значение).

Однако, с виду простой оператор % оказывается на деле сложен в использовании.

Если набрать любое число и нажать %, значение обнулится. И верно, ведь 1% — это одна сотая доля от какого-либо числа, а значит, требуемую к вычислению долю/часть необходимо дополнительно задать.

100+10%=110, ведь 10% от предыдущего числа (от 100) – это 10, а 100+10=110.
Аналогичные процедуры можно производить и с другими математическими операциями («-«, «/», «*»).

Дополнительные кнопки

• ± — позволяет сменить текущее положительное число на отрицательное или наоборот (очень полезно в качестве модуля отрицательного числа, нет необходимости вводить полученную разницу без минуса).
• . – разделитель разрядов (десятичный разделитель).
• C / AC – сокращение от англ. «Clean» — «очистить» (AC – «All Clean» — «очистить все»), стирает все введенные ранее данные, в том числе и из памяти.
• CE – сокращение от англ. «Clean Entry» — «очистить запись», нажатие на эту кнопку очищает только текущее поле ввода (все, что было в памяти, сохраняется).
• Если кнопка C совмещена с CE (C/CE) , то для очистки ввода необходимо нажать 1 раз на указанную клавишу, а для полной очистки – 2 раза.
• Если на устройстве клавиши ON, C, CE и AC разнесены отдельно, то кнопка C сбрасывает только последнее выражение, CE – очищает дисплей, включая последний операнд, а AC – очищает все данные.
• Sqrt — означает квадратный корень.

Кнопки памяти на калькуляторе выносятся отдельным блоком и требуют определенных последовательностей работы с ними.

• MS – от англ. «Memory Save» («Сохранить в памяти») – нажатие записывает текущее значение на дисплее в буфер памяти для последующего использования.
• MC – от англ. «Memory Clean» («Очистить память») – удаляет все данные в памяти (обнуляет).
• MR — от англ. «Memory Read» («Прочитать память») – отображает текущее содержимое буфера.
• M- — вычитает значение в буфере из текущего значения на дисплее и сохраняет в буфер памяти, итоговое значение можно увидеть только после нажатия MR.
• M+ — аналогично M-, только значение прибавляется и сохраняет обратно в буфер.

В качестве примера.

1. Если написать на дисплее число 555 и нажать MS (или M+, что равноценно при нулевом/исходном состоянии буфера памяти, так как текущее значение прибавится к нулю в буфере и сохранится как 555), затем CE, то значение на дисплее обнулится, но в памяти сохранится 555.
2. Узнать это можно, выведя буфер клавишей MR. Отобразится 555. Нажав M-, мы вычтем из текущего значения буфер (555) и запишем его вместо старого значения (555-555=0). На дисплее ничего не изменится. Узнать новое значение памяти можно, нажав снова MR – отобразится 0.
3. Вторая ячейка памяти будет обозначаться «MII» (не на всех моделях калькуляторов).

Бухгалтерские калькуляторы

Бухгалтерские модели устройств имеют дополнительные функции, такие как GT, MU, EX (не путать с EXP), TAX и другие (быстрый ввод нулей «00», «000», округление до заданного знака и в требуемую сторону, и т.п.). Ниже рассмотрим наиболее популярные клавиши.

• GT («Grand Total» — «общая сумма») позволяет суммировать результаты всех произведенных вычислений с момента обнуления («CA»).

То есть после трех следующих вычислений:
2*3=6 (нажатие CE)
5-3=2 (нажатие CE)
5/2=2,5

Нажатие GT отобразит результат 10,5 (6+2+2,5). Повторное нажатие GT обнулит регистр суммы.

• MU (от англ. «Mark Up» — «наценка») – позволяет рассчитать надбавки в зависимости от исходных задач.

Нагляднее всего операции с кнопкой MU демонстрируют равнозначные математические формулы ниже:
X+Y (MU) = 100 * (X+Y)/Y
X-Y (MU) = 100 * (X-Y)/Y
X*Y (MU) = X * (1 + Y/100)
X/Y (MU) = X / (1 — Y/100)

• EX – функция замены введенных операторов местами, очень полезна при ошибках ввода.

Например:
9 / 10 = 0,9
А если ввод был перепутан:
10/9 EX = 0,9

• TAX+ и TAX — помогают работать с налогами (чаще всего у бухгалтеров это НДС), они работают вкупе с кнопкой SET, устанавливающей требуемую ставку.

Таким образом, первым делом устанавливается ставка (кнопкой SET), например, в 20%, и далее производятся вычисления с использованием TAX:
400 «TAX+» = 480 (при ставке 20%),
400 «TAX-» = 320.

Очень полезными будут функции округления, которые часто реализуются специальными переключателями.

• Стрелка вверх – в этом положении калькулятор принудительно будет округлять все получаемые результаты в сторону увеличения (при любом знаке после заданного разряда больше нуля).
• Стрелка вниз – в этом положении устройство будет действовать аналогично, но округлять в меньшую сторону.
• «4/5» — это не простая дробь, как может показаться. В этом положении счетное устройство будет работать в соответствии с логикой рациональных вычислений (при следующем знаке после требуемого разряда меньшем 5 округление производится в сторону уменьшения, а при 5 и более – в сторону увеличения).
• Флажок со шкалой «0,1,2,3,4,5» позволяет быстро задать разряд округления после целого числа (0 – до целых, 1 – до десятичных и т.д.).

Что означают кнопки инженерного калькулятора

Инженерные калькуляторы могут быть весьма сложными в обиходе ввиду того, что позволяют реализовывать множество стандартных функций высшей математики и поддерживают ввод сложносоставных выражений.

На некоторых моделях можно составлять полноценные программы (в сети даже есть видео с запуском 3D игр на таких устройствах).

Описание стандартных возможностей в оригинальных инструкциях занимает несколько десятков страниц.

Лучше всего значение кнопок на инженерном калькуляторе уточнять именно в официальной инструкции или на сайте производителя.

Почему? Очень часто функции требуют соблюдения определенного синтаксиса, а большинство тригонометрических функций может работать только с заданными единицами измерения углов (одни работают только с градусами, одни только с радианами, есть универсальные модели и т.п.).

Во всем остальном обозначения и логика расчета полностью совпадают с требованиями высшей математики. То есть достаточно знать, как пишется функция и для чего она нужна, и тогда результат и процесс вычисления станет понятен («tg», «ctg», «sin», «cos», «acos», «actg», «atg», «logyx» и др.).

Единственная рекомендация – ставьте больше скобок, чтобы правильно распределить приоритеты в порядке действий по вычислениям. И тогда результат не станет для вас неожиданностью.

Источник

Калькулятор онлайн

Калькулятор Онлайн бесплатно

Удобный Калькулятор онлайн для расчетов на работе, учёбе или дома. Калькулятор выполняет как простые арифметические действия, так и расчет процентов, вычисление квадратного корня, решает онлайн сложные выражения со скобками.

Калькулятор работает на компьютерах, планшетах и смартфонах, быстро загружается, считает онлайн, имеет встроенную память и дополнительный дисплей текущих действий. Результаты вычислений можно скопировать.

Режимы работы калькулятора

Калькулятор поддерживает работу в 2-х режимах: Со Скобками или Без Скобок. Основное отличие — использование скобок при расчетах и как результат возможность расчета более сложных заданий.

Для переключения режимов используйте выпадающее меню под калькулятором.

Варианты корпуса

«По умолчанию» загружается вариант корпуса для ПК или планшетов. Для более комфортной работы на смартфонах, возможно, использовать вариант мобильной компоновки.

Воспользуйтесь переключателем PC/Mobile на корпусе калькулятора для выбора удобной Вам версии.

Функции кнопок

[ х ] — умножение, [ ÷ ] — деление, [ + ] — сложение, [ — ] — вычитание;
[ % ] — расчет процентов;
[ MU ] — работа с наценкой;
[ 00 ] — ввод 2-х нулей;
[ 0 ], [ 1 ], . [ 9 ] — клавиши цифр;
[ → ] — удаление последнего знака;
[ +/- ] — изменить математический знак числа на противоположный;
[ √ ] — расчет квадратного корня;
[ M+ ] — сохранить результат в памяти, со знаком [ + ];
[ M- ] — сохранить результат в памяти, со знаком [ — ];
[ MR ] — показ памяти на дисплее;
[ MC ] — сбросить содержимое памяти;
[ AC ] — сбросить калькулятор и память;
[ C ] — сбросить калькулятор, без очистки памяти.

Работа с помощью компьютерной клавиатуры

При работе с калькулятором используйте любые цифровые клавиши клавиатуры компьютера — клавиши верхнего ряда или отдельные в правом блоке (если есть).

Ввод «Равно» — клавиша [Enter].
Ввод «Плюс» — клавиша [ + ] в верхнем ряду или правом блоке.
Ввод «Минус» — клавиша [ — ] в верхнем ряду или правом блоке.
Ввод «Умножение» — клавиша [ * ] в блоке справа или в верхнем ряду.
Ввод «Деление» — клавиша [ / ] в блоке справа или в верхнем ряду.
Удаление последнего знака — клавиша [Backspace] в цифровом ряду.
Сбросить калькулятор можно используя [Del] или [Esc] — наверху, [End] — справа.

Примеры для вычислений на калькуляторе онлайн

Вычислить процент от числа: 420 [ х ] 20 [ % ] . Результат — 84.
Прибавить проценты к числу: 420 [ + ] 20 [ % ] . Результат — 504.
Вычесть проценты из числа: 420 [ — ] 20 [ % ] . Результат — 336.
Вычислить квадратный корень из 2704: 2704 [ √ ]. Результат — 52.

Часто задаваемые вопросы

Пробую на калькуляторе онлайн вычислить простой пример 2+2×2, в ответе получаю 8. Может быть калькулятор неправильно считает ?

Калькулятор считает правильно !

Просто при вводе каждого математического действия калькулятор производит промежуточный расчет (подытог). Посмотрите на дисплее текущих действий.

Считаем: 2 + 2 = 4, 4 × 2 = 8. Правильный ответ 8.

Получить в ответе 6 можно используя Математический режим калькулятора. Этот режим поддерживает работу с выражениями и не делает подытог. Настройте математический режим, используя меню под корпусом калькулятора.

Исторические факты

Предшественником современных калькуляторов был арифмометр. Арифмометр — это механическое, настольное устройство которое могло выполнять только простые арифметические действия: сложение, вычитание, умножение и деление.

Первые механические счетные машины появились еще в 15 веке, но именно арифмометры появились в середине 19 столетия, тогда и началось их активное использование.

Источник

Делаем более-менее универсальный калькулятор услуг для сайта

Беглый анализ открытых данных показывает, что ежедневно в среднем 5 человек оставляют заявки на создание калькулятора на биржах фриланса — а еще несколько сотен интересуются вопросом в поиске. Часто запросы стандартны — и, конечно, на рынке сложился целый набор готовых предложений: от плагинов для конкретных CMS до калькуляторов, которые можно приобрести у студий. Рекорд, обнаруженный нами (см. в первом комментарии) — 24 999 рублей за довольно обычное решение.

Да, рынок есть рынок. Но поскольку мы в основном работаем с людьми, чьи сайты сделаны на конструкторах, у них нет 25 тысяч на один виджет. Вот и возникло желание написать калькулятор, которым они смогли бы пользоваться самостоятельно — и без изучения HTML, JS, JQuery и CSS.

В процессе работы над проектом нам удалось реализовать несколько находок в логике работы и дизайне калькулятора. Ими, а также полезными инструментами, и хотим поделиться с сообществом.

По сути, у нас получился довольно универсальный онлайн-конструктор калькуляторов, результат работы в котором можно встроить на любую платформу, поддерживающую вставку HTML.

Как устроен конструктор калькуляторов

Пишем свою адаптивность

Лайфхак: как упростить формулы до азбуки

Чистим код с GULP (а не тем, о чем вы могли подумать)

Есть ли жизнь после жизни?

Как устроен конструктор калькуляторов

Начиная проект, мы обсуждали довольно хардкорные идеи, но в итоге пришли к drag-n-drop интерфейсу сборки, плюс админке, в которой человек может хранить и настраивать свои калькуляторы.

В начале было пустое поле. Регистрируясь на сервисе впервые, человек действительно видит пустую страницу с единственной кнопкой добавления нового проекта-калькулятора.

В будущем на этой странице будут появляться снимки-ссылки на калькуляторы пользователя, вот как тут:

Для создания скриншота-превью калькулятора в кабинете мы использовали PhantomJS. Штука очень удобная, когда ты уже создал несколько калькуляторов, — при входе в кабинет сразу понятно, где какой из проектов.

Люди любят ползунок. Это стало понятно, когда мы запустили первых людей на сервис, и они стали выбирать, из каких элементов создать виджет.

Сам интерфейс создания калькулятора устроен похоже с ЛК — есть большое пустое поле, на которое можно добавлять элементы из боковой панели. Для старта мы выбрали 8 элементов. Пять отвечают непосредственно за калькулятор — это ползунок, выпадающий список, галочка, текстовое поле (для сбора почт, адресов и т.д.) и переключатель. Еще три — за привлекательность (картинка) и опцию заказа — текстовый блок и кнопка. Самым востребованным элементом из всех оказался ползунок.

Сначала для создания ползунка мы выбрали расширения jQuery Scrollbar, но штука странно себя вела на мобильных. Поэтому мы взяли и модифицировали расширение JQuery-Range-Slider. Остальные элементы написали и стилизовали сами

Манипуляции с элементами и данными калькуляторов производятся на клиентской части проекта — поэтому в процессе важно было придумать, как максимально экономить ресурсы браузера.

Этот момент стал одним из самых хлопотных при отладке. Но зато сейчас запись процессов, происходящих на странице, когда человек перетаскивает элемент в калькулятор (это самый ресурсозатратный момент), выглядит так:

Мы максимально порезали обработчики, оставив только необходимый минимум. С оптимизацией на клиентской части нам здорово помог инструмент Timeline из Google Chrome Developer Tools.

Исходно все элементы хранятся в объекте FIELDS — у каждого есть типовой HTML-шаблон и список опций. После перетаскивания элемента в рабочую область, нужные опции прилетают с сервера и подставляются в шаблон — например, на кнопку навешены отправка информации о заказе владельцу и клиенту: по почте через наш сервер, либо по смс — пока через API SmsSimple, но мы ищем другой сервис (и будем рады рекомендациям).

Чтобы подставлять опции, к прототипу строки мы написали свой метод Signe. Работает он так:

При этом мы стараемся защититься от вставки исполняемых кодов в шаблон: прежде всего на стороне сервера удаляются теги , а основная защита построена на экранировании спецсимволов + эскейп тегов.

Drag’n’drop по-своему. Идея «бери больше — кидай дальше», на наш взгляд, это самый удобный способ сборки чего бы то ни было для обычного пользователя. Ну хотя бы потому, что красиво.

Когда мы рассматривали существующие решения для создания калькуляторов, в них смущала некая «прибитость элементов гвоздями» — факт, что элементы можно расположить довольно строго определенным образом: например, только друг под другом, а не рядом. Хотелось уйти от этого, для чего мы придумали систему точек.

Cетка невидимых пользователю точек

Перед перетаскиванием нового элемента мы формируем карту точек, в которые можно добавить новое поле — для этого скрипт обращается ко всем элементам рабочей области и оценивает их границы.

Что это дает? Пользователь сразу может выбрать между таким:

И вот таким вариантом расположения элемента:

При движении мы постоянно проверяем, находится ли мышь над калькулятором, а под капотом запоминаем тип перетаскиваемого поля и позицию, в которую нужно его бросить.

Перетаскивание элемента само по себе не затрачивает много ресурсов браузера, однако проверка того, куда прицелился пользователь, прямо зависит от количества полей, которые уже добавлены в калькулятор. Чтобы сэкономить ресурсы браузера, мы стали определять только координаты полей, которые находятся рядом с мышью, и выявлять ближайшее к ней поле:

Для создания самих визуальных эффектов при сборке калькулятора мы использовали jQuery UI и Animate.css

Абстрагируемся от системы мер и весов. Поскольку решение хотелось сделать универсальным и простым, мы отказались от дополнительных полей, в которых при создании калькулятора человек бы выбирал метры, граммы или рубли. Условные обозначения можно вписать — но чисто для удобства и ориентира. Для всех текстовых элементов мы использовали движок Medium Editor – очень удобный и простой текстовый редактор.

Чтобы доказать, что конструктор подходит для чего угодно, мы наделали разных примеров. А один из примеров наделал шума среди первых тестеров:

«Шаблон «расчет количества мяса» — просто убил: по картинке понятно, что шашлык, а по градациям — такое впечатление, будто из всех этих людей собрались шашлык делать) Ржали всем отделом».

Пощупать калькулятор-шаблон, который развеселил целый отдел, можно здесь

Картинки — это важно. Для лучшего знакомства с товаром или услугой логично добавить изображения над теми же галочками или иным полем, отвечающем за выбор. Благодаря сетке точек, получилось реализовать вставку картинки в любую область рабочего поля. Иногда это полезно:

За тему с ёлочками спасибо Владимиру Гынгазову, автору канала “Adobe Muse по-русски”

Сама реализация загрузки картинок сделана через FileSystem API&File API — весь процесс отлично описан в этой статье.

«А поиграться с. » Логично дать пользователю возможность подстроить цвета текстов, кнопок, фона и т.д. под цвета сайта. Для вызова и создания цветовой палитры мы использовали виджет Spectrum.

Хранение данных и автосохранение. Данные о клиентской части калькулятора хранятся в формате JSON. Вы можете увидеть их структуру, просто написав в консоли SAVER.json на сервисе.

Автосохранение происходит при каждом действии, если в калькуляторе есть активность. Изменения параллельно сохраняются и в DOM, причем каждый раз мы проверяем:

• Есть ли в JSON все данные из DOM.
• Есть ли в DOM все данные из JSON.

Если же в пределах 4 секунд ничего не происходит, калькулятор останавливает автосохранение до новых правок — так мы избавляемся от бессмысленных запросов к серверу.

Превью. Чтобы не затрачивать ресурсы браузера клиента, мы решили не анимировать интерфейс предпросмотра с помощью jQuery — поскольку с анимацией отлично справляется и CSS3: достаточно поменять класс в корне интерфейса, и у области просмотра изменится ширина и наружное оформление, стилизованное под смартфон и планшет.

Внимание на консоль

Само создание адаптивной версии калькулятора стало отдельной песней.

Div-ная верстка: пишем свою адаптивность

В конструкторе сайтов uKit, для которого исходно создавался наш проект, используется сетка Twitter Bootstrap — популярное и заслуженное решение, чтобы адаптировать веб-элементы под экран посетителя. Но бутстреп предполагает два варианта дизайна: таблицу или колонку. Поэтому мы разработали собственный вариант адаптации калькулятора.

Т.к. структура калькулятора хранится в JSON, у нас есть родительский массив со строками, а в каждой строке — массив ячеек. Помимо этого, в ячейке есть массив суб-строк (и суб-ячеек), чтобы внутри было не одно поле, а несколько. Структура ячеек показана ниже:

У калькулятора есть родительский блок со стилем display: table, внутри у него есть table-row и table-cell, соответственно. Сам калькулятор отрисовывается на сайте во фрейме. Внутри фрейма размещены стили для адаптации — и когда фрейм становится достаточно узким, калькулятор без изменения HTML-сетки перебрасывает поля на новые строки. Сделано это с помощью изменения стиля display: если на широком калькуляторе это table-cell, то на узком становится block, и наше поле оказывается на новой строке.

Исходно-десктопный вид калькулятора зависит от ширины контейнера, в котором он находится, а калькулятор стремится показать в одной строке как можно больше полей. При сужении экрана функция, которая перестраивает сетку, проходит по всем строкам калькулятора, и если в строке есть «лишние» ячейки, ниже создается новая строка.

• Если сам сайт с калькулятором адаптирован под мобильные устройства, контейнер с калькулятором будет занимать всю ширину устройства без масштабирования.
• Если же сайт не адаптирован под мобильные устройства, калькулятор будет отображаться в меньшем масштабе — а его вид повторять вид для ПК.

Аналогично и в редакторе: когда пользователь меняет ширину своего проекта, перед ним отображается фрейм с копией его калькулятора. Как только ресайз завершен, под фреймом рисуется новая сетка, фрейм незаметно для пользователя скрывается — и можно продолжать работу с полями и формулами.

Упрощаем работу с формулами

Так как у нас есть полноценный кабинет управления калькулятором, мы решили отказаться от использования чего-то внешнего и экселеподобного, а в идеале — и сложных формул при создании и редактировании форм.

Вместо этого всего в отдельной вкладке есть элементы калькулятора в виде схемы. Схема содержит названия переменных и диапазоны значений для каждого из элементов калькулятора.

Чтобы задействовать какое-то поле в расчете, достаточно указать его переменную в окошке слева. Формул может быть несколько: в этом случае в калькуляторе отображается несколько результатов, например “Обычная цена” и “Цена со скидкой”.

Переменные начинаются с буквы “A”. Если полей больше, чем букв в латинском алфавите, к имени переменной добавится еще одна буква: “AA” и так далее. Каждая буква связана с числовым id конкретного поля в калькуляторе. Найти готовое решение для преобразования числа в латинские буквы и комбинации букв нам не удалось. Поэтому мы написали следующий метод:

DAT.varName(9) // I
DAT.varName(39) // AM
DAT.varName(9650215) // UCALC

Будем рады, если он вам пригодится (с вопросами можно стучаться к condor-bird).

Оптимизируем скорость загрузки

Чем дальше, тем больше мы занимались интерфейсом сервиса. Но конечная цель — чтобы человек не только собрал у нас свой калькулятор, но и поставил его к себе на сайт в виде виджета (хотя можно и опубликовать калькулятор по ссылке и использовать в каком-нибудь соцсети).

То есть, пора было отрезать ломоть калькулятор от сервиса. Встал выбор между двумя путями:

Быстрым. В том же превью грузится виджет калькулятора — можно скрыть все элементы интерфейса конструктора, оставив поля, сетку и калькулирование — и вот он, по сути, виджет для стороннего сайта.

Но быстрый путь был отвергнут — потому что он замедлял загрузку: мы получили бы 1959 килобайт, 269 из которых заняли бы все CSS-ки, используемые в сервисе. А ведь одно из главных требований к виджету на сайте — чтобы он грузился быстро.

И правильным. Тут мы пошли к GULP — чтобы обрезать все лишнее, вроде переноса строк, и собрать один минифицированный файл с максимально чистым кодом. Почему GULP? На то есть важная причина — у нас был 41 файл (и, соответственно, 41 запрос к серверу), а мы хотели уместить все в один запрос. И мы получили то, что хотели.

Это наш дефолтный шаблон. Была скорость загрузки курильщика

Стала скорость загрузки здорового человека

Теперь мы оставляем от 140 до 180 килобайт — в зависимости от числа полей. Для каждого типа поля есть две версии: короткая и вдвое короче — для стороннего сайта.

А что насчет скорости исполнения скрипта, спросите вы?

Это огромный калькулятор расходов на свадьбу, созданный реальным пользователем. Было так.

Тот же проект. Стало так

Как видно на картинке ниже, самым тяжеловесным остается текстовое поле — его мы будем оптимизировать дальше, отдавая на сайт только опцию, которую выбрал пользователь (в настройках поля есть выбор между телефоном, почтой, текстом, числовым значением и т.д.). В остальном для каждого калькулятора мы подключаем только используемые модули.

После загрузки на стороннем сайте калькулятор больше не обращается к нашему серверу: все формулы и прочее необходимое зашиты в загруженный на сайте код.

Упрощаем автообновление калькулятора, встроенного на сайт

В идеальном случае пользователь собрал калькулятор, получил код для встраивания на сайт — и наступило счастье.

Но установка на сайт не всегда значит, что человек больше не будет трогать готовый калькулятор. Самый очевидный случай, когда требуется внести изменения, — это рост или снижение цены на услугу.

Поэтому для каждого встроенного калькулятора мы делаем две версии:

1. Опубликованную — ту, что непосредственно встроена на сайт.
2. Редактируемую — ту, которую можно открыть и начать править в личном кабинете.

Именно для этого в системе присутствует большая зеленая кнопка «Сохранить» — пока вы её не тронули, мы не переносим на сайт изменения, сделанные в версии для редактирования, а просто запоминаем их через автосохранение.

Первые выводы

Состоят в том, что при создании онлайн-калькулятора и его админки, — задаче, имеющей массу готовых решений, — много места для новинок. Кому-то в новинку все, как brizing — конструктор калькуляторов стал первым боевым проектом, в котором ему доверили работу джуниора. Но и остальные открыли для себя много нового.

Открытий явно станет больше — и вы можете подкинуть нам еще идей и задачек: uCalc находится на стадии открытого тестирования, и мы будем благодарны всем, кто найдет время пощупать решение и отписать мысли и ощущения в комментариях, либо в личку мне, brizing и condor-bird.

UPD. Спасибо всем, кто принял участие в тестировании сервиса. Список ближайших обновлений вы можете найти здесь.

Источник