Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Андрей КулешовJavaScriptХороший тон клиентской разработки
JavaScriptСамый популярный и самый ненавидимый языкпрограммирования в мире▪ Первая инкарнация – под именем LiveScript (в д...
Где используется ECMAScript?▪ Браузеры – клиентская часть веб-сайтов.▪ NodeJS – серверная часть веб-сайтов▪ Action Script ...
JavaScript как кривое зеркало Си-языков▪ JavaScript особенно неприятен людям, которые долго и успешно писали на  Си-подобн...
Проверка и присвоение значенийСи-подобные                                    JavaScript▪ if (item != null)                ...
=== и его злобный брат-близнец ==▪ Все приходящие с Си-языков пишут:      Выражение           Результат  if(a == b) {     ...
Объявление переменных▪ То, что нужно помнить всегда – областью видимости переменной является  функция▪ Причем вся функция,...
Подъем переменых (variables hoisting)Что пишем мы                   Как это читает JavaScriptfunction f() {               ...
Простое правило – пишите так, как этопрочитает JavaScript▪ Все переменные, используемые в функции, всегда объявляйте на са...
В сложных функциях появляются огромныесекции объявления переменныхfunction f() {var i,    j,    k,    greeting = hello,   ...
Не засоряйте глобальный объект▪ Каждая ваша новая переменная, созданная вне функции, добавляется к  глобальному объекту. Т...
Namespaces▪ Вообще-то их в JavaScript нет, но, условно говоря, они есть▪ В качестве namespace используется обычный объект ...
Самовызывающиеся функции▪ Самовызывающаяся функция – функция, которая исполняется немедленно  после объявления▪ Смысле еѐ ...
Замыкания▪ Хранение ссылок на объекты/значения из более высокого скопа  function getItemsCounter() {    var count = 0;    ...
Классы…▪ Типичные стадии изучения JavaScript:  - узнаем язык программирования  - узнаем, что в JS есть классы!  - узнаем, ...
Модули▪ Задача модуля – инкапсуляция независимого куска логики▪ var GetDevModule = (function ($, global) {    //some initi...
Используйте Strict Mode▪ “strict mode”;▪ Старые браузеры эту строку проигнорируют, а новые переключатся на  использование ...
Юнит-тестировние▪ Юнит-тестирование – это хорошо в принципе  Но для JavaScript это хорошо особенно▪ В отличие от компилиру...
Существующие фреймворки▪ QUnit – от автором jQuery, написанный для тестирования jQuery  Просто нормальный фреймворк  Набор...
Организация Continous Integration▪ Первый подход – запускать на сервере браузер и прогонять в нѐм тесты▪ Второй подход – з...
Демо – создание страницы с тестами
Интересное чтение▪ JavaScript: the Good Parts by Douglas Crockford▪ http://javascript.ru▪ StackOverflow – unit testing dis...
Интересное видео▪ The Tale of JavaScript. I Mean ECMAScript. by Douglas Crockford▪ Good JavaScript Habits for C# Developer...
Интересные ссылки▪ JSLint - средство поиска очевидных ошибок и проверка следованию  хорошему стилю программирования  http:...
Вопросы?                 Внимательно слушаю! Андрей Кулешовkaa-tula@ya.ru    akuleshov.tulaСпециально для http://GetDev.NET
Upcoming SlideShare
Loading in …5
×

JavaScript: хороший тон клиентской разработки

5,144 views

Published on

Видео со встречи: http://getdev.net/Event/javascript-good-form

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

Published in: Technology

JavaScript: хороший тон клиентской разработки

  1. 1. Андрей КулешовJavaScriptХороший тон клиентской разработки
  2. 2. JavaScriptСамый популярный и самый ненавидимый языкпрограммирования в мире▪ Первая инкарнация – под именем LiveScript (в девичестве Mocha)▪ Переименован в JavaScript как знак союза двух корпораций Этим переименованием были введены в заблуждение, и вводяся до сих пор, многие и многие программисты▪ Стандартизован под именем ECMAScript▪ Синтаксисом напоминает Си-подобные языки и Java, чем и вызывает большую часть ненависти в свой адрес, так как ведет себя иногда совершенно по иному.
  3. 3. Где используется ECMAScript?▪ Браузеры – клиентская часть веб-сайтов.▪ NodeJS – серверная часть веб-сайтов▪ Action Script (Flash, Flex)▪ Шеллы для Windows/Linux▪ Внедрение в собственные продукты для предоставления пользователям возможностей программирования▪ И даже попытки программировать микроконтроллеры
  4. 4. JavaScript как кривое зеркало Си-языков▪ JavaScript особенно неприятен людям, которые долго и успешно писали на Си-подобных языках▪ Тут похожие циклы, похожие фигурные скобочки, чуть-чуть похожее объявление фукций и переменных...▪ И совсем другие области видимости и правила работы с необъявленными переменными
  5. 5. Проверка и присвоение значенийСи-подобные JavaScript▪ if (item != null) ▪ if (item)▪ if (str != null && str.length > 0) ▪ if (str)▪ if (val != 0) { x = val; } else { x = 5; } ▪ x = val || 5;▪ if (item != null) { x = item.text; } ▪ x = item && item.text;
  6. 6. === и его злобный брат-близнец ==▪ Все приходящие с Си-языков пишут: Выражение Результат if(a == b) { … 5 == “5” True } Оно даже как будто бы работает 0 == null False▪ Но очень смешно – пытаясь undefined == null True приводить типы и сравнивать „0‟ == „‟ False результат. 0 == „0‟ True▪ Лучше использовать пару === / !==, которая не использует приведение 0 == „‟ True типов trn == 0 True▪ Тогда ни у кого из читателей кода не false == „0‟ True возникнет вопрос, является ли ошибкой равенство 0 == false, или это ваш хитрый приѐм программирования
  7. 7. Объявление переменных▪ То, что нужно помнить всегда – областью видимости переменной является функция▪ Причем вся функция, а не только та часть функции, которая ниже объявления переменной
  8. 8. Подъем переменых (variables hoisting)Что пишем мы Как это читает JavaScriptfunction f() { function f() { var greeting = ‘hello’; var greeting = ‘hello’, for(var i = 0; i < 4; i++) i = undefined, { spaced = undefined; var spaces = ‘ ‘ + ‘ ‘; for(i = 0; i < 4; i++) greeting += spaces; { } spaces = ‘ ‘ + ‘ ‘;} greeting += spaces; } }
  9. 9. Простое правило – пишите так, как этопрочитает JavaScript▪ Все переменные, используемые в функции, всегда объявляйте на самом еѐ верху▪ Во всей функции должен быть только один оператор var – на первой позиции▪ Так вы сможете гарантировать отсутствие недопониманий со стороны менее опытных разработчиков▪ И – да, это коренным образом расходится с советом из Си – объявляйте переменную по месту еѐ использования И поначалу вызывает оторопь.
  10. 10. В сложных функциях появляются огромныесекции объявления переменныхfunction f() {var i, j, k, greeting = hello, total = 0, name = "GetDev.NET", message = greeting + " " + name, st, containerId = #container‘, minX, maxX, minY, maxY, tempResult,…..Что служит неплохим сигналом к рефакторингу
  11. 11. Не засоряйте глобальный объект▪ Каждая ваша новая переменная, созданная вне функции, добавляется к глобальному объекту. Туда же (в обычном режиме) добавляют и переменные, которые забыли объявить.▪ С каждой новой переменной увеличивается риск совпадения имен – как между вашими собственными переменными, так и между добавленными сторонней библиотекой или плагином браузера/среды выполнения▪ (Кстати, если вы используете переменную без объявления, причем в любом месте, то она, обычно, попадает как раз в глобальный объект. Исключение – “strict mode”)
  12. 12. Namespaces▪ Вообще-то их в JavaScript нет, но, условно говоря, они есть▪ В качестве namespace используется обычный объект – в идеале – один корневой объект на приложение▪ Все остальные переменные являются его свойствамиvar GetDevNet = GetDevNet || {};GetDevNet.map = new Map();GetDevNet.url = ‚http://getdev.net/‛▪ Смысле этого ровно тот же: логическая группировка объектов, функций и переменных (теперь – свойств)
  13. 13. Самовызывающиеся функции▪ Самовызывающаяся функция – функция, которая исполняется немедленно после объявления▪ Смысле еѐ – спрятать внутри себя логику, переменные и данные(function (GD, $, global) { GD.title = $(‚#title‛).text();})(GetDevNet, jQuery, window);
  14. 14. Замыкания▪ Хранение ссылок на объекты/значения из более высокого скопа function getItemsCounter() { var count = 0; return { getItemsCount: function () { return count; }, addItem: function () { count++; } }; }▪ Позволяет иметь приватные данные – счетчик здесь
  15. 15. Классы…▪ Типичные стадии изучения JavaScript: - узнаем язык программирования - узнаем, что в JS есть классы! - узнаем, что в объектах классов нет приватных свойств - узнаем, что в JS нет классов. Есть функции-конструкторы - узнаем, что в функциях-конструкторах можно организовать приватные свойства Но это тема отдельная и довольно глубокая.
  16. 16. Модули▪ Задача модуля – инкапсуляция независимого куска логики▪ var GetDevModule = (function ($, global) { //some initialization… … var module = { … … } ; return module; })(jQuery, window);▪ (function (GetDev, $, global) { GetDev.module = { … … }; })(GetDev, jQuery, window);
  17. 17. Используйте Strict Mode▪ “strict mode”;▪ Старые браузеры эту строку проигнорируют, а новые переключатся на использование строгого режима – подмножества разрешенных операций JavaScript▪ Тут вы уже не сможете случайно объявить глобальную переменную, что плюс уже само по себе
  18. 18. Юнит-тестировние▪ Юнит-тестирование – это хорошо в принципе Но для JavaScript это хорошо особенно▪ В отличие от компилируемых языков, в которых проверка синтаксиса всего кода выполняется естественным образом во время компиляции, об ошибке синтаксиса JavaScript мы узнаем только во время выполнения▪ Автоматически запускаемые юнит-тесты помогают значительно приблизить во времени момент выявления ошибки▪ Вместо цикла «написал - откомпилировал – узнал об ошибке» получаем цикл «написал – залился – запустились тесты на Continous Integration-сервере – узнал об ошибке». Что несколько дольше во времени, но все равно быстрее и надежнее, чем «написал – выложил – получил сообщение от пользователей «что-то не работает»»
  19. 19. Существующие фреймворки▪ QUnit – от автором jQuery, написанный для тестирования jQuery Просто нормальный фреймворк Набор ассертов, setup/teardown, визуальный интерфейс как HTML-страница Выполняется внутри браузера (просто открываем HTML-файл с тестами) Отсутствует возможность запуска на сервере вне браузера▪ JUnit JS – тот же шарик, вид сбоку assertEqual-операции принимают аргументы в порядке, обратном QUnit, так что заменить в процессе один на другой будет более проблематично▪ Jasmine – Behavior Driven Development фреймворк Из плюсов – улучшенная поддержка Mock- и Spy-объектов из коробки▪ PhantomJS – среда для запуска JavaScript-тестов без браузера
  20. 20. Организация Continous Integration▪ Первый подход – запускать на сервере браузер и прогонять в нѐм тесты▪ Второй подход – запускать на сервере тесты в невизуальной среде (PhantomJS, V8)▪ Оба подхода имеют преимущества и недостатки
  21. 21. Демо – создание страницы с тестами
  22. 22. Интересное чтение▪ JavaScript: the Good Parts by Douglas Crockford▪ http://javascript.ru▪ StackOverflow – unit testing discussion
  23. 23. Интересное видео▪ The Tale of JavaScript. I Mean ECMAScript. by Douglas Crockford▪ Good JavaScript Habits for C# Developers by Elijah Manor▪ Structuring JavaScript Code – Pluralsight▪ Crockford on JavaScript video series on Yahoo!
  24. 24. Интересные ссылки▪ JSLint - средство поиска очевидных ошибок и проверка следованию хорошему стилю программирования http://www.jslint.com/▪ JS Fiddle – средство исполнения кода, разметки и CSS-стилей в онлайне http://jsfiddle.net/▪ QUnit http://qunit.org▪ PhantomJS http://phantomjs.org/
  25. 25. Вопросы? Внимательно слушаю! Андрей Кулешовkaa-tula@ya.ru akuleshov.tulaСпециально для http://GetDev.NET

×