Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
Презентация была опубликована 11 лет назад пользователемСтепан Шубодеров
1 JavaScript Александр Березневатый, Senior Java Developer & Team Lead
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
15 План дня > История Web (продолжение) > Синтаксис > Работа с DOM > Good Parts & Bad Parts > Libraries > Performance notes > Домашнее задание
16 Цели > Общее понимание языка > Часто встречающиеся сложности > Заинтересовать в изучении > Best practice
17 Жалобы > Программирование в браузере это ужас > JS тормозит > я плохо знаю JS > JS просто большая куча ошибок
19 История: JavaScript > Разработан за две недели > Много чего бездумно скопировано > Пострадал в результате войны браузеров > Стандартизируется ECMA + W3C
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 Синтаксис: Прототипы и наследование
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
Еще похожие презентации в нашем архиве:
© 2024 MyShared Inc.
All rights reserved.