Реализация на стороне клиента

В качестве программной основы здесь используется язык JavaScript, т.е. функции управления, хранения и обработки данных осуществляются с помощью конструкций данного языка. При этом можно использовать либо фреймовую структуру, либо cookie-наборы. Можно осуществить реализацию и с помощью одной страницы, используя объектную модель документа (DOM) и CSS, однако такой вариант будет крайне не эффективным как с точки зрения разработки, так и с точки зрения использования.
Для хранения данных можно использовать: массив строк или объектов, строку данных или внешний js-файл. Отмечу сразу, что данные структуры можно составлять вручную или генерировать с помощью программного генератора отчетов. Составление данных вручную требует просто огромных усилий и сопровождается большим количеством ошибок и неточностей, в отличие от второго варианта, который легко и быстро создаст данные в заданном формате. Однако в этом случае придется изучать дополнительный язык программирования для создания самого генератора отчетов.
Массив строк. В этом случае с помощью JavaScript создается обычный массив, поля записи в котором отделены друг от друга символом разделителя полей. Структура данных может иметь такой формат "код товара|название товара|цена", например:
mass[0]='123|Телевизор|7000';

Получить значения полей можно при помощи метода split():

var L_SplitCount=mass[0].split('|');
var L_Code=L_SplitCount[0]; // код товара
var L_Name= L_SplitCount[1]; // название товара
var L_Cost=L_SplitCount[2]; // цена товара

В качестве разделителя необходимо указывать символ, который не встречается ни в одной строке массива записей (например "|", "#" и др.), поскольку в противном случае произойдёт неправильное разделение полей записи.
Для получения значений полей нескольких записей необходимо использовать вложенный цикл: внешний цикл - по записям, внутренний - для разделения полей. Кроме того, необходимо помнить, что поле с индексом 0 - код товара, 1 - наименование товара и т.д. Это не очень удобно, требует дополнительного программного кода и определенного времени для получения значения поля. Поэтому чаще всего используется массив объектов.
Массив объектов. В этом случае кроме массива данных необходимо создать ещё и конструктор объекта. Код в этом случае будет таким:

function MyObject(A_Code,A_Name,A_Cost)
{// конструктор товаров
this.Code=A_Code;// код
this.Name=A_Name;// имя
this.Cost=A_Cost;// цена
} mass[0]=new MyObject('123','Телевизор','7000');

Обращение к полям объекта осуществляется так:

var L_Code=mass[0].Code; // код товара
var L_Name= mass[0].Name; // название товара
var L_Cost=mass[0].Cost; // цена товара

Давайте посмотрим на записи в массиве строк и массиве объектов:

mass[0]='123|Телевизор|7000';
mass[1]='123|Телевизор|7000';
mass[2]='123|Телевизор|7000';

и

mass[0]=new MyObject('123','Телевизор','7000);
mass[1]=new MyObject('123','Телевизор','7000);
mass[2]=new MyObject('123','Телевизор','7000);

>Мы видим, что запись состоит не только из полезных данных - "123", "Телевизор" и "7000", но и элементы языка для описания структуры записи, которые существенно увеличивают размер описания записи. В первом случае описание записи занимает 15 байт (с учетом символа перевода строки и возврата каретки), во втором - 31 байта, тогда как полезные данные занимают 16 байт в обоих случаях, т.е. размер описания записи во втором случае в два раза превышает размер полезных данных! Это значит, что при заданном ограничении размера html-страницы (30-50kb) мы сможем создать базу данных в два раза меньше по размеру, чем в первом случае.

Пример.

Предположим, что размер одной записи = 31b. 30kb - 30720b. Тогда количество записей будет таким:

30720/31=990,97

т.е. можно создать 990 записей, тогда как с использованием массива строк (15 kb на запись)- 2048 записей.

Как же уменьшить размер описания записи? Для этого можно использовать строку данных.

Строка данных. В этом случае все данные помещаются в одну строку с разделителями записей и полей, например:

L_Str='123#Телевизор#7000|456#Магнитофон#1500';

Здесь символ "#" - разделитель полей, а "|" - разделитель записей.

На описание записи в этом случае требуется всего 3 байта - 2 разделителя полей и 1 разделитель записей.

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

  1. Разбить строку данных на записи с помощью метода split().
  2. Разбить запись на поля с помощью того же метода.
  3. Получить в цикле значения полей.
Данная операция потребует использования вложенного цикла со всеми вытекающими отсюда проблемами и затратами. Для использования данной структуры в реальном проекте её необходимо сначала преобразовать в массив строк или массив объектов. То есть, с помощью строки данных мы уменьшаем размер структуры данных, а с помощью массива объектов - оптимизируем код и повышаем удобство работы с ней.
Внешний js-файл. Использование внешнего файла для хранения информации обладает следующими преимуществами перед хранением в коде JavaScript:
  • Возможность подгрузки информации в процессе работы. Для этого можно во фрейм загружать разные js-файлы
  • Отделение данных от программной части
  • Автоматизированное создание нескольких файлов с помощью генератора отчетов
Во внешнем js-файле можно использовать любую конструкцию JavaScript для хранения информации, однако, как было рассказано выше, эффективнее всего использовать для этого строку данных.
Подключение внешнего файла осуществляется в заголовке html-страницы с помощью следующего кода:
<script language="JavaScript" src="catalog.js"></script>
Copyright © 2016