Статьи

Мой любимый шаблон дизайна JavaScript

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

Позвольте мне показать вам обзор, а затем посмотреть, как все это получается:

function MyScript(){} (function() { var THIS = this; function defined(x) { return typeof x != 'undefined'; } this.ready = false; this.init = function( { this.ready = true; }; this.doSomething = function() { }; var options = { x : 123, y : 'abc' }; this.define = function(key, value) { if(defined(options[key])) { options[key] = value; } }; }).apply(MyScript); 

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

 (function() { ... })(); 

Функциональный литерал — это, по сути, самоисполняемая область, эквивалентная определению именованной функции и последующему ее вызову

 function doSomething() { ... } doSomething(); 

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

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

Таким образом, объединяя эти два элемента вместе — создание именованной функции, затем выполнение литерала функции в области именованной функции — мы получаем одноразовый объект, который может сформировать основу любого сценария при моделировании вид наследования, который находится в объектно-ориентированном классе.

Красота внутри

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

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

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

 var THIS = this; 

Мы создали закрытую переменную с именем THIS которая указывает на область действия функции и может использоваться в частных функциях для ссылки на нее — точно такой же трюк, как при переходе к "self = this" для создания ссылки для внутренних областей.

Другие частные переменные, объявленные таким же образом, могут использовать соглашение в верхнем регистре, если они определяют постоянные данные (однако следует избегать объявления с использованием const вместо var , поскольку оно не поддерживается).

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

 function defined(x) { return typeof x != 'undefined'; } 

Затем мы можем создать открытые методы и свойства , доступные для других экземпляров и извне:

 this.ready = false; this.init = function() { this.ready = true; }; this.doSomething = function() { }; 

Мы также можем создавать привилегированные значения, которые являются частными, но общедоступными, в этом случае с помощью метода public define ; его аргументы могут быть дополнительно проверены в соответствии с потребностями данных:

 var options = { x : 123, y : 'abc' }; this.define = function(key, value) { if(defined(options[key])) { options[key] = value; } }; 

Завернутый!

Все эти особенности делают конструкцию такой полезной для меня. И все это заключено в аккуратный, самовыполняющийся синглтон — одноразовый объект, который легко ссылаться и интегрировать, и который прост в использовании!

Так что ты думаешь? Вам знаком этот паттерн или у вас есть что-то еще, что вы хотели бы использовать?

Миниатюра кредит: суперкимбо

примечание: хотите больше?

Если вы хотите узнать больше от Джеймса, подпишитесь на нашу еженедельную техническую новостную рассылку Tech Times .