Статьи

Два из моих любимых шаблонов дизайна Javascript

Декабрь 19, 2018

Содержание этой статьи было первоначально написано Дэвидом Морроу в блоге New Relic .

Итак, вы пишете JavaScript. Это в значительной степени дано для современных современных веб-приложений. К сожалению, JavaScript не всегда получает организацию, которой он заслуживает, и в конечном итоге превращается в процедурный беспорядок jQuery для готовых операторов.

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

Пространство имен Ваш код
Одной из худших и наиболее распространенных ошибок JavaScript является присвоение переменной глобальному пространству имен (также известному как «окно»), если вы используете JavaScript в браузере. Это может привести к конфликту функций между вами и другими разработчиками. И просто грязно. Лучший способ избежать этого — пространство имен, как показано в этом примере:

window.NR = window.NR || {};
window.NR.myFunction = function () {
  // your code...
};

И избегайте этого примера:

function myFunction () {   // your code... };

Использование строгого режима
Даже внутри функции пространства имен все еще может быть проблема. Вы можете случайно назначить переменные глобальному пространству имен. Чтобы предотвратить это, добавьте в префикс всех объявлений переменных var или this .

Кроме того, вы можете использовать строгий режим. Как следует из названия, строгий режим анализирует ваш JavaScript в гораздо более строгом формате. Например, если вы попытаетесь установить переменную, которая еще не определена, она выдаст ошибку, а не будет присвоена global / window.

Если вы хотите узнать больше о строгом режиме, прочтите эту статью в блоге Джона Резига.

Lint your JavaScript
JSLint сравнивает ваш JavaScript с предложениями по кодированию Дугласа Крокфорда. Существуют плагины для большинства популярных редакторов для оценки кода, включая Sublime Text 2 , Textmate и Vim .

Основными преимуществами использования JSLint являются:

* Ваш код проверяется на наличие ошибок перед запуском, экономя ваше время и усилия по отладке.
* Совместное использование помеченного кода в команде унифицирует стили кодирования, делая код более читабельным и последовательным.

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

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

В качестве примера, вот мои стандартные комментарии к настройке конфигурации JSLint:

/*global NR:true, jQuery:true, Backbone:true, $:true*/
/*jslint browser: true, white: true, vars: true, devel: true, bitwise: true, debug: true, nomen: true, sloppy: false, indent: 2*/

Глобальные объявления сообщают JSLint, какие переменные следует ожидать в глобальном пространстве имен — JQuery, Backbone и т. Д. Если он встретит другое, он выдаст сообщение об ошибке. Параметры JSLint определяют, какие правила выбираются или исключаются. Смотрите полный список правил на сайте JSLint .

ХОРОШО! Теперь это не так, давайте посмотрим на пару шаблонов JavaScript, которые я обычно использую.

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

Есть много преимуществ и недостатков использования шаблона модуля:

Плюсы:

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

Минусы:

* Вы можете иметь только один. Не делайте десять из них для каждого типа предмета в DOM или подобной ситуации.
* У вас нет функции конструктора, поэтому она не будет запускаться автоматически, как с экземпляром.
* Если вам нужна инициализация модуля, вам нужно вызвать его вручную при первом использовании.

Вот пример модуля:

(function () {
  "use strict";
  window.NR = window.NR || {};
  window.NR.myModule = {
    myVariable: "foo",
 
    initialize: function () {
      // your initialization code here
    },
 
    anotherMethod: function () {
      this.myVariable = "foobar";
    }
  };
}());

И вот как это можно использовать:

NR.myModule.initialize();
NR.myModule.anotherMethod();
console.log(NR.myModule.myVariable);
// outputs
// "foobar"

Классы
Некоторые люди утверждают, что вы никогда не должны использовать «новый» при работе с JavaScript, так как в языке нет настоящих классов . Тем не менее, я нахожу эту модель чрезвычайно полезной по ряду причин, описанных ниже. Кроме того, многие популярные платформы, такие как Backbone, используют шаблоны создания / расширения классов. Соглашения об именах для классов — CamelCase с заглавной первой буквой.

Некоторые из преимуществ этого шаблона:

* Это здорово, когда у вас много предметов, и каждому нужно свое состояние.
* Это знакомый шаблон ООП / рабочий процесс для многих разработчиков.
* У него есть функция конструктора, которая сразу запускается при создании экземпляра.

Но недостатки:

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

Вот пример класса:

window.NR = window.NR || {};
window.NR.MyClass = (function () {
  "use strict";
 
  function MyClass(val) {
    this.instanceVar = MyClass.staticVar + val;
  }
 
  MyClass.staticVar = "prefix-";
  var instanceVar = "";
 
  MyClass.prototype.exampleFunction = function () {
    alert('i am an additional function');
  };
 
  return MyClass;
}());

window.NR = window.NR || {};
window.NR.MyClass = (function () {
  "use strict";
 
  function MyClass(val) {
    this.instanceVar = MyClass.staticVar + val;
  }
 
  MyClass.staticVar = "prefix-";
  var instanceVar = "";
 
  MyClass.prototype.exampleFunction = function () {
    alert('i am an additional function');
  };
 
  return MyClass;
}());

И как это можно использовать:

var instance1 = new NR.MyClass('class 1');
console.log(instance1.instanceVar);
 
NR.MyClass.staticVar = 'PREFIX-';
 
var instance2 = new NR.MyClass('class 2');
console.log(instance2.instanceVar);
 
// Outputs
// "prefix-class 1"
// "PREFIX-class 2"

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

 

 

 

 

34
Share: