Статьи

Тощий JavaScript — быстро!

Январь 12, 2019

Программы JavaScript, запускаемые из любимых закладок вашего веб-браузера, могут обеспечить удивительные спецэффекты. Вы можете увеличить шрифты, изменить цвета и даже показать скрытые значения полей формы. Эти « букмарклеты » могут иметь длину до 2000 символов в некоторых браузерах (IE5), но не более 500 в других (IE6). Самые впечатляющие букмарклеты динамически создают собственные HTML, CSS и JavaScript прямо в вашем браузере. Раньше я сетовал на то, что HTML такой громоздкий … Пока я наконец-то не сделал с этим что-то

Я написал библиотеку JavaScript, которая позволяет вам визуализировать большие конструкции HTML и CSS с использованием чрезвычайно жесткого кода JavaScript. Несмотря на то, что в этой компактной библиотеке есть буквально сотни вспомогательных функций (которые весят менее 5 Кб, когда « crunchinator » на сайте www.brainjar.com удаляет комментарии и пробелы), все они названы в честь HTML-тегов, атрибутов и каскадирования. свойства таблицы стилей (CSS), которые вы уже знаете. Поистине, есть только шесть категорий для изучения:

  1. Удобства ( writestatusalert
  2. Контейнеры ( DIVSPAN
  3. Теги ( IMGINPUT
  4. Атрибуты ( NAMETYPE
  5. Свойства ( colorfont
  6. Сущности ( nbspquot

Генераторы HTML (# 2-4) возвращают готовый для xml код с именами тегов / атрибутов в нижнем регистре и заключенными в кавычки литералами. В приведенных выше примерах используются соответствующие им имена JavaScript.

Контейнеры (# 2) вызываются в строках так же, как встроенная функция JavaScript, выделенная жирным шрифтом. Теги (# 3) и атрибуты (# 4) неявно вызываются для оконного объекта и, таким образом, вообще не нуждаются в точечной нотации. 

 HREF('http://www.yahoo.com')

 выходы: 

 href="http://www.yahoo.com"

 

TITLE('Yahoo!')

 выходы: 

 title="Yahoo!"

 

 Ведущее пространство не опечатка.  Он просто ожидает объединения с другими атрибутами для легкого включения в теги и контейнеры (# 3-4). 

 

'Yahoo!'.A(HREF('http://www.yahoo.com')+TITLE('Yahoo!'))   

 выходы: 

<a href="http://www.yahoo.com" title="Yahoo!">Yahoo!</a>

В этот момент вы можете подумать: «Код JavaScript точно такого же размера, как и предполагаемый HTML!» Я доберусь до этого, но сначала … 

 IMG(SRC('images/yahoo.gif')+ALT('Yahoo!'))     

 выходы: 

<img src="images/yahoo.gif" alt="Yahoo!" />
 HR()

 выходы: 

<hr />

«Большое дело!» ты говоришь. «Сохранение только одного или двух символов?» Да, но функции контейнеров (и тегов *) также можно вызывать для массивов. Это охватывает каждый элемент массива. И цепочечные функции могут обернуть более ранние конструкции. 

 [1,2,3].TD().TR().TABLE()

 выходы: 

<table><tr><td>1</td><td>2</td><td>3</td></tr></table>

 

 Объедините это с несколькими переменными, и вы поймете, почему это так хорошо работает. 



 b=INPUT(TYPE('button')+NAME('day')); 

w=[b,b,b,b,b,b,b].TD(); 

c=[w,w,w,w,w,w].TR().TABLE();

 

 Эта конструкция на самом деле является основой построенного мной календарного компонента JavaScript.  Всего за три утверждения c 



  «Является ли TITLE атрибутом ссылки (# 4) или заголовком документа (# 2)?»  Ну, это оба! 

 

TITLE('hint')

 выходы: 

 title="hint"

 

'home'.TITLE()

 выходы: 

<title>home</title>

 

 Аналогично, STYLE  И, говоря о CSS-коде ... 






  Обе функции заглавных букв (# 4) и функции свойств в нижнем регистре (# 5) неявно вызываются в окне.  Чтобы избежать путаницы с вычитанием, в именах дефисных свойств в именах функций JavaScript используются подчеркивания (предостережение: поскольку top - это уже существующий объект браузера, я использую _top 



 color('red')

 выходы: 

 color: red;

 

width(25)

 выходы: 

 width: 25;

 

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



 x=25;  

s=WIDTH(x)+HEIGHT(x)+STYLE(width(x)+height(x));  

b=INPUT(TYPE('button')+NAME('day')+s);  

w=[b,b,b,b,b,b,b].TD();  

c=[w,w,w,w,w,w].TR().TABLE();

 

 Этот фрагмент JavaScript теперь генерирует 4185 символов безупречного HTML!  Некоторые браузеры принимают атрибуты WIDTH и HEIGHT прямо внутри тега INPUT кнопки (NS4.x), тогда как другие требуют ширину и высоту во встроенном STYLE.  Наличие обоих делает этот код кросс-браузерным.  Кроме того, переменная x упрощает изменение размера кнопок.  Вы можете предпочесть х = 30. 

 Кроме того, эти стили могут быть встроены.  Функция стиля, вызываемая для строки селектора CSS (или массива), принимает параметр свойств. 



 x=25;  

s='table tr td input'.style(width(x)+height(x)).STYLE();    yields  

<style>table tr td input{ width: 25; height: 25; }</style>


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


 LINK(REL('stylesheet')+TYPE('text/css')+HREF('cal.css'))    yields  

<link rel="stylesheet" type="text/css" href="cal.css" />


  Встроенный, встроенный или внешний.  Как бы вы это ни развивали, я поддерживаю это. 


  Объекты HTML (# 6) на самом деле не являются функциями.  Рассматривайте их как строковые константы.  Вы обнаружите, что «острый и острый» может помочь вам создать эти синтаксически «сложные» строки контента. 


 muse='Francis Edward Smedley: '.B();

muse+=(quot+'All'+acute+'s fair in love and war.'+quot).I();


  Энтузиасты XML будут рады узнать, что дополнительные функции могут быть добавлены простым вызовом конструктора HTML()  Его три параметра задаются довольно просто: в первом параметре элементы CONTAINER / Tag / attribute (разделенные пробелами) располагаются в верхнем, собственном или нижнем регистре для получения соответствующих функций.  Во втором параметре семейства свойств css (разделенные точками с запятой) добавляются с помощью двоеточий и их зависимых элементов (разделенных запятыми).  Наконец, третий параметр перечисляет именованные объекты (разделенные пробелами). 


 HTML('LANGUAGE COPYRIGHT DESCRIPTION LINK');

HTML('URL IMAGE ITEM CHANNEL RSS version');

rss='My Blog'.TITLE();

rss+='en-us'.LANGUAGE();

rss+='Copyright 2003 by Richard Renfrow.'.COPYRIGHT();

rss+='Favorite RSS feeds'.DESCRIPTION();

rss+='list.rss'.LINK();

img='Me!'.TITLE()+'myPic.jpg'.URL()+'home.html'.LINK();

rss+=img.IMAGE();

itm='Blog'.TITLE()+'RSS'.DESCRIPTION()+'blog.rss'.LINK();

rss+=itm.ITEM();

rss=rss.CHANNEL().RSS(VERSION(0.92));


  И последнее, но не менее важное: удобные функции (# 1) позволяют очень просто написать строку, отобразить ее в строке состояния или вызвать в виде предупреждения.  Во время разработки вы можете вставить несколько вызовов .alert()  Для большей интерактивности вы можете запросить контент или просто подтвердить промежуточные конструкции.  Последние три строки выше могут быть увеличены таким образом ... 


 do {  

itm='Blog'.prompt('Blog title?').status().TITLE();  

itm+='RSS'.prompt('Blog description?').DESCRIPTION();  

itm+='blog.rss'.prompt('Blog feed url?').LINK();  

rss+=itm.ITEM().confirm();  

} while (confirm('Add another?'));  

rss=rss.CHANNEL().RSS(VERSION(0.92)).prompt('paste as list.rss');


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


 ['daily','weekly','monthly'].INPUT(TYPE('radio')+NAME('frequency'))


  Наслаждаться!!

35
Share: