Какие примеры реализации шаблонов проектирования с использованием JavaScript?

Я программист средней квалификации, использующий JavaScript, но я не гуру. Я знаю, что с этим можно сделать довольно мощные вещи, я просто не видел ничего, кроме довольно простых манипуляций с DOM. Мне интересно, могли бы люди привести примеры традиционных концепций шаблонов проектирования, таких как Factory Method, Singleton и т. Д. С использованием JavaScript. В каких случаях эти шаблоны будут использоваться в Интернете?

10 ОТВЕТОВ
РЕШЕНИЕ

Я просто хотел добавить свой любимый шаблон JavaScript, который я узнал из Pro JavaScript Design Patterns, который Джонатан Раух уже рекомендовал.

Это шаблон синглтона пространства имен. По сути, вы создаете пространства имен с помощью синглетонов, которые позволяют скрыть методы и переменные от внешнего использования. Скрытые / открытые методы на самом деле скрыты, потому что они определены внутри замыкания.

var com = window.com || {};
com.mynamespace = com.mynamespace || {};
com.mynamespace.newpackage = (function() {
    var myPrivateVariable = "hidden";
    var myPublicVariable = "exposed";

    function myPrivateMethod() {
        return "also hidden";
    }

    function myPublicMethod() {
        return "also exposed";
    }

    return {
        myPublicMethod: myPublicMethod,
        myPublicVariable: myPublicVariable
    };
})();
8
23.08.2008 23:20:41
Должно ли это быть com.mynamespace.newpackage = (function () { ... }())? Просто любопытно, потому что JSLint жалуется. :)
Brian M. Hunt 2.06.2010 16:12:29
@ Брайан М. Хант: Я всегда видел это так, как написал, но, похоже, ваш подход работает в Chrome и Firefox, хотя не знаю, что такое IE и другие. Независимо от этого, необходимо использовать несколько паренов, в противном случае парни, применяющие эту функцию, сообщаются как синтаксические ошибки.
Mike Stone 3.06.2010 21:59:33
@ Брайан Это действительно зависит от стиля, вы можете сделать это в любом случае.
nyuszika7h 10.03.2011 21:44:56

Я подозреваю, что они могут - вот пример Синглтона:

Шаблон синглтон дизайна в JavaScript

0
23.08.2008 22:02:32
Ссылка в ответе мертва.
Pang 28.04.2017 00:29:12
jamting 28.04.2017 20:33:03

@jamting:

Шаблон синглтон дизайна в JavaScript

О Боже. У меня нет слов.

К ОП: да, конечно, вы можете в некотором смысле, но некоторые шаблоны, к которым вы привыкли, не так заметны, как в Java. Например, синглтон будет просто объектом:

var singleton = {
    sayHello: function() {
       alert("Hello!")
    }
};

В Википедии есть пример Фабрики в JS.

3
29.04.2017 06:39:11

Конечно, они могут. Вот книга на эту тему:
Шаблоны проектирования Pro JavaScript
Вот пример шаблона Factory :
Шаблон Factory в Javascript

0
23.08.2008 22:30:07

Николай коснулся этого, но шаблоны проектирования не согласуются между языками, которые имеют существенные различия. Я уже читал (и согласен с), что шаблон дизайна часто является признаком отсутствия функций в языке.

В качестве идеального примера, шаблон «Фабрика» совершенно не нужен в некоторых языках, Ruby в качестве примера, о котором я думаю (потому что построение объекта - это просто метод в экземпляре Class):

# create a factory for MyObject
my_factory = MyObject
instance_1 = my_factory.new

# change the factory to another class
my_factory = MyOtherObject
instance_2 = my_factory.new

Всякий раз, когда вы применяете шаблон проектирования к языку, отличному от того, для которого он был изначально разработан, обязательно подумайте, действительно ли он ДЕЙСТВИТЕЛЬНО необходим, и каким образом вы сможете улучшить его с помощью новых доступных языковых функций. Шаблоны проектирования - это всего лишь руководство, вы всегда должны учитывать, действительно ли вам предназначается использование шаблона, или же он может быть лучше принят в вашем случае.

7
23.08.2008 23:11:12

Недавно я использовал урок «Лучшая анимация» Берни, который широко использует шаблон проектирования стратегии . Берни отлично описывает, почему следует использовать шаблон стратегии, но, к сожалению, не объясняет, как именно работает код. Опять же, при использовании ссылки на шаблоны проектирования, посмотрите на код и комментарии в animator.js для хорошего примера использования шаблона стратегии.

Пример:

// This object controls the progress of the animation 
ex1 = new Animator();
// The Animator's subjects define its behaviour 
ex1.addSubject(updateButton);
function updateButton(value) {
    $('ex1Button').innerHTML = "Progress: " + Math.round(value * 100) + "%";
}

// now click below: each click to the button calls ex1.toggle()
2
24.08.2008 00:59:59

Я хотел бы добавить сюда то, что я изучал в группе с обсуждением шаблонов проектирования как в C #, так и в JavaScript. Во время встречи мне нравится то, что парень на C # пишет коды на JavaScript, и то же самое на JavaScript. После того, как я покидаю собрание, я пытаюсь узнать больше дома и вести блог здесь http://tech.wowkhmer.com/category/Design-Patterns.aspx для C # и JavaScript.

0
27.11.2008 02:58:40
Ссылка в ответе мертва.
Pang 27.04.2017 06:58:27

Послушайте, как Джастин Диаз говорит о шаблонах проектирования для Javascript. Доклад также основан на его книге Pro Javascript Techniques, упомянутой выше. Разговор около 45 минут в Google I / O

0
27.04.2010 04:02:17

Как эта практика называется в JavaScript?

Это шаблон проектирования самовывозов. Я никогда не видел это, пока я не начал Javascripting.

1
23.05.2017 12:17:56

Есть хорошая бесплатная онлайн-книга Эдди Османи, представляющая шаблоны проектирования Javascript: Основные шаблоны проектирования JavaScript для начинающих, том 1

3
4.01.2012 22:20:14
Он также ссылается здесь в своей книге.
inetphantom 24.06.2016 07:20:39