JavaScript Александр Березневатый, Senior Java Developer & Team Lead. - презентация

1 JavaScript Александр Березневатый, Senior Java Developer & Team Lead

2

3 > new Array() + new Array() = ?

4 > new Array() + new Array() =

5 > new Array() + new Object() = ?

6 > new Array() + new Array() = > new Array() + new Object() = [object Object]

7 > new Array() + new Array() = > new Array() + new Object() = [object Object] > 0 == ?

8 > new Array() + new Array() = > new Array() + new Object() = [object Object] > 0 == => true > 0 == 0 ?

9 > new Array() + new Array() = > new Array() + new Object() = [object Object] > 0 == => true > 0 == 0 => true > 0 == false ?

10 > new Array() + new Array() = > new Array() + new Object() = [object Object] > 0 == => true > 0 == 0 => true > 0 == false => true > '0' == false ?

11 > new Array() + new Array() = > new Array() + new Object() = [object Object] > 0 == => true > 0 == 0 => true > 0 == false => true > '0' == false => true > 0 == ' \r \t \n \t ?

12 > new Array() + new Array() = > new Array() + new Object() = [object Object] > 0 == => true > 0 == 0 => true > 0 == false => true > '0' == false => true > 0 == ' \r \t \n \t => true > NaN == NaN ?

13 > new Array() + new Array() = > new Array() + new Object() = [object Object] > 0 == => true > 0 == 0 => true > 0 == false => true > '0' == false => true > 0 == ' \r \t \n \t => true > NaN == NaN => false

14

15 План дня > История Web (продолжение) > Синтаксис > Работа с DOM > Good Parts & Bad Parts > Libraries > Performance notes > Домашнее задание

16 Цели > Общее понимание языка > Часто встречающиеся сложности > Заинтересовать в изучении > Best practice

17 Жалобы > Программирование в браузере это ужас > JS тормозит > я плохо знаю JS > JS просто большая куча ошибок

18

19 История: JavaScript > Разработан за две недели > Много чего бездумно скопировано > Пострадал в результате войны браузеров > Стандартизируется ECMA + W3C

20

21 Синтаксис

22 Синтаксис: Объекты > неупорядоченный набор свойств > var x = new Object() > var y = {};

23 Синтаксис: JSON > очень краткий и емкий формат > {}, [] > свойства в кавычках

24 Синтаксис: JSON { status : success result : [ 12, 22, { id: 45, name: Alex } ] }

25 Синтаксис: Функции > функция тоже объект > ключевое слово function > аргументы и локальные переменные

26 Синтаксис: Функции var myFunc = function(arg0, arg1) { arguments[0] === arg0;//true arguments[2] === 3;//true }; myFunc(1, 2, 3);

27 Синтаксис: Функции function iter(fn, array) { for (var i = 0; i < array.length; i++) { fn(array[i]); } }; iter(function(el){ alert(el); }, [1, 2, 3, 4]);

28 Синтаксис: Глобальный контекст > глобальные переменные это свойства объекта window > ключевое слово var > ключевое слово delete

29 Синтаксис: Видимость переменных > ключевое слово var (продолжение) > цепочки скоупов > ключевое слово with

30 Синтаксис: Видимость переменных

31 Синтаксис: Контекст > ключевое слово this > варианты контекста > методы call и apply

32 Синтаксис: Контекст function myFunc() { console.log(this); } var obj = { method : myFunc }; myFunc(); // this === window obj.method(); // this === obj obj.method.call(document); // this === document obj.method.apply(console); // this === console

33 Синтаксис: Прототипы и наследование > наследуются объекты > цепочки свойств > перезапись и удаление свойств

34 Синтаксис: Прототипы и наследование var x = { name: Alex }; var y = {}; assert(y.name === undefined); y.prototype = x; assert(y.name === x.name); y.name = Sasha; assert(y.name === Sasha); assert(x.name === Alex);

35 Синтаксис: Прототипы и наследование var JSProgrammer = { skills: javascript }; var LuxoftJsProgrammer = function(name, city) { this.name = name; this.city = city || unknown; }; LuxoftJsProgrammer.prototype = JSProgrammer; var me = new LuxoftJsProgrammer(Alex); assert(me instanceof LuxoftJsProgrammer);

36 Синтаксис: Прототипы и наследование

37

38

39 Синтаксис: eval() == evil > вызывется в той же области видимости > хуже по производительности > потенциальная дыра в безопасности > используйте заменители когда это возможно

40 Синтаксис: strict mode > "use strict"; > запрещает «скрытые» ошибки > улучшает безопасность кода > не разрешает пользоваться «неправильными» инструментами запрещает «скрытые» ошибки > улучшает безопасность кода > не разрешает пользоваться «неправильными» инструментами">

41 Синтаксис: Вопросы

42 Работа с DOM

43 Document > > document.getElementById(myElementId); > document.getElementsByTagName(div); > xpath

44 Live collections var divs = document.getElementsByTagName(div); for (var i = 0; i < divs.length; i++) { var el = divs[i]; el.parentNode.removeChild(el);// хитрая ошибка }

45 Node > Document, Element, TextNode > appendChild/removeChild > firstChild/lastChild > childNodes > getAttribute/setAttribute

46 Window > setTimeout/clearTimeout > концепция кадров > Некоторый контроль над браузером > alert/confirm/prompt

47 События > addEventListener/attachEvent > фазы просачивания и перехвата > удаление обработчиков > не используйте html аттрибуты!

48 События

49 function on(el, event, fn) { if (el.addEventListener) { el.addEventListener(event, fn, false); } else if (el.attachEvent) { el.attachEvent(on + event, fn); } else { // выдать ошибку – странный браузер } on(element, click, function() { alert(Hi); });

50 События element.addEventListener(click, function() { alert(hi); }, false); // … // скрытая ошибка element.removeEventListener(click, function() { alert(hi); }, false);

51 События var listener = function() { alert(hi); }; element.addEventListener(click, listener, false); // … element.removeEventListener(click, listener, false);

52 Стили > element.style.borderBottom = 1px solid red; > document.defaultView (хорошие браузеры) > element.currentStyle (только IE)

53 Reflow for (var i = 0; i < array.length; i++) { element.innerHTML += array[i]; // возможен reflow if (element.offsetWidth > 50) { // тут уж точно reflow // do something }

54 AJAX > Asynchronous JavaScript And XML > Баги и особенности в разных браузерах > Используйте библиотечные реализации

55 Comet > server push > Периодически опрашиваем сервер > Помним о висячих соединениях

56 DOM: Вопросы

57 Best practices

58 Bad parts > Глобальные переменные > Оператор + > typeof > with и eval > Ложные массивы > == и != > false, null, undefined, NaN > Автоматическая вставка ;

59 Bad parts function myFunc() { return { ok: true }; }

60 Bad parts function myFunc() { return { ok: false }; }

61 Bad parts function myFunc() { return; // упс { ok: false }; }

62 Bad parts function myFunc() { return; { // блок ok: false }; }

63 Bad parts function myFunc() { return; { ok: false // label }; }

64 Bad parts function myFunc() { return; { ok: false // бессмысленный оператор }; }

65 Bad parts function myFunc() { return; { ok: false; }; }

66 Bad parts function myFunc() { return; { ok: false; }; // пустой оператор }

67 Bad parts function myFunc() { return; // код недостижим, но JS промолчит { ok: false; }; }

68 Bad parts

69 Good parts > функции, замыкания > операторы || и && > JSON, {}, [] > динамические объекты и типы > JSLint

70 Good parts

71 Патерны: локальная глобальность (function(window, undefined) { var document = window.document, navigator = window.navigator, location = window.location; // ваш код }) (window);

72 Патерны: синглетон var singleton = (function() { var privateVar = 3; return { publicFn: function(arg) { return arg + privateVar; } }; }) (); singleton.publicFn(5);

73 Патерны: callback Array.prototype.each = function(fn) { for (int i = 0; i < this.length; i++) { fn.call(this, this[i], i); } }; var myNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; myNumbers.each(function(el, i) { // this === myNumbers });

74 Патерны: условные операторы function(arg1, arg2) { var name = arg1 || arg2 || unknown; // вместо: var other = arg1; if (!other) { other = arg2; } if (!other) { other = unknown; }

75 Патерны: длинный список параметров // кривовато: function fn(arg1,arg2, arg3, arg4, arg5, arg6 …); // лучше: function fn(cfg) { cfg.arg1, cfg.arg2… } fn({ arg1: ss });

76 Патерны: полиморфные функции function ajax(url, fn) { var method = get; if (typeof(url) !== string) { method = url.method; fn = url.fn; url = url.url; } // do ajax … } ajax(myUrl, myCallback); ajax({ method: post, url: myUrl, fn: myCallback });

77 Патерны: цепочечные вызовы var obj = { initialize : function() { return this; }, animate : function() { return delayController; } }; obj.initialize().animate().oncomplete(function(){ // работа по завершению анимации });

78 Performance > контролируйте reflow > помните о живых колекциях > осторожно работайте с DOM > пользуйтесь DocumentFragment > используйте локальные переменные > сжимайте свой код обфускатором

79 Отладка > FireBug, Draggonfly, WebInspector > IE: Visual Studio, Companion.JS, DebugBar > debugger > console.log() > Старые добрые window.alert()

80 Best Practices: Вопросы

81 Libraries: JQuery > Легковесная, простая, мощная > Основана на селекторах близких к CSS > Практикует «ненавязчивость»

82 Libraries: JQuery $(#myButtonId).click( function(){ $.ajax(/myActionUrl).done(function(response) { var el = $( ); el.html(response); $(#results).append(el); });

83 Libraries: ExtJS > Тяжелая библиотека компонентов > Легка в освоении > Хорошая архитектура > Много компонентов out-of-box

84 Libraries: ExtJS Ext.create('Ext.window.Window', { title: 'Hello', height: 200, width: 400, layout: 'fit', items: { xtype: 'grid', border: false, columns: [{header: 'World'}], store: Ext.create('Ext.data.ArrayStore', {}) } }).show();

85 Libraries > Dojo > Prototype > SmartClient > GWT

86 Что упустили? > Наследование (подробнее) > Детали синтаксиса > Система типов > Многое другое

87 Что почитать? > Дэвид Флэнаган: JavaScript. Подробное руководство > JavaScript: The Good Parts. Douglas Crockford > High Performance JavaScript. Nicholas C. Zakas > boosting-tips-from-nicholas-zakas > > >

88 Что посмотреть? > The Good Parts. > Speed up you javascript > 10 things Ive learned from jquery source

89 Вопросы

90 Домашнее задание > прикручиваем джаваскрипт к нашему toprankу > используем JQuery