Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   JS.next(стандарты, фичи, движки) (https://javascript.ru/forum/offtopic/50248-js-next-standarty-fichi-dvizhki.html)

kobezzza 01.03.2015 22:34

nerv, для написания итераторов удобно использовать генераторы.

function *makeIterator(array){
    var nextIndex = 0;

    while (nextIndex < array.length) {
        yield array[nextIndex++];
    }
}

var iterator = makeIterator([1,2,3]);

for (var key of iterator) {
    alert(key);
}


А ещё можно так:

for (var key of (el for (el of [1,2,3]))) {
    alert(key);
}

nerv_ 01.03.2015 22:51

kobezzza, ага, спасибо, я знаю. Только без regeneratorRuntime в ES5 работать не будет.

Кстати, эта поделка от фейсбука https://github.com/facebook/regenerator

kobezzza 01.03.2015 22:56

Цитата:

Сообщение от nerv_ (Сообщение 359156)
kobezzza, ага, спасибо, я знаю. Только без regeneratorRuntime в ES5 работать не будет.

Кстати, эта поделка от фейсбука https://github.com/facebook/regenerator

Угу, она юзается в Babel.

Erolast 07.03.2015 21:38

Наткнулся тут на одну фичу, здесь, вроде, еще не было:

let room = new Room();
let character = new Character({room});
assert.equal(character.room, room);

room.destroy();
assert.isNull(character.room);
assert.isNull(room); //!!!

И даже кодить ничего не надо:
const revoke = Symbol();

class Model {
    constructor() {
        let {
            proxy,
            revoke: revokeHandler
        } = Proxy.revocable(this, {});
        
        this[revoke] = revokeHandler;
  
        return proxy;
    }
    
    destroy() {
       this[revoke]();
    }
}

class Character extends Model {
    constructor(room) {
        super();
        Object.assign(this, {
            room
        });
    }
}

class Room extends Model {}

https://people.mozilla.org/~jorendor...roxy.revocable

Octane 09.03.2015 21:02

Изобретаем Deferred по новой :D
class Deferred {

    constructor(generator) {
        this.promise = new Promise((resolve, reject) => {
            Object.assign(this, {resolve, reject});
        });
        generator.next();
        let next = value => {
            let result = generator.next(value);
            if (!result.done) {
                value = result.value;
                if (value && value.next) {
                    new Deferred(value).done(next).fail(this.reject);
                } else {
                    next(value);
                }
            }
        };
        next(this);
    }

    done(onFulfilled) {
        this.promise.then(onFulfilled);
        return this;
    }
    
    fail(onRejected) {
        this.promise.catch(onRejected);
        return this;
    }

}
function * getFoo() {
    let deferred = yield;
    setTimeout(function() {
        deferred.resolve('foo');
    }, 100);
}

function * getBar() {
    let deferred = yield;
    let foo = yield getFoo();
    setTimeout(function() {
        deferred.resolve(foo + 'bar');
    }, 100);
}

new Deferred(getBar()).done(function(value) {
    console.log(value);
});

// в консоль выведется "foobar"

melky 12.03.2015 18:55

Octane, поясняй пож. я, например, нифига не понял :)

Tagged template strings. Вызываем функции без скобок?

alert`1`

тот же код, пропущенный через babel:
"use strict";

var _taggedTemplateLiteral = function (strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); };

alert(_taggedTemplateLiteral(["1"], ["1"]));

kobezzza 12.03.2015 19:53

Цитата:

Octane, поясняй пож. я, например, нифига не понял

Tagged template strings. Вызываем функции без скобок?
Ну, это решение следующей проблемы:

var myStr = `
  Hello ${name}!
  I'm glad to see you.
`;


Если все оставить как есть, то в нашей строке будут переводы строк и начальные пробелы, а зачастую нам это совсем не нужно. В некоторых языках существуют разные литералы строк, которые могут по разному обрабатывать такие кейзы, но в JS решили сделать самый универсальный способ: позволить пользователю самому определять "тег" для строки, где обрабаывать нужную логику (экранирование, переводы строк и т.д.)

var myStr = n2br`
  Hello ${name}!
  I'm glad to see you.
`;


Скобки тут бы очень мешались, поэтому их нет, всё просто :)

К сожалению тег может быть только один :(

FINoM 12.03.2015 19:57

К моему удивлению, с babel прокатил такой синтаксис:
class X {
	'method'() {
		
	}
}

Баг или фича?

kobezzza 12.03.2015 19:59

Цитата:

Сообщение от FINoM (Сообщение 360965)
К моему удивлению, с babel прокатил такой синтаксис:
class X {
	'method'() {
		
	}
}

Баг или фича?

Это нормальный синтаксис ES6:

class X {
	method() {

	}

	'@method'() {

	}

	[1 + 2]() {

	}
}

Safort 12.03.2015 20:51

melky,
Цитата:

Tagged template strings. Вызываем функции без скобок?
kobezzza,
Цитата:

Скобки тут бы очень мешались, поэтому их нет, всё просто
Я однажды чуть не психанул и не переписал все вызовы методов в таком стиле :D

kobezzza 12.03.2015 20:53

Цитата:

Я однажды чуть не психанул и не переписал все вызовы методов в таком стиле
:D

***

Пример функции экранирования переменных:

function html(arr, ...vars) {
    return arr.reduce((str, el, i) => str += EscapeStr(vars[i - 1]) + el);
}

var str = html`Hello ${name}`;

Safort 12.03.2015 22:06

В бетку добавили классы http://blog.chromium.org/2015/03/chr...ations_12.html
З.Ы. в ночноПанде тоже, как я понял, уже их можно использовать)

З.Ы.Ы. теперь в ФФ из самого нужного осталось только модули заделать. Я почти счастлив.

Octane 12.03.2015 22:52

Цитата:

Сообщение от melky
Octane, поясняй пож. я, например, нифига не понял

Ты про deferred? Что-то типа CO.
Я просто не с первого раза догнал что за const caller = yield в этой статье: «No promises: asynchronous JavaScript with only generators». Оказалось ничего интересного, просто в next передается.

nerv_ 13.03.2015 16:40

Неприятный момент с Symbol
try {
    var string = [Symbol()].join();
} catch(e) {
    alert(e.message);
}
alert(string);


приходится делать так
var string = [Symbol().toString()].join();
alert(string);


upd: Преобразование типов с символами

FINoM 15.03.2015 14:07

Господа, есть ли простой способ поменять функцию, отвечающую за наследование классов в Babel? В Матрёшке используется хак, добавлющий возможность использовать акцессоры в ИЕ8, а клиент требует поддержки восьмого осла в новом проекте.

И другой вопрос: кто-то вообще юзал Babel в восьмом осле? Я в своё врем очень сильно натрахался с полифилами, не хочу столкнуться с этой проблемой снова. Знаю, что Бабель по идее подерживает ИЕ8 с некоторыми ограничениями, но насколько хорошо он поддерживается на практике? В частности, интересуют for..of (Symbol) и классы.

nerv_ 15.03.2015 14:35

Цитата:

Сообщение от FINoM
В частности, интересуют for..of (Symbol) и классы.

классы просто в es5 транслируются
для поддержки Symbol надо подключить полифил browser-polyfill.js
for..of транслируется в es5 + требует полифил (насколько понимаю)

Если рассматривать в общих чертах, то:
- если эмулируется новые объекты/методы прототипов, они полифилятся
- если синтаксис - транслируются

FINoM 15.03.2015 14:37

nerv_, понял. В крайнем, могу отказаться от полифилов. Оcтаётся вопрос с переопределением _inherit.

nerv_ 15.03.2015 14:45

Цитата:

Сообщение от FINoM
Оcтаётся вопрос с переопределением _inherit

У меня тоже inherit была своя :) Такой ужас) Непонятно, нечитаемо и пр.
Хорошо, что теперь нет.

FINoM 15.03.2015 14:48

nerv_, не совсем понимаю, о чем ты. У тебя получилось переопределить _inherit?

FINoM 15.03.2015 17:17

https://github.com/babel/babel/issues/1028 - ребята говорят, что скоро можно будет указывать во что будет трансформироваться тот или иной код, в том числе и классы.

Octane 15.03.2015 17:47

Цитата:

Сообщение от FINoM
кто-то вообще юзал Babel в восьмом осле?

Цитата:

Сообщение от FINoM
Знаю, что Бабель по идее подерживает ИЕ8 с некоторыми ограничениями

Babel реализует статик свойства классов через __proto__, поэтому код для IE10+
ChildClass.__proto__ = SuperClass;
SuperClass.staticProperty = 1;
ChildClass.staticProperty → 1

nerv_ 15.03.2015 18:47

Цитата:

Сообщение от FINoM
У тебя получилось переопределить _inherit?

у меня так было
Bar.inherit(Foo);

Цитата:

Сообщение от FINoM
возможность использовать акцессоры в ИЕ8

и аксцессоры я не использую

т.е. мне ничего не надо переопределять, я просто выкинул es5 код
вернее, перевел его на es6

static почти не использую
кроме того поддержка ниже ie10 не интересует

Safort 25.03.2015 08:02

Предложение по декораторам https://github.com/wycats/javascript-decorators

Safort 25.03.2015 22:30

Не помню, было тут или нет, но на всякий случай выложу: https://github.com/tc39/ecma262/blob/master/README.md (идеи для ES7)

Erolast 26.03.2015 09:27

Цитата:

Сообщение от Safort (Сообщение 362965)
Предложение по декораторам https://github.com/wycats/javascript-decorators

Круто.

@abstract class Model {
    constructor(data) {
        Object.assign(this, data);
    }
}

console.log(new Model()); //TypeError: Cannot directly instantiate an abstract class

function abstract(target) {
    return new Proxy(target, {
        construct() {
            throw new TypeError("Cannot directly instantiate an abstract class");
        }
    })
}

Safort 01.04.2015 20:57

Что-то я туплю с генераторами, может кто-нибудь объяснит как надо?
Дано: koa.js, нативный драйвер mongodb и неосиляторство генераторов.
Вопрос: как вывести данные на страницу(да-да, вот так всё у меня запущено)?

Код(для облегчения примера, заменил запрос к БД на обычный таймер):

app.get('/query', function*() {
    let _this = this;

    setTimeout(function() {
      _this.body = 'ответ';
    }, 100);
});

В консоль выдаёт
Цитата:

Error: Can't set headers after they are sent.
Как быть? :(

Octane 01.04.2015 23:00

таймаут в генераторе на заменяет ожидание подключения к бд, у тебя должен быть yield, что-то типа такого:

app.get('/query', function*() {
    this.body = yield getBody();
});

Safort 01.04.2015 23:39

Octane,
так тоже пробовал. В консоли ошибок нет, но на странице выдает:
Цитата:

Method Not Allowed

kobezzza 02.04.2015 00:19

Блин, тоже надо Koa курить :)

kobezzza 04.04.2015 09:53

Абстрактные ссылки из ES7 были заменены на 2 новых стандарта:

https://github.com/zenparsing/es-function-bind
https://github.com/zenparsing/es-private-fields

Поддержку из Babel пока убрали, хнык :(

nerv_ 04.04.2015 10:27

Цитата:

Сообщение от kobezzza
Абстрактные ссылки из ES7 были заменены на 2 новых стандарта

Король умер. Да здравствует король :D

Моя стратегия с итератором пока верна)))

kobezzza 04.04.2015 12:39

Цитата:

Сообщение от nerv_ (Сообщение 364914)
Король умер. Да здравствует король :D

Моя стратегия с итератором пока верна)))

Я думаю заимплементят снова скоро. Вообще разделение этой фичи логично, т.к. я когда разбирался с ней, то тоже не мог понять, каким боком они туда приватные свойства класса запихнули.

Особенно порадовал пример:

$(".some-link").on("click", ::view.reset);


Т.е. тут this будет ссылаться на view, а не на ноду, т.е. если переписать на ES5, то будет так

$(".some-link").on("click", view.reset.bind(view));

kobezzza 04.04.2015 12:48

Кстати, мы как то пропустили новый синтаксис классов.

class Foo {
  // Публичное свойство
  a = 1;

  // Приватное свойство
  @b = 2;

  // Хз, можно ли так объявлять приватные методы, но вообще логично
  @foo() {
    // Обращение к приватному свойству
    this.@b = 3;
  }
}


Пока не понятно, будут ли такие свойства приватными (т.е. доступными только внутри класса) или протектед (т.е. доступные внутри класса и дочерних классов).

рони 04.04.2015 12:53

Цитата:

Сообщение от kobezzza
$(".some-link").on("click", function () { return view.reset.apply(this, arguments); });

с таким толмачом как ты, ES7 мне становится понятнее :write: :thanks:

kobezzza 04.04.2015 13:07

Цитата:

Сообщение от рони (Сообщение 364936)
с таким толмачом как ты, ES7 мне становится понятнее :write: :thanks:

:)

Цитата:

Т.е. тут this будет ссылаться на ноду, а не на view, т.е. если переписать на ES5, то будет так

$(".some-link").on("click", function () { return view.reset.apply(this, arguments); });

Напутал (писал в попыхах :D )

Наоборот, this будет прибиндин к view

$(".some-link").on("click", ::view.reset);


->

$(".some-link").on("click", view.reset.bind(view));

nerv_ 04.04.2015 13:44

Цитата:

Сообщение от kobezzza
Кстати, мы как то пропустили новый синтаксис классов.

становиться интереснее :)
Если не затруднит, на будущее, помимо выкладывания кода сюда, пожалуйста, давай еще ссылку на песочницу. А то твой текущий пример в ней не работает)

kobezzza 04.04.2015 14:36

Цитата:

Сообщение от nerv_ (Сообщение 364943)
становиться интереснее :)
Если не затруднит, на будущее, помимо выкладывания кода сюда, пожалуйста, давай еще ссылку на песочницу. А то твой текущий пример в ней не работает)

Оки, просто в Babel ещё не заимплементили.

Safort 04.04.2015 23:20

http://es6-features.org/

nerv_ 05.04.2015 09:18

Цитата:

Сообщение от Safort
http://es6-features.org/

что то мне не очень нравится качество примеров. Взять хотя бы этот

let m = new Map()
m.set("hello", 42)
m.set(s, 34) // что такое s?!
m.get(s) === 34
m.size === 2
for (let [ key, val ] of m.entries())
    console.log(key + " = " + val)


var m = {};
m["hello"] = 42;
// no equivalent in ES5 // да есть эквивалент (реализуется через массив)
// no equivalent in ES5 // и тут есть
Object.keys(m).length === 2;
for (key in m) {
    if (m.hasOwnProperty(key)) {
        var val = m[key];
        console.log(key + " = " + val);
    }
}

В качестве эквивалентов логичнее было ссылки на полифилы давать (для таких случаев).

Safort 05.04.2015 10:11

nerv_,
Цитата:

что то мне не очень нравится качество примеров.
Согласен, не все примеры корректны.


Часовой пояс GMT +3, время: 00:25.