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

в качестве предисловия, да я знаю, что 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/...'

EDIT

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

//i.e. this made up string of me bashing on my keyboard
'0aidf9ejvr0e9vjkilkj34ioijs90eu8f9948joljse890f90jiljoi4'
3 9
javascript string jslint string-literals

3 ответа:

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

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

/*jslint maxlen: 130 */
Но я думаю, что вы уже знаете обстановку.

Я полагаю, что вы можете использовать некоторые Минификаторы кода JavaScript для продуктивного использования ваших JavaScripts (например, Closure Compiler, 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");

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

В случае длинных 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

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

[
    "http://example.com",
    "foo",
    "bar",
    "baz",
    ...
    "lastSegment"
].join("/");
Но это выглядит не слишком читабельно. В общем, некоторые рекомендации по кодированию явно снимают ограничение на длину строки для URL-адресов (это то же самое с инструкциями Java import - они могут быть сколь угодно длинными.)
5

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

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

Поскольку большинство случаев, когда мы хотим сохранить строку такой, какая она есть, независимо от длины, связаны со строковыми представлениями, такими как URL, хэши, SHAs и т. д., Использование заполнителя может быть хорошим подходом. В основном идея состоит в том, чтобы создать файл 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

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

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

1