JavaScript Tips

js-tips.md

Полезные статьи

• Делегирование событий

При делегировании событий удобно использовать метод Element.matches(), которому передаётся любой css-селектор.

О структурах данных

• Set, Map, WeakSet и WeakMap - новые типы коллекций в JavaScript ES-2015, статья Кантора на learn.javascript.ru.
• ES6 — set, map, weak

Private data with WeakMap use case

var Person = (function() {
  var privateData = new WeakMap();

  function Person(name) {
    privateData.set(this, { name: name });
  }

  Person.prototype.getName = function() {
    return privateData.get(this).name;
  };

  return Person;
}());

Private instance members with weakmaps in JavaScript

Webpack

• Webpack 4 Tutorial: from 0 Conf to Production Mode

Для использования extract-text-webpack-plugin с webpack 4 нужно установить его обновлённую версию:

$ npm install extract-text-webpack-plugin@next

Destructuring in practice examples

Destructuring object arguments

const profile = {
  title: 'Engineer',
  department: 'Engineering'
};

function isEngineer({title, department}) {
  return title === 'Engineer' && department === 'Engineering';
}

Convert array of arrays in array of objects

const classes = [
  [ 'Chemistry', '9AM', 'Mr. Darnick' ],
  [ 'Physics', '10:15AM', 'Mrs. Lithun'],
  [ 'Math', '11:30AM', 'Mrs. Vitalis' ]
];

const classesAsObject = classes.map(([subject, time, teacher]) => {
    return {subject, time, teacher};
});

Fetch

fetch polyfill

fetch('/users.json')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

A practical ES6 guide on how to perform HTTP requests using the Fetch API

Decorators

Exploring EcmaScript Decorators