什麼是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/