Сравнительный анализ клиентских реализаций импорта пакетов и модулей в экосистеме JavaScript

Популярность создания веб-ресурсов способствует разработке различных систем и программ, которые упрощают процесс написания сайта. Также они помогают повысить эффективность работы, а также позволяют разработчику сфокусироваться на основной логике приложения.
В работе был проведен анализ концепции веб-технологий и веб-приложений. Показано, что они носят распределенный и сетевой характер. При этом средства разработки разделяются на серверные и клиентские. Проведенный анализ показал, что основным инструментом разработки клиентской логики веб-приложения является язык Javascript.
Анализ фреймворков показал, что они могут быть спроектированы с использованием различных принципов. Основным из них является объектно-ориентированный подход. Результаты тестирования производительности на примере фреймво ...

ВВЕДЕНИЕ 2
1 ОБЩИЕ ПРИНЦИПЫ РАЗРАБОТКИ ВЕБ-ПРИЛОЖЕНИЙ 3
1.1 Тенденции развития веб-технологий 3
1.2 Структура веб-приложений 6
1.3 Характеристика языков веб-программирования 19
2 ТЕХНОЛОГИИ ВЕБ-ПРОГРАММИРОВАНИЯ 28
2.1 Инструменты создания веб-публикаций 28
2.2 Фреймворки JavaScript и их особенности 39
3 ИССЛЕДОВАНИЕ ВОЗМОЖНОСТЕЙ ФРЕЙМВОРКОВ 65
3.1 Тестирование программного продукта 65
3.2 Результаты тестирования 68
ЗАКЛЮЧЕНИЕ 73
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 74

Скорость, с которой распространяется информация сегодня, является впечатляющей. Интернет стал катализатором к распространению информации. В Интернете находятся миллионы веб-сайтов различной направленности. Развитие Интернета неразрывно связано с проектированием сайтов. Массовое появление сайтов спровоцировала проблему их качества. Использование фреймворков становится все более и более популярным, и это обосновывается тем, что разработка с помощью фреймворка уменьшает нагрузку на процесс разработки web-приложений , это достигается тем, что разработка с использованием фреймворка избавляет от проблемы использования повторяющегося кода. Без использования фреймворков, становится гораздо сложнее создавать web-приложения, сопровождать и модернизировать их. Между тем, использование фреймворков дел ает процесс создания программы намного более легким и функциональным. Проанализировав информацию из сети Интернет, можно увидеть, что существует сотни фреймворков для создания web-приложений. Поэтому достаточно сложно сделать выбор фреймворка, так как каждый из них имеет большое количество заманчивых функций и дополнений . А неправильный выбор фреймворка может стать основной причиной неудачи проекта.
В работе проведен анализ фреймворков на базе языка Javascript. Проведено исследование их архитектуры и возможностей применения.
 

Если инструкции return в функции нет (или есть, но не указано возвращаемое значение), то JavaScript возвратит undefined.Можно вызвать функцию, вообще не передавая ей параметры. В таком случае будет считаться, что их значения равны undefined:add(); // NaN// Нельзя проводить сложение undefined и undefinedМожно передать больше аргументов, чем ожидает функция:add(2, 3, 4); // 5// используются только первые два аргумента, "4" игнорируетсяЭто может показаться бессмысленным, но на самом деле функции могут получить доступ к "лишним" аргументам с помощью псевдомассива arguments, в нём содержатся значения всех аргументов, переданных функции. Давайте напишем функцию, которая принимает неограниченное количество аргументов:function add() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; } return sum;}add(2, 3, 4, 5); // 14Или создадим функцию для вычисления среднего значения:function avg() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; } return sum / arguments.length;}avg(2, 3, 4, 5); // 3.5Довольно удобно, но есть небольшая проблема. Данная функция понимает только список из цифр, разделённых запятой. А что если нам надо передать массив чисел? Давайте переделаем функцию:function avgArray(arr) { var sum = 0; for (var i = 0, j = arr.length; i < j; i++) { sum += arr[i]; } return sum / arr.length;}avgArray([2, 3, 4, 5]); // 3.5На тот случай, если вы хотите использовать первый вариант функции, а не переписывать её заново, то в JavaScript есть возможность вызывать функцию с произвольным массивом аргументов. Для этого используется метод apply():avg.apply(null, [2, 3, 4, 5]); // 3.5Вторым аргументом метода apply() передаётся массив, который будет передан функции в качестве аргументов. О первом аргументе мы поговорим позже. Наличие у функций методов также говорит о том, что на самом деле они являются объектами.В JavaScript можно создавать анонимные функции:var avg = function() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; } return sum / arguments.length;}Данная запись семантически равнозначна записи function avg(). Это даёт возможность использовать разные интересные трюки. Вот посмотрите, как можно "спрятать" локальные переменные в функции:var a = 1;var b = 2;(function() { var b = 3; a += b;})();a; // 4b; // 2В JavaScript есть возможность рекурсивного вызова функции. Это может оказаться полезным при работе с иерархическими (древовидными) структурами данных (например, такие, которые встречаются при работе с DOM).function countChars(elm) { if (elm.nodeType == 3) { // TEXT_NODE return elm.nodeValue.length; } var count = 0; for (var i = 0, child; child = elm.childNodes[i]; i++) { count += countChars(child); } return count;}Тут мы сталкиваемся с проблемой: как вызвать функцию рекурсивно, если у неё нет имени? Для этого в JavaScript есть именованные функциональные выражения. Вот пример использования именованной самовызывающейся функции:var charsInBody = (function counter(elm) { if (elm.nodeType == 3) { // TEXT_NODE return elm.nodeValue.length; } var count = 0; for (var i = 0, child; child = elm.childNodes[i]; i++) { count += counter(child); } return count;})(document.body);Имя функции в примере доступно только внутри самой функции. Это улучшает оптимизацию и читаемость кода.Собственные объектыНа заметку: Для более подробной информации по объектно-ориентированному программированию в JavaScript смотрит Введение в объектно-ориентированный JavaScript.В классическом Объектно-Ориентированном Программировании (ООП) объекты - это коллекции данных и методов, которые этими данными оперируют. JavaScript это язык, основанный на прототипах, и в его определении нет понятия классов, таких, как в языках C++ или Java. (Иногда это может запутать программистов, знакомых с языками, в которых есть классы.) Вместо классов JavaScript использует функции. Давайте представим объект с личными данными, содержащий поля с именем и фамилией. Есть два типа отображения имён: "Имя Фамилия" или "Фамилия, Имя". С помощью объектов и функций можно сделать следующее:function makePerson(first, last) { return { first: first, last: last }}function personFullName(person) { return person.first + ' ' + person.last;}function personFullNameReversed(person) { return person.last + ', ' + person.first}s = makePerson("Simon", "Willison");personFullName(s); // Simon WillisonpersonFullNameReversed(s); // Willison, SimonРаботает, но сам код никуда не годится. С таким подходом у вас будут десятки функций, засоряющих глобальный объект. Это можно исправить, прикрепив функцию к объекту. Это просто, ведь все функции и есть объекты:function makePerson(first, last) { return { first: first, last: last, fullName: function() { return this.first + ' ' + this.last; }, fullNameReversed: function() { return this.last + ', ' + this.first; } }}s = makePerson("Simon", "Willison")s.fullName(); // Simon Willisons.fullNameReversed(); // Willison, SimonА вот кое-что новенькое: ключевое слово 'this'. Когда 'this' используется внутри функции, оно ссылается на текущий объект. Значение ключевого слова зависит от способа вызова функции. Если вызвать функцию с обращением к объекту через точку или квадратные скобки, то 'this' получится равным данному объекту. В ином случае 'this' будет ссылаться на глобальный объект. Это часто приводит к ошибкам. Например:s = makePerson("Simon", "Willison")var fullName = s.fullName;fullName(); // undefined undefinedПри вызове fullName(), 'this' получает ссылку на глобальный объект. А так как в глобальном объекте не определены переменные first и last, то имеем два undefined.Используя особенность ключевого слова 'this' можно улучшить код функции makePerson:function Person(first, last) { this.first = first; this.last = last; this.fullName = function() { return this.first + ' ' + this.last; }; this.fullNameReversed = function() { return this.last + ', ' + this.first; };}var s = new Person("Simon", "Willison");В примере мы использовали новое ключевое слово: 'new'. Оно тесно связано с 'this'. Данное ключевое слово создаёт новый пустой объект, а потом вызывает указанную функцию, а this получает ссылку на этот новый объект. Функции, которые предназначены для вызова с 'new' называются конструкторами. Существует соглашение, согласно которому все функции-конструкторы записываются с заглавной буквы.Мы доработали наш код в предыдущем примере, но всё равно остался один неприятный момент. Каждый раз, когда с помощью конструктора создаётся новый объект, мы заново создаём и две новые функции. Гораздо удобнее создать эти функции отдельно и дать доступ к ним конструктору:function personFullName() { return this.first + ' ' + this.last;}function personFullNameReversed() { return this.last + ', ' + this.first;}function Person(first, last) { this.first = first; this.last = last; this.fullName = personFullName; this.fullNameReversed = personFullNameReversed;}Уже лучше: мы создали функции-методы только один раз, а при новом вызове функции-конструктора просто ссылаемся на них. Можно сделать ещё лучше? Конечно:function Person(first, last) { this.first = first; this.last = last;}Person.prototype.fullName = function fullName() { return this.first + ' ' + this.last;}Person.prototype.fullNameReversed = function fullNameReversed() { return this.last + ', ' + this.first;}Person.prototype это объект, доступ к которому есть у всех экземпляров класса Person. Он создаёт особую цепочку прототипов. Каждый раз, когда вы пытаетесь получить доступ к несуществующему свойству объекта Person, JavaScript проверяет, существует ли свойство в Person.prototype. И в результате, все свойства объекта Person.prototype становятся доступными и всем экземплярам этого класса через this.Это очень мощный инструмент. JavaScript позволяет изменять прототипы в любое время, это значит, что можно добавлять новые методы к существующим объектам во время выполнения программы:s = new Person("Simon", "Willison");s.firstNameCaps();// TypeError on line 1: s.firstNameCaps is not a functionPerson.prototype.firstNameCaps = function() { return this.first.toUpperCase()}s.firstNameCaps(); // "SIMON"Занимательно то, что добавлять свойства в прототип можно и для встроенных объектов JavaScript. Давайте добавим новый метод to String, который возвращает строку задом наперёд:var s = "Simon";s.reversed(); // TypeError on line 1: s.reversed is not a functionString.prototype.reversed = function reversed() { var r = ""; for (var i = this.length - 1; i >= 0; i--) { r += this[i]; } return r;}s.reversed(); // "nomiS"Данный метод будет работать даже на литералах строки!"This can now be reversed".reversed();// desrever eb won nac sihTКак уже упоминалось, prototype это часть цепочки. Конечным объектом этой цепочки прототипов является Object.prototype, методы которого включают и toString() - тот метод, который вызывается тогда, когда надо получить строковое отображение объекта. Вот что можно сделать с нашими объектами Person:var s = new Person("Simon", "Willison");s.toString(); // [object Object]Person.prototype.toString = function() { return '<Person: ' + this.fullName() + '>';}s.toString(); // "<Person: Simon Willison>"Помните, мы вызывали avg.apply() с первым аргументом равным null? Теперь мы можем сделать так: первым аргументом, переданным методу apply() будет объект, который примет значение 'this'. Вот к примеру упрощённая реализация 'new':function trivialNew(constructor, ...args) { var o = {}; // Создаём новый объект constructor.apply(o, arguments); return o;}Это не точная копия new, так как она не устанавливает цепочку прототипов. Метод apply() применяется не очень часто, но знать его важно. В примере выше, запись ...args (включая многоточие) называется "оставшиеся аргументы" - она включает в себя все оставшиеся аргументы.В JavaScript метод apply() имеет похожий метод call(), который тоже позволяет устанавливать 'this', но принимает список, а не массив аргументов.function lastNameCaps() { return this.last.toUpperCase();}var s = new Person("Simon", "Willison");lastNameCaps.call(s);// Аналогично записи:s.lastNameCaps = lastNameCaps;s.lastNameCaps();Вложенные функцииОбъявлять новые функции можно и внутри других функций. Мы использовали этот приём чуть выше, создавая функцию makePerson(). Главная особенность вложенных функций в том, что они получают доступ к переменным, объявленным в их функции-родителе:function betterExampleNeeded() { var a = 1; function oneMoreThanA() { return a + 1; } return oneMoreThanA();}Если ваша функция в своей работе использует другие функции, которые больше нигде не используются, то можно просто вложить вспомогательные функции в основную. Это сократит количество функций в глобальном объекте, что довольно неплохо.Ещё это отличный способ сократить количество глобальных переменных. Так при написании кода у нас часто будет возникать искушение создать огромное число глобальных переменных, которые будут доступны разным функциям. Всё это усложняет код, делает его менее читаемым. Вложенные функции имеют доступ к переменным своей функции-родителя, и мы может использовать это для группировки множества функций вместе (естественно в разумных пределах), что позволит держать наш глобальный объект в чистоте и порядке.ЗамыканияМы подошли к одному из самых мощных и непонятных инструментов JavaScript. Давайте разберёмся.function makeAdder(a) { return function(b) { return a + b; };}var x = makeAdder(5);var y = makeAdder(20);x(6); // ?y(7); // ?Функция makeAdder создаёт новую функцию, которая прибавляет полученное значение к значению, которые было получено при создании функции.Такой же фокус мы наблюдали в предыдущем примере, когда внутренние функции получали доступ к переменным той функции, в которой были объявлены. Только в нашем примере основная функция возвращает вложенную. Поначалу может показаться, что локальные переменные при этом перестанут существовать. Но они продолжают существовать - иначе код попросту не сработал бы. Вдобавок ко всему у нас есть две разные "копии" функции makeAdder, присвоенные разным переменным (одна копия прибавляет 5, вторая 20). Вот что имеем в результате вызова:x(6); // возвратит 11y(7); // возвратит 27И вот что произошло: когда JavaScript выполняет функцию, создаётся объект 'scope', который содержит в себе все локальные переменные, объявленные внутри этой функции. Он инициализируется любым значением, переданным функции в качестве параметра. 'Scope' подобен глобальному объекту, который содержит все глобальные переменные и функции, кроме нескольких важных отличий: при каждом вызове функции создаётся новый объект 'scope' и, в отличие от глобального, к объекту 'scope' нельзя получить прямой доступ из вашего кода. И нет способа пройтись по свойствам данного объекта.Так что при вызове функции makeAdder создаётся новый объект 'scope' с единственным свойством: a, которому присваивается значение, переданное функции в качестве аргумента. Потом makeAdder возвращает новую анонимную функцию. В любом другом случае 'сборщик мусора' удалил бы объект scope, но возвращаемая функция ссылается на этот объект. В итоге объект scope не удаляется до тех пор, пока существует хотя бы одна ссылка на него.Все объекты scope соединяются в цепочку областей видимости, которая похожа на цепочку прототипов в объектной системе JavaScript'а.Замыкание - это связка из функции и объекта scope, созданного при её вызове. Утечки памятиУ замыканий есть один неприятный побочный эффект - из-за них очень просто получить утечку памяти в Internet Explorer. В JavaScript освобождение памяти происходит с помощью "сборщика мусора" - каждому объекту при создании выделяется физический объём памяти, и эта память освобождается браузером в тот момент, когда на объект не остаётся ни одной ссылки. Объекты, созданные средой исполнения, этой же средой и обрабатываются.Браузер имеет дело с огромным множеством объектов, представляющих HTML страницу - таких как объекты DOM. И на браузер возложена обязанность в выделении и освобождении памяти для них.Браузер Internet Explorer для этого использует свой собственный сборщик мусора, который работает немного не так, как сборщик в JavaScript. Несоответствие в работе этих двух сборщиков могут вызвать утечки памяти.Утечка памяти в IE появляется каждый раз, когда возникает циклическая ссылка между объектом JavaScript и собственным объектом браузера. Например:function leakMemory() { var el = document.getElementById('el'); var o = { 'el': el }; el.o = o;}Циклическая ссылка в примере приводит к утечке памяти. IE не освободит память, выделенную под el и o, пока браузер полностью не перезагрузят.Код подобный примеру выше даже может использоваться в реальном проекте. Ведь проблема утечки памяти наиболее актуальна для приложений с большим сроком выполнения и для приложений, работающих с большими структурами данных или с циклами.Как правило, утечки не настолько очевидны. Замыкания могут ненамеренно вызывать утечку памяти:function addHandler() { var el = document.getElementById('el'); el.onclick = function() { this.style.backgroundColor = 'red'; }}Данный код при клике изменяет цвет элемента на красный. Ну и создаёт утечку памяти. Почему? Из-за ссылки на el, которая нечаянно попала в замыкание, созданное анонимной внутренней функцией. Это создаёт циклическую ссылку между объектом JavaScript (функцией) и объектом браузера (el).Есть несколько способов обойти данную ошибку. Самый простой это вообще не использовать переменную el:function addHandler(){ document.getElementById('el').onclick = function(){ this.style.backgroundColor = 'red'; }}Занимательно, но одним из способов решения проблемы будет помещение нашего замыкания в другое замыкание:function addHandler() { var clickHandler = function() { this.style.backgroundColor = 'red'; }; (function() { var el = document.getElementById('el'); el.onclick = clickHandler; })();}Внутренняя функция выполнится сразу же и спрячет свой контекст от замыкания функции clickHandler.С утечками можно бороться и отменяя циклические ссылки при событии window.onunload. Многие библиотеки делают это автоматически. Но такое поведение отключает bfcache в Firefox 1.5, так что будьте внимательны с установкой события unload в браузере Firefox.Клиентский JavaScriptКогда интерпретатор JavaScript встраивается в веб-браузер, результатом является клиентский JavaScript. Это, безусловно, наиболее распространенный вариант JavaScript, и большинство людей, упоминая JavaScript, обычно подразумевают именно клиентский JavaScript. Клиентский JavaScript включает в себя интерпретатор JavaScript и объектную модель документа (Document Object Model, DOM), определяемую веб-браузером.Документы могут содержать JavaScript сценарии, которые в свою очередь могут использовать модель DOM для модификации документа или управления способом его отображения. Другими словами, можно сказать, что клиентский JavaScript позволяет определить поведение статического содержимого веб-страниц. Клиентский JavaScript является основой таких технологий разработки веб-приложений, как DHTML, и таких архитектур, как Ajax. Спецификация ECMA 262 определила стандартную версию базового языка JavaScript, а организация World Wide Web Consortium (W3C) опубликовала спецификацию DOM, стандартизующую возможности, которые браузер должен поддерживать в своей объектной модели. Основные положения стандарта W3C DOM достаточно полно поддерживаются наиболее распространенными браузерами за одним важным исключением – Microsoft Internet Explorer; в этом браузере отсутствует поддержка механизма обработки событий.Другие области использования JavaScriptJavaScript – это язык программирования общего назначения, и его использование не ограничено веб-броузерами. Изначально JavaScript разрабатывался с прицелом на встраивание в любые приложения и предоставление возможности исполнять сценарии. С самых первых дней веб-серверы компании Netscape включали в себя интерпретатор JavaScript, что позволяло исполнять JavaScript сценарии на стороне сервера. Аналогичным образом в дополнение к Internet Explorer корпорация Microsoft использует интерпретатор JScript в своем веб-сервере IIS и в продукте Windows Scripting Host. Компания Adobe задействует производный от JavaScript язык для управления своим проигрывателем Flash файлов.Компания Sun также встроила интерпретатор JavaScript в дистрибутив Java 6.0, что существенно облегчает возможность встраивания сценариев в любое Java приложение.И Netscape, и Microsoft сделали доступными свои реализации интерпретаторов JavaScript для компаний и программистов, желающих включить их в свои приложения. Интерпретатор, созданный в компании Netscape, был выпущен как свободно распространяемое ПО с открытыми исходными текстами и ныне доступен через организацию Mozilla (http://www.mozilla.org/js/). Mozilla фактически распространяет две разные версии интерпретатора JavaScript 1.5: один написан на языке C и называется SpiderMonkey, другой написан на языке Java и, что весьма лестно для автора книги, называется Rhino (носорог).Глава 2. Сравнительный анализ клиентских реализаций импорта пакетов и модулей в экосистеме JavaScript2.1 Модули, импорт и экспортВ JavaScript, слово "модули" относится к небольшим блокам повторно используемого кода. Они являются основой многих JavaScript шаблонов проектирования и необходимы для сборки нетривиальных JavaScript-приложений.import связывает один или несколько экспортируемых переменных из другого модуля в область видимости текущего модуля. Связанные переменные перечислены внутри фигурных скобок, а идентификаторы других модулей должны быть в кавычках.