Открыть меню    

Полезные практики javascript

Оптимизация (throttle - ускорение)

Оптимизация любых функций, который повторяются слишком часто.

Проверку запустим не чаще, чем в 100мс:
То есть на каждой следующей прокрутке Timeout очищается и только при останове и по прошествии 100мс, то только тогда будет вызван scroll.

var scrollTimeout;
// на каждый запуск скролла в эту переменную записываем новый Timeout,
// который отработает через 100мс

window.addEventListener("scroll", function(event){

    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function() {
        //....
    }, 100);

})

Фасад

Работаем например над общими компонентами по смыслу в одной папке.

Далее импортируем их в одном файле и экспортируем так:

//task.ts
import TasksComponent from './tasks.component';
import TaskEditorComponent from './task-editor.component';
import TaskMyDirective from './task-tooltip.directive';

export {
    TASKS_DIRECTIVES,
    TasksComponent,
    TaskEditComponent,
    TaskMyDirective
};

Далее мы можем экспортировать по отдельности или все вместе в другие модули:

//app.ts
import { TasksComponent, TaskEditComponent } from './tasks/tasks';

Конструкция !!

Конструкция !! позволяет преобразовать любой выражение JS в его логический эквивалент.

!!"ЭЭЭЭЭ" === true //true

!!0 === false //true

Альтернатива свойству функции arguments

function log(target, name, descriptor) {
  const original = descriptor.value;
  if (typeof original === 'function') {
    descriptor.value = function(...args) {
      console.log(`Arguments: ${args}`);
      try {
        const result = original.apply(this, args);
        console.log(`Result: ${result}`);
        return result;
      } catch (e) {
        console.log(`Error: ${e}`);
        throw e;
      }
    }
  }
  return descriptor;
}

Обратите внимание на то, что здесь мы использовали оператор расширения для того, чтобы автоматически создать массив со всеми переданными методу аргументами. Это — современная альтернатива свойству функции arguments.

Oператор расширения в действии:

var log = function(a, b, ...rest) {
  console.log(a, b, rest);
};

log(1, 2, 3, 4, 5, 6); // 1 2 [ 3, 4, 5, 6 ]

Комментарии к статье

Добавить комментарий