Примеры практических шаблонов проектирования, ориентированных на объект javascript

Ответ 1

Ниже перечислены три популярных шаблона JavaScript. Они легко реализуемы из-за closures:

• Образец модуля - Пример (и сделанный популярным) Эрика Мираглии
• Memoization - пример Оливера Стила
• Currying - Пример Dustin Diaz

Вы также можете проверить:

• Шаблоны проектирования JavaScript по Ross Harmes и Дастин Диаз

Ниже приводится сообщение о вводе/выводе Google с 2008 года, представленное Диасом, где он обсуждает некоторые темы из своей книги:

• Google I/O 2008 - шаблоны проектирования в выразительном языке

Ответ 2

Наследование

Я использую обозначение для наследования, основанное на ExtJS 3, который, как мне кажется, работает довольно близко к подражанию классическому наследованию на Java. Он в основном работает следующим образом:

// Create an 'Animal' class by extending
// the 'Object' class with our magic method
var Animal = Object.extend(Object, {
    move : function() {alert('moving...');}
});

// Create a 'Dog' class that extends 'Animal'
var Dog = Object.extend(Animal, {
    bark : function() {alert('woof');}
});

// Instantiate Lassie
var lassie = new Dog();

// She can move and bark!
lassie.move();
lassie.bark();

Namespaces

Я также согласен с тем, что Эрик Мираглия придерживается пространств имен, поэтому приведенный выше код следует запускать в его собственном контексте вне объекта окна, это имеет решающее значение, если вы намерены использовать свой код как одну из многих параллельных фреймворков/библиотек, выполняющихся в браузера.

Это означает, что единственный путь к объекту окна - через собственный объект пространства имен/модулей:

// Create a namespace / module for your project
window.MyModule = {};

// Commence scope to prevent littering 
// the window object with unwanted variables
(function() {

    var Animal = window.MyModule.Animal = Object.extend(Object, {
         move: function() {alert('moving...');}
    });

    // .. more code

})();

Интерфейсы

Вы также можете использовать более продвинутые конструкции ООП, такие как интерфейсы, чтобы улучшить дизайн вашего приложения. Мой подход к этим заключается в том, чтобы улучшить Function.prototype, чтобы получить обозначение вдоль этих строк:

var Dog = Object.extend(Animal, {
     bark: function() {
         alert('woof');
     }
     // more methods ..
}).implement(Mammal, Carnivore);

Шаблоны OO

Что касается "Шаблонов" в смысле Java, я нашел применение для Singleton pattern (отлично подходит для кеширования) и шаблон наблюдателя для управляемых событиями функций, таких как назначение некоторых действий, когда пользователь нажимает кнопку.

Примером использования шаблона наблюдателя будет:

// Instantiate object
var lassie = new Animal('Lassie');

// Register listener
lassie.on('eat', function(food) {
   this.food += food;
});

// Feed lassie by triggering listener
$('#feeding-button').click(function() {
    var food = prompt('How many food units should we give lassie?');
    lassie.trigger('eat', [food]);
    alert('Lassie has already eaten ' + lassie.food + ' units');
});

И это всего лишь несколько трюков в моей сумке OO JS, надеюсь, что они вам полезны.

Я рекомендую, если вы намереваетесь спуститься по этой дороге, которую вы прочтете Douglas Crockfords Javascript: хорошие части. Его блестящая книга для этого.

Ответ 3

Я поклонник шаблона модуля. Это способ реализации расширяемых, независящих (в большинстве случаев) фреймворков.

Пример:

Структура Q определяется следующим образом:

var Q = {};

Чтобы добавить функцию:

Q.test = function(){};

Эти две строки кода используются вместе для формирования модулей. Идея модулей состоит в том, что все они расширяют базовую структуру, в данном случае Q, но не зависят друг от друга (если они разработаны правильно) и могут быть включены в любой порядок.

В модуле вы сначала создаете объект рамки, если он не существует (что является примером шаблона Singleton):

if (!Q)
    var Q = {};

Q.myFunction = function(){};

Таким образом, вы можете иметь несколько модулей (например, выше) в отдельных файлах и включать их в любом порядке. Любой из них создаст объект рамки, а затем расширит его. Никакое руководство не должно проверять, существует ли структура. Затем, чтобы проверить, существует ли модуль/функция в пользовательском коде:

if (Q.myFunction)
    Q.myFunction();
else
    // Use a different approach/method

Ответ 4

Синтаксический шаблон часто очень полезен для инкапсуляции и организации. Вы даже можете изменить доступность.

var myInstance = {
  method1: function () {
    // ...
  },
  method2: function () {
    // ...
  }
};

Самый чистый способ реализовать синглтон в javascript

Ответ 5

Мне очень нравится jquery шаблон цепочки методов, позволяющий вызывать несколько методов для одного объекта. Это позволяет легко выполнять несколько операций в одной строке кода.

Пример:

$('#nav').click(function() {
   $(this).css('color','#f00').fadeOut();
});

Ответ 6

Мне действительно нравится шаблон Decorator с плагинами jQuery. Вместо того, чтобы модифицировать плагины для удовлетворения ваших потребностей, напишите собственный плагин, который просто пересылает запросы и добавляет дополнительные параметры и функциональные возможности.

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

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

Ответ 7

Один из полезных шаблонов в мире javascript - это шаблон цепочки, который стал популярным в LINQ на первом месте, а также используется в jQuery.

этот шаблон позволяет нам называть разные методы класса цепочки.

основная структура этого шаблона будет выглядеть как

var Calaculator = function (init) {
    var result = 0;
    this.add = function (x) { result += (init + x); return this; };
    this.sub = function (x) { result += (init - x); return this; };
    this.mul = function (x) { result += (init * x); return this; };
    this.div = function (x) { result += (init / x); return this; };

    this.equals = function (callback) {
        callback(result);
    }

    return this;
};


new Calaculator(0)
    .add(10)
    .mul(2)
    .sub(5)
    .div(3)
    .equals(function (result) {
        console.log(result);
    });

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