Что такое одобренный JSLint способ создания длинной строки? - PullRequest
Новая
       73

Что такое одобренный JSLint способ создания длинной строки?

9 голосов
/ 05 марта 2012

В качестве предисловия да Я знаю, что JSLint - это скорее набор рекомендаций, чем правил.

При использовании JSLint для очистки некоторого кодачто я унаследовал, есть ряд мест, где некоторые URL-адреса используются в строках.Они необходимы для сценария, но длиннее, чем стандартная длина строки в 50 символов.

Я просто проходил мимо этих конкретных строк, так как они не проблема;однако мне стало интересно, как лучше всего обрабатывать длинные строковые литералы в коде JS.

Для строк разметки имеет смысл использовать конкатенацию строк: 

'<div>' +
  '<h1>Foo</h1>' +
  '<p>Lorem ipsum</p>' +
'</div>'

Однако я неНе думаю, что это имеет смысл для URL: 

'http://example.com/foo/bar/baz/fizz/buzz/lorem/ipsum/etc/...'

РЕДАКТИРОВАТЬ

Это также не имеет смысла для определенных значений хеша (например, используемых для ключа API): 

//i.e. this made up string of me bashing on my keyboard
'0aidf9ejvr0e9vjkilkj34ioijs90eu8f9948joljse890f90jiljoi4'

Ответы [ 3 ]

5 голосов
/ 06 марта 2012

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

Прежде всего, вы можете использовать опцию maxlen в JSlint, чтобы изменить длину строки по умолчанию на любое значение, которое вам нравится.Например, 

/*jslint maxlen: 130 */

Но я думаю, что вы уже знаете настройку.

Я полагаю, что вы можете использовать некоторые Минифайеры кода JavaScript для продуктивного использования ваших скриптов JavaScript (например, ClosureКомпилятор , Microsoft Ajax Minifier или какой-либо другой).Как вы можете легко проверить на странице код 

// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name default.js
// ==/ClosureCompiler==

// ADD YOUR CODE HERE
function hello(name) {
    var test = '<div>' +
                   '<h1>Foo</h1>' +
                   '<p>Lorem ipsum</p>' +
               '</div>';
    return test + name;
}
hello('New user');

будет уменьшен до 

function hello(a){return"<div><h1>Foo</h1><p>Lorem ipsum</p></div>"+a}hello("New user");

и все строковые константы будут объединены.Таким образом, вы можете форматировать код в основном с помощью длинных строковых констант, чтобы код можно было лучше прочитать .Миниатор сделает всю остальную работу за вас.

В случае длинных URL вы можете разбивать длинные строки в любом месте, которое вы считаете наилучшим с логической точки зрения (я думаю, что оно всегда будет включенонекоторые '/' символов).В большинстве практических случаев у вас есть baseURL, которые будут добавлены.Таким образом, вы можете определить общие настройки проекта где-нибудь в начале вашего файла или в отдельном файле JavaScript 

var baseLoremUrl = 'http://example.com/foo/bar/baz/fizz/buzz/lorem/';

и использовать его позже как 

'<a href="' + baseLoremUrl + 'ipsum/etc/' + '">Click me!</a>'

Если у вас есть параметры, которые должныдобавляется к URL-адресу, например 

'http://example.com/foo/bar/baz/fizz/buzz/lorem?x=123&y=ABC'

Я всегда использую 

baseLoremUrl + '?' + $.params({x: 123, y: 'ABC'})

, чтобы сделать код более читабельным с одной стороны и быть уверенным, что все параметры будут правильно закодированы с учетом encodeURIComponent , если это необходимо.

Все вышеизложенное - это правила, которым я стараюсь следовать во время написания своего кода JavaScript.

5 голосов
/ 05 марта 2012

Вы можете использовать что-то вроде 

[
    "http://example.com",
    "foo",
    "bar",
    "baz",
    ...
    "lastSegment"
].join("/");

но это не выглядит слишком читабельным. В целом, некоторые рекомендации по кодированию явно снимают ограничение на длину строки для URL-адресов (то же самое, что и у операторов Java import - они могут быть произвольно длинными.)

1 голос
/ 17 сентября 2013

Во-первых, я согласен с тем, что в этой ситуации нет «Единого решения», и, во-вторых, я думаю, что это вопрос дизайна, а не технических проблем.Это правда, что иногда имеет смысл разделить строки такого рода на несколько строк, как в случае представлений HTML-кода, но иногда это не так, как в примере с URL, строкой HASH / SHA или даже абзацами.

Таким образом, первая попытка добавить опцию '/ * jslint maxlen: 130 * /' поверх вашего файла JS решит проблему, пропустив 'Line Too Long', проверив только этот файл.Но как насчет других строк в том же файле, которые тоже слишком длинные, но должны быть короче, в основном это справедливо для jshint.

Поскольку в большинстве случаев мы хотим сохранить строку такой, как есть,независимо от длины, связаны со строковыми представлениями, такими как URL, HASH, SHA и т. д., использование заполнителя может быть хорошим подходом.По сути, идея состоит в том, чтобы создать файл JS для их хранения и сделать его доступным через глобальную переменную.Затем вы можете просто вызвать его из любого сценария на вашем сайте, например, как используется jQuery (просто помните, что вам нужно загрузить файл-заполнитель перед сценариями, которые его используют).Преимущество этого решения в том, что вам нужно избегать этой проверки maxlen только в одном файле (на самом деле мы устанавливаем для maxlen очень большое число).

my_placeholder.js 

/*jslint maxlen: 500 */
//Init the placeholder
MyFeature = MyFeature || {};

//Assign URL
MyFeature.productApiURL = ‘http://this.is.the.url.to/product/API/’;

//Assign a piece of TEXT
MyFeature.productTermsOfUseText = ‘This is a very long text about something that you want to explain regarding your product terms of use for example......;

//Assign an HTML fragment
MyFeature.successfulMessageHTML = ‘<div class=”message”><div class=”header”>Successfully           created</div><div class=”detail”>some text showing the detail...</div></div>’;

//Assign a Regex to perform some validation
MyFeature.validEmailRegex = new RegExp(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);

my_feature_related_file.js 

//doing random awesome things

$.ajax({
  url: MyFeature.productApiURL,
  success: function() {
    $(‘#message_container’).html(MyFeature.successfulMessageHTML);
  }
});

//more awesome code here

Наконец, еще одна хорошая вещь в этом подходе заключается в том, что мы усиливаем семантическое значение этих длинных строк.Любой может понять, что MyFeature.productApiURL представляет API-интерфейс продукта URL или что MyFeature.successfulMessageHTML - это HTML-код успешного сообщения «Моя функция».В основном мы объясняем, что это означает в терминах домена (Успешное сообщение, API продукта, Действительный адрес электронной почты ...) и в каком формате представлен (HTML, URL, REGEX ...).

источник: http://moredevideas.wordpress.com/2013/09/16/line-too-long-on-jslint-and-jshint/

...