Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Обсуждений тред (https://javascript.ru/forum/offtopic/47364-obsuzhdenijj-tred.html)

Safort 05.01.2015 19:55

Ruslan_xDD,
так трансляторы в помощь)

kobezzza 05.01.2015 21:02

Ruslan_xDD, в простом Object в качестве ключа может выступать только строка, а в Map или Set любое значение, включая объекты и это просто ну мега круто, юзаю уже больше года - не нарадуюсь.

Например, на сервере (в ноде), нужно добавлять авторизованных юзеров в специальную таблицу и иметь быстрый способ проверки:

// WeakMap выбран потому, чтобы при разрыве соединения клиента с сервером,
// оно автоматически удалилось бы и из map
var map = new WeakMap(); 

createServer(function (req, res) {
  ...

  // req - это специальный объект-подключения юзера, экземпляр класс ReadStream
  var user = map.get(req);

  if (!user ) {
    map.set(req, {
      sessionId: ...,
      ...
    });
  }
});


Цитата:

Даже если понадобится, то вряд ли заюзаю, ибо поддержка браузерами пока что плохая, и это ещё на несколько лет затянется.
Сейчас абсолютно все актуальные браузеры поддерживают: Map, WeakMap, Set (а вот WeakSet есть не везде), на ноде также в режиме --harmony всё работает.

Для фич вроде let или arrow function давно использую транслятор и сейчас абсолютно все мои разработки на ES6, а ES5 хочу забыть как страшный сон.

https://github.com/6to5/6to5

***

Конечно, многие вещи можно было делать и в ES5/3, и кажется зачем учить новое если есть старое, но это не правильный подход, ибо ES6 позволяет делать вещи объективно лучше и проще, а чтобы понять "зачем эти фичи", то нужно просто начать их использовать и понимание придёт.

ruslan_mart 06.01.2015 06:20

kobezzza, это всё очень интересно, заюзаю как-нибудь, когда время придёт. :)

Слушай, а как трансляторы работают? Ведь если я напишу let в старом браузере, то это будет ошибка. Полагаю, трансляторы просто парсят скрипты, заменяя let на var и т.д.? А то я в этом пока не очень понимаю. :-? Или транслятор - это вообще не то, о чём я подумал?

Safort 06.01.2015 08:24

Ruslan_xDD,
а на вопрос отвечает Safort из команды знатоков


Цитата:

Слушай, а как трансляторы работают? Ведь если я напишу let в старом браузере, то это будет ошибка. Полагаю, трансляторы просто парсят скрипты, заменяя let на var и т.д.?
Да, трансляторы парсят твой ES6 и хитрым(иногда не очень) образом заменяют на более громоздкие конструкции из ES5(если это возможно, конечно).

kobezzza 06.01.2015 10:34

Ruslan_xDD, как уже сказал выше Safort, то трансляторы парсят твой код, а затем преобразуют его в ES5/3. По такому же принципу работают TypeScript, CoffeeScript и т.д.

https://6to5.org/repl.html - тут можно поиграться, например,

function foo() {
  var a = 1;
  
  if (a) {
    let a = 2;
    let b = () => this;
  }
}


Превратится в

function foo() {
  var _this = this;
  var a = 1;

  if (a) {
    var _a = 2;
    var b = function () {
      return _this;
    };
  }
}

melky 06.01.2015 11:02

Цитата:

Сообщение от Ruslan_xDD
kobezzza, это всё очень интересно, заюзаю как-нибудь, когда время придёт.

:lol: новая жизнь с понедельника)


... я уже перестал с нового года кофе пить так же... *глоток кофе*

ruslan_mart 06.01.2015 11:10

kobezzza, очень хочу поизучать CoffeeScript, но пока не очень понимаю, он только в Node.js? На клиенте можно? Если да, то как его подключать? А то гугл не даёт точных ответов, поэтому не могу вникнуть. :-?

kobezzza 06.01.2015 11:14

Цитата:

kobezzza, очень хочу поизучать CoffeeScript, но пока не очень понимаю, он только в Node.js? На клиенте можно? Если да, то как его подключать? А то гугл не даёт точных ответов, поэтому не могу вникнуть.
Можно, трансляторы подключатся по принципу:

1) Ты пишешь код на языке А;
2) Затем вызываешь транслятор и сохраняешь результат, который уже и используешь.

Для автоматизациии процесса трансляции можно использовать FileWatcher-ы в IDE или системы сборки, например, Gulp или Grunt.

http://www.youtube.com/watch?v=TspTo...ature=youtu.be - это видео я сделал для своего языка Snakeskin, но принцип одинаков для всех транслируемых языков.

ruslan_mart 06.01.2015 11:18

kobezzza, всё-таки значит я не так понимал, спасибо. :)

Я думал, что работает по такому принципу:

В хейдере подключаем, допустим, coffee:

<script src="CoffeeScript.js></script>


Потом на странице где нибудь пишем скрипт:

<script type="text/coffeescript">
   код
</script>


И он на ходу парсится и эвалится в JS.

Спасибо за разъяснения, теперь более-менее понятно, что такое трансляторы. :)

kobezzza 06.01.2015 11:23

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

bes 06.01.2015 11:30

чувствую, хитом этого года станет "старики забивают на гугл и получают ответы от Safort-а и kobezzza-ы" :D
рони, Ruslan_xDD, стать что ли следующим - ребят, мне влом гуглить, объясните, плиз, как по спецификации ecmascript написать транслятор javascript, а то я не очень это себе представляю :thanks:

ruslan_mart 06.01.2015 11:31

Цитата:

Сообщение от kobezzza
слишком избыточен и затратен

Согласен.

Я просто никогда не лез в это дело и не работал с Node.js, только с PHP. Поэтому, в этом не очень шарю. Но надо будет как-нибудь поэксперементировать с этим, к тому же, в большинстве требований работы во всяких конторах сейчас это очень нужно. :)

Safort 06.01.2015 11:36

bes,
Цитата:

ребят, мне влом гуглить, объясните, плиз, как по спецификации ecmascript написать транслятор javascript, а то я не очень это себе представляю
Ээ.. ну.. э... не знаю :) Писать трансляторы дело не простое. Думаю, этим вопросом кобеззза сможет как-то помочь, у него есть опыт написания подобных штук.
Предполагаю, что тут так же как и для других языков: лексический анализатор, синтаксический анализатор и т.д.

kobezzza 06.01.2015 11:37

Цитата:

как по спецификации ecmascript написать транслятор javascript, а то я не очень это себе представляю
Тут 2 пути:

1) Не правильный: на регулярках реплейсишь синтаксис и преобразуешь его в нужный, например, так работает мой костыль https://github.com/kobezzza/NeJS (зато я написал его за вечер, уж очень хотелось юзать ES6 фичи) :) По похожему принципу работает движок макросов http://sweetjs.org/

2) Правильный: строишь AST по исходному коду (для этого уже также написано много либ, например, Accorn или Esprima), работаешь с ним, а потом преобразуешь его в конечный код.

Самый лучший на данный момент транслятор - это https://github.com/6to5/6to5, поэтому всем рекомендую юзать именно его.

***

Если рассматривать мой https://github.com/kobezzza/Snakeskin, то он реализует препроцессор в виде конечного автомата.

ruslan_mart 06.01.2015 11:40

kobezzza, ну всё, завтра свой транслятор выпущу. :D Только я пока не придумал, что он будет делать. :haha:

cyber 06.01.2015 13:04

Цитата:

Сообщение от melky
... я уже перестал с нового года кофе пить так же... *глоток кофе*

А я почти завязал с кофе после 36 часового хакатона, после него уже месяц от кофе тошнит)

cyber 06.01.2015 13:28

Если открывать html страницу в webstorm то он использует локальный сервер, какой сервер он использует?

l-liava-l 06.01.2015 16:09

Подскажите пожалуйста легковесый шаблонизатор с интеграцией в галп, который умеет инклуды.
jade не катит, там нельзя писать обычный html.

Онли инклуды, так даже лучше :)
https://www.npmjs.com/package/gulp-html-tag-include

kobezzza 06.01.2015 16:24

l-liava-l,
https://github.com/kobezzza/Snakeskin

А если нужны чисто инклуды, то
https://github.com/kobezzza/Monic

l-liava-l 06.01.2015 16:29

kobezzza,
Его уже рассматривали но решили не брать, так же как и джейд.
Ибо в команде привыкли к закрывающим тэгам и скобкам

kobezzza 06.01.2015 16:31

Цитата:

kobezzza,
Его уже рассматривали но решили не брать, так же как и джейд.
Ибо в команде привыкли к закрывающим тэгам и скобкам
Не внимательно читаешь описание, самая первая строчка: "2 types of syntax: classic and Jade-Like;"

Т.е. поддерживается и тот синтаксис, который тебе нужен

{template foo()}
  <b>Старый добрый HTML</b>
{/template}


Более того, классический синтаксис можно совмещать с Jade-Like

- template foo()
  <b>Старый добрый HTML</b>

bes 06.01.2015 19:06

npm install --global 6to5
как находится нужный пакет?
идёт обращение к определённому каталогу на сервере и ищется в его корне каталог с именем 6to5?
если сервер загибается, то пакет не установить, так?
как вообще они там на этот счёт договорились?

меня просто по незнанию пока смущает, что все эти менеджеры куда-то обращаются, чего-то скачивают без моего ведома,
я на w7, поставил linux mint, с интернетом там все пакеты неплохо сами в скачиваются и ставятся,
хотел поставить локально какой-то пакет, так и не понял, где скачать из официального источника, а не хз откуда, чтобы в итоге получилось, что поставил ровно тоже, что и при интернете ставится

kobezzza 06.01.2015 19:15

Цитата:

как находится нужный пакет?
Идёт обращение к публичному серверу NPM и и ищется нужный пакет. Логика такая же как, например, у apt-get.

Цитата:

меня просто по незнанию пока смущает, что все эти менеджеры куда-то обращаются, чего-то скачивают без моего ведома,
Ну, ты можешь сам подсасывать нужный пакет из репозитария, вручную устанавливать и компилить (если это нужно), только зачем?

cyber 06.01.2015 19:20

Вопрос по git есть проект на github пытаюсь загрузить обновление делаю
git remote add origin http://url
git add .
git commit -m 'commit'
git push origin master

Получю такую хрень
Цитата:

hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

kobezzza 06.01.2015 19:22

cyber, а ты git pull делал?

cyber 06.01.2015 19:26

kobezzza, да

Safort 06.01.2015 19:51

bes,
Цитата:

что все эти менеджеры куда-то обращаются, чего-то скачивают без моего ведома
Обращаются к оф. репозиторию, скачивает модуль с его зависимостями и устанавливает в папку C:/Users/[userName]/AppData/Roaming/npm/node_modules
Ну и прописывает его в переменной окружения(или как там она называется), чтобы он был глобально доступен.
А если локально устанавливаешь, то оно устанавливается в ту папку, в которой ты сейчас находишься.

На сколько я знаю, npm особо не сорит в ФС.

bes 06.01.2015 19:53

Цитата:

Сообщение от kobezzza
Идёт обращение к публичному серверу NPM и и ищется нужный пакет. Логика такая же как, например, у apt-get.

:) а какая там логика? собственно это и является основой моего смущения
я правильно написал?
Цитата:

Сообщение от bes
идёт обращение к определённому каталогу на сервере и ищется в его корне каталог с именем 6to5?
если сервер загибается, то пакет не установить, так?

есть некий сервер, обращение к нему идёт по неизменяемому адресу, если загнётся или изменит имя, то всё рушится,

поэтому группа поддержки старается сделать так, чтобы он никогда не загнулся (я не в курсе, я лишь предполагаю, в этом их договорённость?)
самое логичное, что приходит в голову, - конкретно для npm, что при таком способе установки, когда для npm указывается параметром лишь имя модуля, это то, что просто в корне каталога, к которому идёт обращение, лежит каталог с тем же именем, может быть у них там более сложная система, маппируют, адреса на каталоги, я не знаю, поэтому и спрашиваю

Цитата:

Сообщение от kobezzza
Ну, ты можешь сам подсасывать нужный пакет из репозитария, вручную устанавливать и компилить (если это нужно), только зачем?

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

bes 06.01.2015 19:54

Цитата:

Сообщение от Safort
Обращаются к оф. репозиторию, скачивает модуль с его зависимостями и устанавливает в папку C:/Users/[userName]/AppData/Roaming/npm/node_modules
Ну и прописывает его в переменной окружения(или как там она называется), чтобы он был глобально доступен.
А если локально устанавливаешь, то оно устанавливается в ту папку, в которой ты сейчас находишься.

На сколько я знаю, npm особо не сорит в ФС.

да, эти вещи и я заметил (про --global и прописывание в переменную среды предполагал, но точно не знал), куда - понятно, вопрос - откуда

ssadfaf 06.01.2015 20:07

С праздниками, пипл!
NewElem.style.height='2em';
console.log("   NewElem.width   " +   NewElem.style.width    ); //  Возвращает тоже 2em, издевается!

Хочу задавать в емах, а получать в пикселях, есть простой способ в одну-две строчки?
Спс.

Safort 06.01.2015 20:10

bes,
Цитата:

а когда интернета, нет как я мне всё это проконтролировать, по каким ссылкам всё это скачать и не из левого источника
пытался по адресам, которые выводятся в консоли при установке, но в тот раз у меня так ничего и не вышло
в общем вопрос по базовым концепциям
При загрузке модуля, все его зависимости подгружаются вместе с ним в его же папку и получается так:
[папка_проекта]/node_modules/[твой_модуль]/node_modules/(модули-зависимости)
Как я предполагаю, достаточно один раз загрузить модуль локально и при отсутствии сети его можно просто скопировать в папку с новым проектом.


Цитата:

есть некий сервер, обращение к нему идёт по неизменяемому адресу, если загнётся или изменит имя, то всё рушится,

поэтому группа поддержки старается сделать так, чтобы он никогда не загнулся (я не в курсе, я лишь предполагаю, в этом их договорённость?)
Цитата:

куда - понятно, вопрос - откуда
По всей видимости, да.
Как-то я говорил про ДДОС на их сервера, вот тот твит https://twitter.com/npmjs/status/532718519671345152 там же постится актуальная инфа про npm.

bes 06.01.2015 20:23

Цитата:

Сообщение от Safort
При загрузке модуля, все его зависимости подгружаются вместе с ним в его же папку и получается так:
[папка_проекта]/node_modules/[твой_модуль]/node_modules/(модули-зависимости)
Как я предполагаю, достаточно один раз загрузить модуль локально и при отсутствии сети его можно просто скопировать в папку с новым проектом.

круто, если так, но там находятся только неглобально установленные модули (поэтому либо разбираться с зависимостями, либо не ставить никакие модули глобально, а потом спокойно копировать (либо дополнительно копировать весь каталог node_modules в каталоге npm :) ))
в тот раз на linux mint был не модуль npm, при его установке ещё куча всего подтянулось для системы, что я голову сломал, но так и не завёл его на другой машине без интернета

ssadfaf 06.01.2015 20:40

Цитата:

Сообщение от ssadfaf (Сообщение 349965)
NewElem.style.height='2em';
console.log("   NewElem.width   " +   NewElem.style.width    ); //  Возвращает тоже 2em, издевается!

Хочу задавать в емах, а получать в пикселях, есть простой способ в одну-две строчки?

Легко!
console.log("   NewElem.clientWidth   " +   NewElem.clientWidth    );	// 32
console.log("   NewElem.offsetWidth   " +   NewElem.offsetWidth    );	// 32

Разница между ними объясняется на W3Schools.

cyber 06.01.2015 21:57

Обновил старый скрипт https://github.com/cyberua/modalJS )

ssadfaf 06.01.2015 22:55

Яблочники, создавшие канвас - козлы!
Размер канваса нельзя задать в цсс, только хтмл аттрибутом, иначе он их не кушает и всё перекособочивает.
Цитата:

The canvas element has two attributes to control the size of the element's bitmap: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.
Отсюда: canvas-is-stretched-when-using-css-but-normal-with-width-height-properties
А хтмл не даёт задать размер в емах.
Вот такие предлагаются окольные пути.

Safort 06.01.2015 23:16

ssadfaf,
начнём с того, что Эппл предложили канвас, а не стандартизировали его.
И закончим на том, что пиксель CSS !== обычному пикселю.
Такое, конечно, у многих бывает, но лучше сначала разберись в проблеме, а потом обзывай "козлами".

ssadfaf 06.01.2015 23:51

Safort, я их по-доброму пожурил.
Я не понимаю, что ты сказал о разных пикселях (типа, размер зависит от того, продаём мы их или покупаем?), но в цитате речь идёт о другом.
Я только начал знакомиться с канвасом и сразу же столкнулся с этой дичью.
Задал канвасу размер цссом:
NewElem.style.width='1em';

А он пургу рисует, при том, что я первый раз общаюсь с канвасом.
Тупо копирую с примеров, а получается не то. При этом я заметил, что картинки получаются хоть и неправильные, но подобные друг другу, т.е. при увеличении размера через цсс в два раза картинка остаётся неправильной, но такой же.
Там наверху по-английски написано, что внутренние координаты канваса определяются его размерами, а если они заданы некорректно, то он устанавливает внутренний размер (и координаты, соотв.) как 300 на 150 точек, которые как бы пиксели.
Т.е., получив размеры через ЦСС, он их не понимает и считает некорректными, и получается пурга. Размер самого канваса через ЦСС будет отрисован корректно (хоть 10ем*10ем, хоть 16пх*200пх), а внутри он всё равно будет рисовать, разбив себя на 300*150 точек.

Т.о, если я хочу привязать размер канваса к относительным величинам, то делаю так:
NewElem2.style.width='1em'; //какой-то элемент
var x100 = NewElem2.clientWidth;
var NewElem = window.document.getElementById(ElemIdName);	// это канвас
	NewElem.width = x100;	
	NewElem.height = x100;

И тогда всё ОК.

Safort 07.01.2015 00:02

ssadfaf,
Цитата:

Я не понимаю, что ты сказал о разных пикселях (типа, размер зависит от того, продаём мы их или покупаем?), но в цитате речь идёт о другом.
http://habrahabr.ru/post/121964/

ssadfaf 07.01.2015 00:25

Safort, спс.
Я правильно понимаю, что в этом топике можно задавать нубские вопросы? Чтобы не плодить темы с некорректными названиями и без должного понимания конечной цели?
Например:
Хотелось бы заготовить 4-6 небольших картинок (+, -, загрузочные часики, соединительные линии) для использования в treeview. Т.е. уникальных объектов будет немного, а вот их отображений на странице может быть реально много.
1. Как-то не заметил, что SVG-формат дружелюбен к Джаваскрипт. Мне, как нубу, сразу стало непонятно, что сразу надо привязываться к каким-то сторонним ресурсам, чтобы определить какие-то неймспейсы, а я ещё их (неймспейсы) не проходил. Стоит ли мне сразу грузиться SVG или обратиться к канвасу?
2. С канвасом нубу (мне) вроде легче начинать, но будет ли хорошо, если на странице канвасов будет десятки или сотни (пусть и одинаковых)?
Задумка у меня такая - минимум отдельных файлов, картинок, минимум статичного хтмл и цсс в файлах, максимум ЖС-кода.
Или как-то можно нарисовать всё это с помощью ЦСС, заданном в ДжаваСкрипт-файле?

Erolast 07.01.2015 08:50

Все зависимости модуля NPM качаются вместе с ним, аккуратно устанавливаются в отдельную папку и используются только им же, даже если модуль загружен глобально. Локальные модули спокойно копируются туда-сюда, глобальные, по сути, нужны для запуска через консоль.

Цитата:

есть некий сервер, обращение к нему идёт по неизменяемому адресу, если загнётся или изменит имя, то всё рушится,
Качать можно откуда угодно, вот здесь все варианты, правда, зависимости все равно с NPM-вского пойдут) Можно просто ручками загрузить все модули, только это муторно.


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