View
788
Download
4
Category
Preview:
DESCRIPTION
by Ilya Pukhalski on Frontend DEV Conf'13 bit.ly/Ilya_Pukhalski
Citation preview
ECMAScript Harmony
Илья Пухальский,EPAM Systems
ИЛИ
ПОЧЕМУ Я ВЕРЮ В
БУДУЩЕЕ JAVASCRIPT
@witchfinderx
2
Илья Пухальский,EPAM Mobile Competency Center
На повестке дня
3
1. Как самый непонятый язык в мире стал самымпопулярным
2. Чем плох JavaScript?
3. Новые возможности
4. Взгляд в будущее
5. Наша миссия
4
Чего не будет?
5
1. Объектная модель браузера (DOM)
2. Объектная модель документа (BOM)
3. "Новых фишечек HTML5"
6
История JavaScript в картинках
7
8
ECMA-262 — стандарт языка ECMAScript
Стандарт ECMA-262
9
TC39 — технический коммитет ECMA-262
TC39
10
ECMAScript — это язык.JavaScript, JScript и даже ActionScript — диалекты.
Википедия
11
JS 1.0 (Mocha / LiveScript)
Начало 1996-гоNetscape 2.0, Брендон Айк
12
Передача на стандартизацию
1996ECMA International
13
Портирование JS 1.0 (JScript, VBScript)
Июль 1996-гоIE 3.0
14
JS 1.1
Август 1996-гоNetscape 3.0 + DOM Level 0
15
ECMA-262 1.0
Июнь 1996-гоECMA International
16
JS 1.3 (ECMA-262 1.0 и 2.0)
Июнь 1997-гоNetscape 4.0, DHTML
17
JS 1.4 (LiveWire)
1997Netscape Server-side JavaScript
<H1>
<server> // Here we use the same technique to construct a heading on the page. if ( request.deptno != null ) write("Department " + request.deptno + " Staff"); else write("All Staff");</server>
</H1>
<server> // Call a programmer-defined function (see below) to verify the database // connection. Note that this ckDatabaseConnected function may redirect to a // login page; if that happens, we want to return here once the user logs in // successfully. So we have to send the URL as a parameter.
if ( request.deptno == null ) ckDatabaseConnected("emps.html"); else ckDatabaseConnected("emps.html" + "?deptno=" + request.deptno);</server>
18
ECMA-262 2.0 (ISO/IEC 16262)
Июнь 1998-гоECMA International
19
ECMA-262 3.0
Декабрь 1999-гоECMA International
20
JS 1.5 (ECMA-262 3.0)
С ноября 2000-гоNetscape 6.0, FireFox 1.0, IE 5.5-8.0 (JScript 5.5-8.0), Opera 7.5-11.50,
Safari 3-5, Chrome 1-10.0.666
21
— Брендон Айк
«Считайте, что JavaScript спас вас «от VBScript»
22
ECMA-262 4.0
НЕ ВЫПУЩЕНАпо политическим причинам
23
ECMA-262 5.0
Декабрь 2009-гоECMA International
24
JS 1.6-1.8.1
С ноября 2005-го по июнь 2009-гоFireFox 1.5-3.6
25
JS 1.8.2 (ECMA-262 5.0 совместимость)
С ноября 2000-гоFireFox 4+, IE 9+, Opera 11.60+
26
ECMA-262 5.1 (ISO/IEC 16262:2011)
Июнь 2011-гоECMA International
27
ECMA-262 6 / ECMAScript Harmony
Декабрь 2013-гоECMA International
Так быстро?
28
29
JavaScript уже не тот
30
Он везде
Чем плох JavaScript?
31
32
1. Единый глобальный неймспейс
2. Прототипное наследование сложное и ресурсоемкое
3. Precision проблемы
4. NaN
5. Проблемы с регулярными выражениями
6. =, ==, ===
7. for ... in
8. Ваш вариант
33
— Брендон Айк
«Простите, времени было мало...«Я сделаю лучше в следующей жизни»
Новые возможности
34
35
Новое в API
36
var arr = new Array(1, 2, 3, 8, 12);
arr.find(function(n) {return n % 2;}); // [2, 8, 12]arr.findIndex(function(n) {return n / 2 === 4;}); // 3
Массивы
1. Array.prototype.find()
2. Array.prototype.findIndex()1. проверить
37
Строки1. String.prototype.contains()
2. String.prototype.repeat()
3. String.prototype.startsWith()
4. String.prototype.endsWith()
'string'.startsWith('s'); // true'string'.endsWith('s'); // false'ecmascript harmony'.contains('harmony'); // true'keep moving '.repeat(3); // keep moving keep moving
38
Новое в Math
1. Math.sign()
2. Math.log10(), Math.log2(), Math.log1p(), Math.expm1()
3. Math.cosh(), Math.sinh(), Math.tanh()
4. Math.acosh(), Math.asinh(), Math.atanh()
5. Math.hypot(), Math.trunc()
// Варианты результата // в зависимости от знака: 1, 0 и -1Math.sign(365) // 1
39
Новое в Number
1. Number.isNaN()
2. Number.toInteger()
3. Number.isInteger()
4. Number.isFinite()
5. Number.prototype.clz()
40
Object
1. Object.is()
2. Object.assign()
3. Object.mixin()
Object.is(NaN, NaN); // trueObject.is(0, -0); // falseNaN === NaN; // false0 === -0; // true
// {a: 1, b: 2}Object.assign({a: 1}, {b: 2});
// {a: 1, b: getter}Object.mixin( {a: 1}, {get b: function() {return 2}});
41
Object.observevar tweet = { text: '#frontendconf just started. Enjoy!', username: 'witchfinderx', sent: false};
Object.observe(tweet, function(changes) { changes.forEach(function(change, i) { console.log(change); });});
// Изменяем, добавляем и удаляем свойствоtweet.text = 'So boring. Waiting for a coffee...'; tweet.date = new Date();delete tweet.completed;
42
function foo(a, b = 10) {}function foo(a = 'Frontend Conf', b = 20) {}function foo(a, b = 30, me = this) {}
Стандартные значения параметров функции
43
var a = 1, b = 0; let (a = a * 10, b = 5) { console.log(a + b); // 15 }
console.log(a + b); // 1
Блочная область видимости
44
let data = new Map();data.set('key', 'key'.length); // key 3data.get('key'); // 3data.size(); // 1data.has('key'); // truedata.delete('key'); // truedata.has('key'); // false
Maps
45
let data = new Set([1, 2, 3]);.s.has(5); // falses.add(5);s.has(5); // trues.delete(5); // trues.has(5); // false
Sets
46
let wdata = new WeakMap();wdata.set('key', 'key'.length); // TypeError: Invalid value used as weak map key
wdata.has('key'); // TypeError: Invalid value used as weak map key
let wmk = {};wdata.set(wmk, 'value'); // wmk 'value'wdata.get(wmk); // 'value'wdata.has(wmk); // truewdata.delete(wmk); // truewdata.has(wmk); // false
WeakMaps
47
Модули
48
module UniverseTest {};module Universe { module MilkyWay {} };module MilkyWay = 'Universe/MilkyWay';module SolarSystem = Universe.MilkyWay.SolarSystem;
module MySystem = SolarSystem;
Определение
49
module Car { // приватные var licensePlateNo = '556-343'; // публичные export function drive(speed, direction) { console.log('details:', speed, direction); } export module engine{ export function check() { } } export var miles = 5000; export var color = 'silver';};
Экспорт / Публичные св-ва и методы
50
import drive from Car;import {drive, miles} from Car;
Импорт
51
// load(moduleURL, callback, errorCallback)Loader.load('car.js', function(car) { console.log(car.drive(500, 'north'));}, function(err) { console.log('Error:' + err);});
Загрузчик модулей
52
Классы
53
module widgets { // ... class DropDownButton extends Widget { constructor(attributes) { super(attributes); this.buildUI(); } buildUI() { this.domNode.onclick = function(){ // ... }; } }}
Пример использования
54
var widgets = (function(global) { // ... function DropDownButton(attributes) { Widget.call(this, attributes); this.buildUI(); } DropDownButton.prototype =
Object.create(Widget.prototype, { constructor: { value: DropDownButton }, buildUI: { value: function(e) { this.domNode.onclick = function(e) { // ... } } } });})(this);
class == function
55
А как же AMD?
56
— Джеймс Бурке
«Я хочу, чтобы AMD и RequireJS остались в «прошлом... Сам язык будет покрывать 80% «функционала RequireJS, как минимум для «браузера»
57
Поддержка возможностей ES 5-6 на сегодня
ECMAScript 5-6: таблицы совместимости
Будущее
58
59
ECMA-262 7.0
1. Promises
2. Перегрузка операторов
3. Типажи
4. Ваши предложения?
Миссия
60
61
Я ♥
62
1. JS FIXED
2. ES-DISCUSS.ORG
Вопросы?
63
Recommended