55+1 прием для улучшения JavaScript-кода

• красивый код
• чистый код
• правильная архитектура
• оптимизированый код

Идеальный JS - это

придерживайтесь выбранного code.style

Красивый код

LIFT - принципы

Красивый код

• Возможность легко найти нужный код
• Понять назначение файла
• Простая структура проекта
• Не повторять свой код

Архитектура

SOLID - принципы

• слабосвязанная архитектура с функциональностью
• независимые модули
• без зависимостей друг от друга.

+

•  система сообщений между модулями
• интегрпретация и реакция

Архитектура

модуль

фасад

медиатор

Архитектура

модуль

1 модуль - 1 задача

взаимозаменяемость

слабая связность

Архитектура

Паттерн "модуль"

«Модуль» — это популярная реализация паттерна, инкапсулирующего приватную информацию, состояние и структуру, используя замыкания.

var basketModule = (function() {
  var basket = []; // приватная переменная
    return { // методы доступные извне
        addItem: function(values) {
            basket.push(values);
        },
        getItemCount: function() {
            return basket.length;
        },
        getTotal: function() {
           var q = this.getItemCount(),p=0;
            while(q--){
                p+= basket[q].price; 
            }
            return p;
        }
    }
}());

IIFE

Архитектура

Паттерн "модуль"

// dataloader.js
(function () {
   angular
   .module('app')
   .factory('dataloader', dataloader);

   function dataloader() { }
})();

AngularJS

ReactJS

(function(React, module, undefined) {
  var Rating = require("./Rating.jsx");
  module.exports = React.createClass({
    render: function() {
      return (
        <div>
          <Rating data={this.props.data} />
          <button type="button" onClick={this.someFunction}></button>
        </div>           
      );
    },
    someFunction: function() {}
  });
}(React, module));

Архитектура

Паттерн "Фасад"

var module = (function() {
  var _private = {
    i: 5,
    get: function() {
      console.log('Текущее значение:' + this.i);
    },
    set: function(val) {
      this.i = val;
    },
    run: function() {
      console.log('процесс запущен');
    }
  };
  return {
    facade: function(args) {
      _private.set(args.val);
      _private.get();
      if (args.run) {
        _private.run();
      }
    }
  }
}());

module.facade({run:true, val:10});

скрытие детали реализации конкретной функциональности, хранящиеся в модулях

Архитектура

Паттерн "Фасад"

от Polymer к ReactJS

TODO: пример

Архитектура

Паттерн "Медиатор"

• посредник в общении между различными модулями
• инкапсуляция взаимодействия
• предотвращение прямого взаимодействия различных компонентов системы => ослабление связей в коде

Архитектура

Паттерн "Медиатор"

angular.module('webApp')
  .service('Mediator', function Mediator() {
    var channels = {}; // Associative object.
 
    this.publish = function(channel, data) {
      if (! channels[channel]) {
        return;
      }
 
      var subscribers = channels[channel].slice();
 
      angular.forEach(subscribers, function(subscriber) {
        subscriber.callback(data);
      });
    };
 
    this.subscribe = function(channel, cb) {
      if (! channels[channel]) {
        channels[channel] = [];
      }
 
      return channels[channel].push({
        'callback': cb,
        'id': id
      });


      channels[channel].push(cb); 
      return function(){ 
            var i = channels[channel].indexOf(cb); 
            channels[channel].splice(i, 1); 
      }; 
    };
 
    this.unsubscribe = function (channel, id) {
      if (! channels[channel]) {
        return false;
      }
      for(var i = 0, len = channels[channel].length; i < len; i++) { 
        if (channels[channel][i].id === id) { 
          var removed = channels[channel].splice(i, 1); 
          return (removed.length > 0);
        }
      }
      return false;
    };
 
  });

Чистый код

"use strict"

Никогда не объединяйте файлы, предназначенные для выполнения в строгом режиме, с файлами, не предназначенными для такой работы.

Объединяйте файлы, заключая их тела в оболочку из немедленно вызываемых функций-выражений 

Пишите свои файлы так, чтобы они вели себя одинаково в любом режиме. 

Чистый код

Используйте функции высшего порядка

 Функции высшего порядка — это функции, которые получают другие функции в качестве аргументов или возвращают функции в качестве результата.  

Научитесь находить общие шаблонные фрагменты кода, которые можно переместить в функции высшего порядка.

Чистый код

При инкапсуляции кода отдавайте предпочтение замыканиям, а не строкам

Чистый код

Отдавайте предпочтение хранению методов в прототипах, а не в объектах- экземплярах.

Чистый код

Не пытайтесь бездумно вносить изменения методом обезьяньей правки

Чистый код

Не пытайтесь бездумно вносить изменения методом обезьяньей правки

Чистый код

Используйте метод hasOwnProperty для защиты от прототипного загрязнения

Чистый код

Избегайте модификации объекта в ходе перечисления

Если в процессе перечисления свойств объекта к нему добавляются новые свойства, то учет только что добавленных к объекту свойств в процессе данного перечисления не гарантируется.

Чистый код

При последовательном переборе элементов масс ива отдавайте предпочтение циклу for, а не циклу for...in

var scores = [98, 74, 85, 77, 93, 100, 89];
var total = 0;
for (var score in scores) {
 total += score;
}
var mean = total / scores.length;
mean; // ?

Чистый код

Не используйте различные типы в массиве

TODO пример тут

Чистый код

Закладывайте все необходимые свойства объекту сразу.

Расширение слишком дорого

Чистый код

delete vs null?

null !!

DOM

упрощайте DOM

уменьшайте дерево элементов

не используйте 2 элемента, если можно использовать один

не используйте запросы к DOM в цикле

CSS

Иногда лучше img вместо css3

Разработка API

Придерживайтесь неизменных соглашений

Разработка API

Используйте объекты-параметры

var alert = new Alert({
 x: 100, y: 75,
 width: 300, height: 200,
 title: "Error", message: message,
 titleColor: "blue", bgColor: "white",
 textColor: "black",
 icon: "error", modal: true
});

Разработка API

Выстраивайте цепочки методов

TODO: тут пример Френкеля

Используйте вложенные или именованные функции обратного вызова для задания последовательности выполнения асинХронныХ команд

Не учите фреймворки, учите архитектуру