Пара слов о программировании

оригинал

Начало перевода

Открытый модуль

Основываясь на опыте использования паттерна «модуль», Christian сделал то что он назвал «открытый модуль» (Revealing Module). Как следует из названия он похож на паттерн «модуль», но чуть более структурирован и понятен, особенно когда речь идет о совместной разработке.
Во-первых, он так же основан на функции, которая определяется и сразу выполняется:

        var anchorChange4 = function () {}();

После этого определим все свойства и методы, не разделяя их на публичные и защищенные:

        // это private свойство
        var config = {
        colors: [ "#F63", "#CC0", "#CFF" ]
        }
        // это public метод
        var init = function () {
        var self = this;
        var anchors = document.getElementsByTagName("a");
        var size = anchors.length;

Теперь самое интересное. Выше, в описании паттерна «модуль», я уверен, вы заметили, что он возвращает объект со всеми публичными свойствами и методами. В Открытом модуле вы возвращаете только ссылки на те свойства и методы, которые хотите показать.

        return {
        // declare which properties and methods are supposed to be public
        init: init,
        changeColor: changeColor
        }

Только два метода должны быть публичными init (который делает все подготовительную работу) и changeColor (который вызываем, когда щелкаем по ссылке). Глядя на код сразу видно какие свойства и методы общедоступны. Окончательный код выглядит следующим образом:

        // revealing module pattern
        var anchorChange4 = function () {
        // this will be a private property
        var config = {
        colors: [ "#F63", "#CC0", "#CFF" ]
        }
        // this will be a public method
        var init = function () {
        var self = this; // assign reference to current object to "self"
      // get all links on the page
       var anchors = document.getElementsByTagName("a");
       var size = anchors.length;
       for (var i =0; i < size; i++) {
       anchors[i].color = config.colors[i];
       anchors[i].onclick = function () {
       self.changeColor(this, this.color); // this is bound to the anchor object
       return false;
       };
       }
       }
       // this will be a public method
       var changeColor = function (linkObj, newColor) {
       linkObj.style.backgroundColor = newColor;
       }
       return {
       // declare which properties and methods are supposed to be public
       init: init,
       changeColor: changeColor
       }
       }();

Как и в других паттернах, надо вызвать соответсвующую функцию в блоке script:

        <script type="text/javascript">
        anchorChange4.init();
        </script>

И снова пример для этого паттерна.

Объект

Создание нового объекта класса (его экземпляра) существует во всех объектно-ориентированных языках. Но Javascript скорее объекто-прототипированный, а не объектно-ориентированный язык. В Javascript вам надо вызвать конструктор вашего объекта с соотвествующими параметрами для создания объекта. В нем нет классов и подклассов, как в Java.
Во-первых, необходимо написать конструктор вашего объекта:

        var anchorChanger = function () {};

Мы оставили контруктор пустым (и это видно), но позже добавим вызов метода init этого объекта.
Используя прототип, мы можем добавить дополнительные свойства в объект, для того чтобы они сразу были доступны в нем. Я добавил 3 свойства: config, changeColor и init:

        anchorChanger.prototype.config = {
        colors: [ "#F63", "#CC0", "#CFF" ]
        }
        anchorChanger.prototype.changeColor = function (linkObj, newColor) {
        linkObj.style.backgroundColor = newColor;
        };
        anchorChanger.prototype.init = function () {
        var self = this;
        var anchors = document.getElementsByTagName("a");
       var size = anchors.length;
       for (var i =0; i < size; i++) {
       anchors[i].color = self.config.colors[i];
       anchors[i].onclick = function () {
       self.changeColor(this, this.color);
       return false;
       };
       }
       };

Как отмечает Mike West, использование прототипа более эффективно, чем добавление этих свойств «на лету» при каждом создании объекта. Окончательный объект выглядит следующим образом:

        // конструктор объекта
        var anchorChanger = function () {
        this.init();
        };
        anchorChanger.prototype.config = {
        colors: [ "#F63", "#CC0", "#CFF" ]
        }
        anchorChanger.prototype.changeColor = function (linkObj, newColor) {
        linkObj.style.backgroundColor = newColor;
       };
       anchorChanger.prototype.init = function () {
       var self = this;
       var anchors = document.getElementsByTagName("a");
       var size = anchors.length;
       for (var i =0; i < size; i++) {
       anchors[i].color = self.config.colors[i];
       anchors[i].onclick = function () {
       self.changeColor(this, this.color);
       return false;
       };
       }
       };

В документе надо создать новый экземпляр anchorChange:

        <script type="text/javascript">
        new anchorChanger();
        </script>

Пример тут.

Определение ленивых функций

Peter Michaux предложил паттерн, который он назвал ленивые функции. Этот паттерн обычно используется когда вам надо сделать вычисления только один раз, а потом использовать результаты многократно. Используя этот паттерн, вы можете быть уверены, что то что нужно сделать однократно, будет сделано однократно. В качестве примера Peter приводит объединеную для разных браузеров функцию прокрутки. В зависимости от браузера, функция прокрутки создается при первом ее выполнении.
В моем случае этот паттерн не дает каких-то реальных преимуществ, так как нет каких-либо объемных или сложных вычислений. Но как это работает в целом? В начале надо объявить вашу основную функцию:

        var anchorChange5 = function () {};

Теперь добавляем свойства, как и в предыдущих паттернах:

        var config = {
        colors: [ "#F63", "#CC0", "#CFF" ]
        };
        var anchors = document.getElementsByTagName("a");
        var size = anchors.length;
        for (var i =0; i < size; i++) {
        anchors[i].color = config.colors[i];
        anchors[i].onclick = function () {
        anchorChange5().changeColor(this, this.color);
      return false;
       };
       }

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

        // переопределение функции для хранения исключительно changeColor
        anchorChange5 = function () {
        return {
        changeColor: function (linkObj, newColor) {
        linkObj.style.backgroundColor = newColor;
        }
        };
        };

Окончательный код с ленивым определением функции выглядит следующим образом:

        var anchorChange5 = function () {
        var config = {
        colors: [ "#F63", "#CC0", "#CFF" ]
        };
        var anchors = document.getElementsByTagName("a");
        var size = anchors.length;
        for (var i =0; i < size; i++) {
        anchors[i].color = config.colors[i];
        anchors[i].onclick = function () {
       anchorChange5().changeColor(this, this.color);
       return false;
       };
       }
       anchorChange5 = function () {
       return {
       changeColor: function (linkObj, newColor) {
       linkObj.style.backgroundColor = newColor;
       }
       };
       };
       };

Что при этом происходит:

1. anchorChange5 при вызове устанавливает переменную config и собирает все ссылки на странице;
2. Назначается событие onclick для ссылок, на которое будет вызываться метод changeColor в переопределенной функции anchorChange5
3. В конце концов anchorChange5 переопределяется и теперь хранит только метод changeColor, который общедоступен.

И опять вызываем функцию в документе:

        <script type="text/javascript">
        anchorChange5();
        </script>

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

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