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

Question

_{作为前言，是的我知道JSLint是比规则更多的一套准则。}

虽然使用JSLint来清理我继承的一些代码，但有一些地方在字符串中使用了一些URL。它们对于脚本是必需的，但比标准的50个字符行长度更长。

我一直在简单地通过那些特定的行，因为它们不是问题;然而，它让我对在JS代码中处理长字符串文字的最佳方式感到好奇。

对于标记字符串是有意义的使用字符串连接：

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

不过，我不认为它使网址意义：

'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

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

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

/*jslint maxlen: 130 */ 

但我想你已经知道设置了。

我想你可以使用一些JavaScript代码的Minifiers来有效地使用你的JavaScript（如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"); 

，所有的字符串常量会被连接在一起。所以你可以用大的字符串常量来格式化代码，这样的代码可以更好地读取。缩小器将为您完成剩下的工作。

在长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代码时尝试遵循的规则。

Answer 2

您可以使用类似

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

但这并不显得过于可读。在一般情况下，某些编码指南明确删除对URL的字符串的长度的限制（它与Java的import报表相同的 - 那些可以任意长）

Answer 3

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

因此，第一次尝试在JS文件的顶部添加'/ * jslint maxlen：130 * /'选项将解决该问题，通过仅检查该文件省略“线太长”。但是对于同一个文件中的其他行，那么太长，但应该更短，从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/