Заголовок

Правильный JavaScript

Будь спартанцем!

WebStandardsDays, 2011 ©

1. В блоге пишу о разном-упоротом. 2. Можете обзывать так друзей 3. Написал добрую половину жаваскрипта для фотохостинга Nikon, использую его в работе и just for fun лет шесть. И ещё я пишу на Java, но не говорите никому об этом.

Об авторе

{shaman.sir}

• Веду блог «Ни слова о луке»
• Опытный Жабоскриптёр
• Нет, правда
• И ещё я есть на гитхабе

Poolparty smile is the property of Skype Limited ©; http://www.patwreck.com/wordpress/wp-content/uploads/2010/04/13d68eccc211e88c0867f1c6a0ef92e986147a71_s.gif

У меня полчаса, поэтому очень сжато

(но не в ущерб шоу и смыслу)

Итак, начали

подождать

Кто использует в работе JS?

подождать

Кто использует ООП?

( Любое ООП )

подождать 5 сек

Расскажите, что вы думаете об ООП в JS?

( Только два слова; У вас пять секунд на размышление )

Вот что об этом думают японцы:

_{– Очень плохо всё с ООП в JavaScript, уважаемый гайдзин!}

Image source: http://lostintransit.org/archives/000772.html. In fact, these men are thinking not about JavaScript, I suppose

веб-разработчик имеется в виду

Front-End разработчик должен знать весь стек технологий

• JavaScript
• CSS
• HTML/XHTML
• XML

В школе нас учили наследованию...

http://tsdsu.co.uk/files/diploma-and-graduation-hat.jpeg

По сути наследование – почти то же, что классификация [БЫСТРО ПЕРЕКЛЮЧИТЬ]

http://img3.sencha.com/files/learn/Ext2-Container-hierarchy.gif

Ой, это картинка из другого доклада. Давайте возьмём живой пример

Впрочем, так скучно

Возьмём живой пример

http://www.genery.com/sites/all/themes/gen2/images/screen/pushkin.png

Наверное тоже не то

Это немного необычная классификация

Классификация

животных!

Здесь всё банально, рыбки от рыбок, кошки от кошек, лошади от лошадей – и всё это животные. Обычно создаются более сложные иерархии и абстракции

These Emoji are the property of Apple Inc. ©

Плохо, потому что не то. Американцы бы сказали Oh My GOD!

ОЧЕНЬ ПЛОХО, правда?

(хоть и можно обернуть в функцию)

Разберёмся в сложном и перейдём к простому

Что, если у нас есть

необычное животное?

Например, такое...

(タコ猫 / オクトケツ)

Octocat is drawn by David OReilly

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

Или вот такое...

(ドッギダック)

http://api.ning.com/files/XWzZwWqhuPRomBff4H4uwRgDFRP5xMX2YaYZ-eBmoTPYEZfIZddJ4HwYt1-0Ca9CZ6Ph1dkR5-ipAYpSAERdjZTBXA-oRL5L/dogduck.jpg

Классов нет, есть только экземпляры

• Вася – клон Пети, но с другим именем
• Тумбочка – клон шкафа, но меньше по высоте
• Шкаф – клон тумбочки, но выше и с вешалками
• Диван – клон кресла, но шире и раздвигается

TIMTOWTDI

(Есть больше одного способа сделать это)

Object.create - нововведённая функция, есть не везде. Намеренно использую маленькую букву - это экземпляры

var petya = Object.create(null); 
            // или Object.create();
petya.name = 'Петя';
petya.greet = function() 
              { console.log('Я – ' + this.name); }

var vasya = Object.create(petya); 
            // NB: копируются ссылки!
vasya.name = 'Вася';
vasya.greet();
> 'Я – Вася'

Fork and change

(UNIX, GitHub, ...)

Фабрика кошек (но не осьмикошек, мы не планируем их наследовать, не будем преумножать сущности). Маруся - тёплое ламповое имя для кошки. Буэ – франзуское.

var cat = function(cname) {
    return {
        // новое для каждого клона
        name: cname || 'Маруся',
        // новая для каждого клона 
        identify: function() {  
            console.log('Я – ' + this.name); }
    };
}

var octocat = new cat('Буэ');
octocat.identify();
> 'Я – Буэ'

Чуть более правильный вариант

var catProto = {
        name: 'Маруся', // одно на всех
        identify: function() { // одна на всех
            console.log('Я – ' + this.name); }
    };

var cat = function(cname) { this.name = cname; };
cat.prototype = catProto;

// "Создать по прототипу"
var octocat = new cat('Буэ');
octocat.identify();
> 'Я – Буэ'

Если мы всё же решили наследовать осьмикошек. Псевдоклассическое наследование. Присвоение prototype.constructor не влияет на instanceof, это заблуждение. Это исправление затёртого в предыдущей строке свойства constructor, Свойство constructor копируется между всеми экземплярами, созданными от данной функции.

function cat(name) { // у каждого
    this.name = name || 'Маруся'; // новое у каждого
    this.kittens = [];
}
cat.prototype = { // статика
    react: function(who) { // общая для клонов ф-ция
           console.log(this.name + 
                       ' реагирует на ' + who); }
};

function octocat() {} 
octocat.prototype = new cat(); // клонируем...
octocat.prototype.constructor = octocat;// можно без

// ...и изменяем
octocat.prototype.name = 'Буэ'; // общее свойство
octocat.prototype.tentacles = 6;

var superoctocat = new octocat(); // клонируем...
superoctocat.tentacles = 8; // ...и изменяем
superoctocat instanceof cat;
> true
superoctocat.name // всех клонов зовут "Буэ"
> 'Буэ'

function cat(name) { // у каждого
    this.name = name || 'Маруся'; // новое у каждого
    this.kittens = [];
}
cat.prototype = { // статика
    react: function(who) { // общая для клонов ф-ция
           console.log(this.name + 
                       ' реагирует на ' + who); }
};

function octocat() {} 
octocat.prototype = new cat(); // клонируем...
octocat.prototype.constructor = octocat;

var boo = new octocat();
boo.kittens
> []
var woo = new octocat();
woo.kittens.push('Гоша');
woo.kittens
> ["Гоша"]
boo.kittens
> ["Гоша"] // Oooopps!!! 

Передаём имя через конструкторы. Совсем правильный вариант.

function cat(name) { // у каждого
    this.name = name || 'Маруся'; // новое у каждого
    this.kittens = []; // новый массив у кажд. клона
}
cat.prototype = { // статика
    react: function(who) { // общая для клонов ф-ция
           console.log(this.name + 
                       ' reacts on ' + who); }
};

function octocat(name) { // функция создания клона
    cat.call(this,name || 'Буэ'); // <---- !!! ВАЖНО
    this.tentacles = 6; // новое св-во у каждого
}
octocat.prototype = new cat('Буэ'); // клон-шаблон
octocat.prototype.global = ...; // общая

var superoctocat = new octocat('Чак');
superoctocat.tentacles = 8;
superoctocat instanceof cat;
> true
superoctocat.name
> 'Чак'

var superoctocat = new octocat('Чак');

• Создаётся полностью пустой объект
• Его прототипом становится экземпляр cat, общий для всех экземпляров octocat
• Этот экземпляр расширен другими свойствами, поэтому они тоже переносятся в прототип
• Вызывается конструктор octocat() ()
• Получившийся объект возвращается и передаётся в superoctocat

Для работы с клонированием нужны:

• Любая функция, которая конструирует / инициализирует клон: клонировщик
• Прототип (клонируемое): любой объект, описывающий методы и свойства, которые должны содержатся в каждом новом клоне (могут наполняться позже).
• Это один, общий для всех сконструированных экземпляров (и функции), объект
• Свойство prototype у функции – именно этот объект
• Вызови new с этой функцией и получи клон

Программисты очень не хотят использовать имя родительского класса и заводят свои обёртки

Сложности начинаются, когда оказывается нужен super:

octocat.prototype.react=function(who){ 
    cat.prototype.react.call(this, who); 
                               // вспомните self
    console.log('Перехвачено в octocat');
}

Но super не имеет смысла, если мы клонируем

Кто такой super?

Не надо преумножать сущности

Пример из Python

class SomeClass:

    def method(self, param1, param2):
        . . .

(обратите внимание на self)

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

public interface CanMeow { // МожетМяукать
    void meow(); // мяукнуть
}   

public interface IsCat extends CanMeow { 
                            // ЯвляетсяКошкой
    void pullTail(); // дёрнутьХвост
}

public void pullTail(IsCat cat) { ... }
public void doMeow(CanMeow meowable) { ... }

Осьмикошка может мяукать, но у неё нет хвоста!

Можно даже не проверять тип: при вызове выбросится исключение. Кстати, хотел использовать собоутку для утиной типизации, но забыл

JavaScript

function doMeow(mayBeCanMeow) { // можетУмеетМяукать
    if (!mayBeCanMeow.meow) { 
        // mayBeCanMeow.meow !== undefined
        throw new Error('Не умеет мяукать :(');
    }
    mayBeCanMeow.meow();
}

doMeow({}); // Не умеет мяукать!
doMeow(petya); // Не умеет мяукать!
doMeow({'meow': function() 
                { console.log('Мяу!'); } }); // Мяу!
doMeow(octocat); // Мяу!
doMeow(elephantWhoCanMeow); 
                 // слонУмеющийМяукать: Мяу!

Без методов

function pullTail(possiblyCat) { // можетКошка
    if (!possiblyCat.tail) { 
        // possiblyCat.tail !== undefined
        throw new Error('Нет хвоста :(');
    }
    console.log((possiblyCat.name 
                 ? withTail.name 
                 : 'Неизвестный') +
                ' кричит «Ай!»');
}

pullTail({}); // Нет хвоста!
pullTail(petya); // Нет хвоста!
pullTail(musya); // Муся кричит «Ай!»
pullTail(elephant); // Слонишка кричит «Ай!»
pullTail({'tail': 1 }); // Неизвестный кричит «Ай!»
pullTail(octocat); // Нет хвоста!

Легко создать новый объект

На практике:

var myChain = { head: null };
var divOne = { type: 'div', 'next': null };
var divTwo = { type: 'table', 'next': null };
divOne.next = divTwo;
myChain.head = divOne;

function walk(chain, func) {
    var cursor = chain.head;
    while (cursor != null) {
        func(cursor);
        cursor = cursor.next;
    }
}

walk(myChain, function(elm) 
> 'div'               { console.log(elm.type) } );
> 'table'

Легко создать новый объект

На практике:

var divOne = { type: 'div', 'next': null };
var divTwo = { type: 'table', 'next': null };
divOne.next = divTwo;

function walk(chain, func) {
    var cursor = chain.head;
    while (cursor != null) {
        func(cursor);
        cursor = cursor.next;
    }
}

function init_chain(head) {
    return { 'head': head };
}

walk(init_chain(divOne), function(elm) 
> 'div'                  { console.log(elm.type) } );
> 'table'    

Кратко!

По названиям параметров не всегда понятно, что от них ожидается

Всегда документируйте функции!

(помечайте описанные где-либо в документации типы или ожидания)

Про монады рассказывать не буду

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

Один файл - один внешний объект

Один внешний объект - один модуль

Один модуль - одно пространство имён

maths.js:

var privateFunc = function(...) { ... };
exports.state = { '...': ...,
                  '...': ... }; 

exports.add = function(...) { ... };
exports.mul = function(...) { ... };
exports.sqrt = function(...) { ... };
exports.max = function(...) { ... };

my.js:

var maths = require('maths');
var res = maths.add(...);

external.js:

var state = require('maths').state;

нет require, не асинхронный путь

Эмуляция в браузере:

var maths = {};
. . .
maths.add = function(...) {...};
maths.mul = function(...) {...};

if (typeof module === "object") {
    module.exports = maths;
} else if (typeof window === "object") {
    window.maths = maths;
} else {
    throw new Error('Не могу найти библиотеку maths ' +
                    '(объекты "module" или "window"' +
                    'не найдены).');
}

"Паттерн" из CommonJS, используется в node.js

Если много модулей – используйте Require.js

Пространства имён

var namespace = namespace || {};

(function( o ){  
    o.foo = "foo";  
    o.bar = function(){  
        return "bar";  
    };

    var private = function() { ... };
})(namespace);  
console.log(namespace); 

Ещё один способ клонирования: смешивание

Добавляет свойства кнопки к любому объекту

Кнопка:

var asButton = function() {
  this.hover = function(bool) {
    bool ? this.classes.push('hover') 
         : this.classes.remove('hover');
  };
  this.press = function(bool) {
    bool ? this.classes.push('pressed') 
         : this.classes.remove('pressed');
  };
  this.fire = function() {
    return this.action();
  };
  return this;
};

Добавляет свойства овала к любому объекту

Овал:

var asOval = function(options) {
  this.area = function() { 
    return Math.PI * this.longRadius 
                   * this.shortRadius;
  };
  this.ratio = function() {
    return this.longRadius/this.shortRadius;
  };
  this.grow = function() {
    this.shortRadius += (options.growBy/this.ratio());
    this.longRadius += options.growBy;
  };
  this.shrink = function() {
    this.shortRadius -= (options.shrinkBy/this.ratio());
    this.longRadius -= options.shrinkBy;
  };
  return this;
}

Овальная кнопка:

var OvalButton = function(longRadius, shortRadius, 
                          label, action) {
  this.longRadius = longRadius;
  this.shortRadius = shortRadius;
  this.label = label;
  this.action = action;
};

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

Смешиваем:

asButton.call(OvalButton.prototype);
asOval.call(OvalButton.prototype, 
            {growBy: 2, shrinkBy: 2});

var myButton = new OvalButton(3, 2, 
       'Нажми!', function() {alert('Он нажал!')});
myButton.area(); //18.84955592153876
myButton.grow();
myButton.area(); //52.35987755982988
myButton.fire(); //'Он нажал!'

http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/

Проще не значит путаннее

(Если вы пишете документацию к функциям)

// (other:Number[, yet_another:Number]) → Number
// Returns the sum of the object's value with 
//                              the given Number
function add(other, yet_another) {
    return this.value + other + (yet_another || 0)
}

Не плодите сущности

(Библиотеки не стоят двух однострочных функций)

(ООП нужно вовсе не всегда)

позволяет не думать о непривычных вещах

CoffeeScript - OK

Dart - не попадёт!

Dart - не попадёт?