Question

_{作为前言，是我知道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'

Answer 1

您可以使用类似

的内容

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

但这看起来不太可读。通常，某些编码指南明确地删除了URL的字符串长度限制（与Java的import语句相同 - 这些可以任意长。）

Answer 2

我认为您的问题只能只有一个正确答案。在JavaScript中编写长字符串的方法有很多，而且主要是你选择的品味问题。我可以在这里描述我对这个问题的观点。

首先，您可以使用JSlint的maxlen选项将默认行长度更改为您喜欢的任何值。例如

/*jslint maxlen: 130 */

但我认为你已经了解了这个设置。

我认为您可以使用JavaScript代码的一些Minifiers来有效地使用JavaScripts（例如Closure Compiler，Microsoft Ajax Minifier或其他）。如何轻松验证the page代码

// ==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");

并且所有字符串常量将被连接。因此，您可以使用长字符串常量来格式化代码，这样就可以更好地读取代码。缩小器将为您完成剩余的工作。

对于长网址，您可以在逻辑角度找到最合适的任何地方打破长字符串（我认为它总是在某个'/'字符上）。在大多数实际情况中，您将附加一些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代码时尝试遵循的规则。

Answer 3

首先，我同意这种情况没有“一个解决方案”，其次我认为这不仅仅是技术问题而是设计问题。确实有时将这些类型的字符串分成几行是有意义的，就像HTML代码表示一样，但有时它不像URL，HASH / SHA字符串甚至段落那样。< / p>

因此，首次尝试在JS文件的顶部添加'/ * jslint maxlen：130 * /'选项将解决问题，通过仅检查该文件省略'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代表URL产品API，或者MyFeature.successfulMessageHTML是“我的功能”成功消息的HTML代码。基本上我们正在解释它在域名（成功消息，产品API，有效电子邮件......）中的含义以及表示的格式（HTML，URL，REGEX ...）。

来源：http://moredevideas.wordpress.com/2013/09/16/line-too-long-on-jslint-and-jshint/

什么是JSLint批准的创建长字符串的方法？

3 个答案: