Добавьте веб-консоль на панель инструментов, часть 2

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

Узнайте, как работает консоль

Библиотека консоли довольно полная, но вы можете расширить ее новыми возможностями (например, указывать эхо-символы при вводе пароля). В качестве альтернативы вы можете улучшить производительность или реализовать проверку ошибок. Независимо от вашей цели, вам нужно понять, как работает библиотека. Первым шагом в получении этих знаний является понимание общей архитектуры библиотеки. В листинге 1 представлен обзор.

  var Console = 
 {
    init: function (canvasName, numCols, numRows)
          {
          },

    очистить: функция ()
           {
           },

    getLine: функция (обратный вызов)
             {
             },

    эхо: функция (сообщение)
          {
          },

    render: function ()
            {
            },

    writeChar: функция (ch)
               {
               },

    прокрутка: функция ()
            {
            }
 } 

Листинг 1: Скелетная структура консоли библиотеки

В листинге 1 показан глобальный объект с именем Console состоящий из семи свойств функции. Первые четыре свойства включают в себя общедоступный API, тогда как последние три свойства следует считать закрытыми и недоступными. Этот список свойств далек от завершения, потому что init(canvasName, numCols, numRows) вводит дополнительные свойства.

Откройте для себя init(canvasName, numCols, numRows)

В листинге 2 представлены init(canvasName, numCols, numRows) .

  init: function (canvasName, numCols, numRows)
       {
          var canvas = document.getElementById (canvasName);  Console.numCols = numCols;  Console.numRows = numRows;  Console.ctx = canvas.getContext ("2d");  Console.ctx.font = "20px / 20px monospace";  Console.ctx.textBaseline = "top";  Console.charWidth = Console.ctx.measureText ("m").   ширина;  Console.charHeight = 20;  canvas.width = Console.charWidth * numCols + 10;  canvas.height = Console.charHeight * numRows + 10;  Console.buffer = document.createElement ("   canvas "); Console.buffer.width = canvas.width; Console.buffer.height = canvas.height; Console.bufferCtx = Console.buffer.getContext (" 2d "   );  Console.bufferCtx.font = "20px / 20px monospace";  Console.bufferCtx.textBaseline = "top";  Console.screen = new Array (numRows);  for (var row = 0; row <numRows; row ++) Console.screen [row] = new Array (numCols);  Console.keyQueue = new Array ();  function keyDown (event) {// Эта функция вызывается всеми браузерами для возврата.  if (event.keyCode == 8) // Backspace?  {Console.keyQueue.push ("b");  // Следующий код необходим Chrome для предотвращения возврата backspace // в историю страниц.  event.preventDefault ();  }} canvas.addEventListener ("   keydown ", keyDown, true); функция keyPress (event) {if (event.keyCode == 8) {// Opera требует следующий код для предотвращения возврата backspace // в историю страниц. event.preventDefault () ; return;} if (event.keyCode == 13) // return? {Console.keyQueue.push ("n"); return;} var ch = (event.keyCode == 0)? event.charCode: event. keyCode; if (ch> = 32 && ch <127) Console.keyQueue.push (String.   fromCharCode (ч));  } canvas.addEventListener ("   keypress ", keyPress, true); canvas.tabIndex = 0; // Поместить холст в порядок табуляции. canvas.focus (); // Назначить фокус холсту клавиатуры. Не работает в // Internet Explorer. Console.cursorOn = true; Console.cursorCounter = 0; Console.cursorCounterMax = 5; Console.line = ""; Console.clear ();} 

Листинг 2: Инициализация консоли библиотеки

Листинг 2 сначала получает ссылку на именованный элемент <canvas> и сохраняет количество столбцов и количество строк в свойствах Console для использования другими функциями. Затем он получает контекст для рисования на этом холсте и инициализирует этот контекст для моноширинного шрифта размером 20 пикселей. Базовая линия текста устанавливается в верхней части шрифта, чтобы координаты символа были относительно его верхнего левого угла.

Теперь, когда шрифт был указан, его ширина и высота символа рассчитываются так, чтобы символы могли быть правильно расположены на холсте. Эта информация затем используется для расчета ширины и высоты холста. Дополнительные 10 пикселей добавляются к ширине и высоте, так что граница в пять пикселей окружает холст (и предотвращает невидимость курсора в нижней строке при просмотре в Internet Explorer).

Следующие несколько строк создают и инициализируют буфер для поддержки двойной буферизации. Цель состоит в том, чтобы избежать мерцания, рисуя в буфер и затем копируя содержимое буфера на холст. Различные посты в блоге (например, http://stackoverflow.com/ questions / 2795269 / do-html5- холст-поддержка-двойной буферизация ) предполагают, что современные браузеры поддерживают двойную буферизацию автоматически, тогда как старые браузеры обычно не поддерживают.

Теперь создан двумерный screen массив для хранения символов, отображаемых в консоли. JavaScript реализует двумерный массив как одномерный массив строк из одномерных массивов столбцов. Объект Array используется для создания массива строк, а затем для каждого элемента строки — массива столбцов, ссылка на которые назначена элементу массива строк.

Хотя каждая строка в этой таблице потенциально может хранить разное количество столбцов (которое называется рваным массивом ), я решил зафиксировать количество столбцов в значении, передаваемом конструктору Array . Доступ к элементу в массиве Screen осуществляется через синтаксис Console.screen[ row ][ col ] — индексы строк и столбцов начинаются с нуля.

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

Обработчик события нажатия клавиши реагирует только на клавишу возврата. Я бы предпочел обрабатывать эту клавишу с помощью нажатия клавиши, но этот обработчик событий не вызывается при нажатии клавиши Backspace в контекстах Internet Explorer, Chrome или Safari. После добавления b в очередь при нажатии клавиши выполняется event.preventDefault() чтобы предотвратить замену текущей страницы предыдущей страницей в истории страниц Chrome.

Обработчик события нажатия клавиши также реагирует на клавишу возврата для Firefox и Opera. Он игнорирует этот ключ в этих браузерах (было бы неплохо добавить второй b код в очередь), но выполняет event.preventDefault() для предотвращения замены текущей страницы предыдущей страницей в истории страниц Opera.

  очистить: функция ()
        {
           for (var row = 0; row <Console.numRows; row ++)
              для (var col = 0; col <Console.numCols; col ++)
                 Console.screen [row] [col] = "";
           Console.row = 0;
           Console.col = 0;
           Console.render ();
        } 

  getLine: функция (обратный вызов)
          {
             Console.render ();  // обновить курсор

             if (Console.keyQueue.length == 0)
             {
                if (Console.line.length == 0)
                {
                   if (обратный вызов! = не определено)
                      Перезвони();
                }
                вернуть ноль;
             }
             var ch = Console.keyQueue.shift ();
             if (ch == "b") // обрабатывать возврат
             {
                if (Console.line.length! = 0)
                {
                   Console.line = Console.line.substr (0, 
                                                      Console.line.length-1);
                   Console.echo (ч);
                }
                вернуть ноль;
             }
             Console.echo (ч);
             if (ch == "n") // обрабатывать перевод строки
             {
                var temp = Console.line;
                Console.line = "";
                вернуть темп;
             }
             еще
                Console.line + = ch;
             вернуть ноль;
          } 

  эхо: функция (сообщение)
       {
          для (var i = 0; i <msg.length; i ++)
             Console.writeChar (msg.charAt (i));  Console.render ();  } 

  render: function ()
         {
            Console.bufferCtx.fillStyle = "# 000";  // черный
            Console.bufferCtx.fillRect (0, 0, Console.ctx.canvas.width, 
                                       Console.ctx.canvas.height);
            Console.bufferCtx.fillStyle = "# 0f0";  // зеленый
            var y = 0;
            for (var row = 0; row <Console.numRows; row ++)
            {
               var x = 0;
               для (var col = 0; col <Console.numCols; col ++)
               {
                   var s = Console.screen [row] [col] + "";
                   Console.bufferCtx.fillText (s, x + 5, y + 5);
                   x + = Console.charWidth;
               }
               y + = Console.charHeight;
            }
            if (Console.cursorOn)
               Console.bufferCtx.fillStyle = "# 0f0";  // зеленый
            еще
               Console.bufferCtx.fillStyle = "# 000";  // черный
            Console.bufferCtx.fillText ("_", Console.col * Console.charWidth +   5, Console.row * Консоль.   charHeight + 5);  if (++ Console.cursorCounter == Console.cursorCounterMax) {Console.cursorCounter = 0;  Console.cursorOn =! Console.cursorOn;  } Console.ctx.drawImage (Консоль.   буфер, 0, 0);  } 

  writeChar: функция (ch)
            {
               если (ch == "b")
               {
                  if (Console.col == 0 && Console.row == 0)
                     возвращение;  // не могу вернуться за верхний левый угол
                  Console.col--;
                  if (Console.col <0)
                  {
                     Console.col = Console.numCols-1; 
                     Console.row--;
                  }
                  Console.screen [Console.row] [Console.col] = "";  возвращение;  } if (ch == "n") {Console.col = 0;  if (++ Console.row> = Console.numRows) Console.scroll ();  возвращение;  } Console.screen [Console.row] [   Console.col] = ch;  if (++ Console.col> = Console.numCols) {Console.col = 0;  if (++ Console.row> = Console.numRows) Console.scroll ();  }} 

  прокрутка: функция ()
         {
            Console.row = Console.numRows-1;
            for (var row = 0; row <Console.numRows-1; row ++)
                для (var col = 0; col <Console.numCols; col ++)
                   Console.screen [row] [col] = Console.screen [row + 1] [col];
            для (var col = 0; col <Console.numCols; col ++)
               Console.screen [Console.  numRows-1] [col] = "";  }