長い文字列を作成するJSLintの承認方法は何ですか？

Question

_{序文として、はい私はJSLintがルールよりもガイドラインのほうが多いことを知っています。}

継承したコードを整理するためにJSLintを使用しているときに、いくつかのURLが文字列で使用される場所がいくつかあります。スクリプトには必要ですが、標準の50文字の行の長さよりも長くなります。

私はこれらの特定の行を単に渡していますが、それは問題ではないためです。しかし、JSコードで長い文字列リテラルを処理する最善の方法について私は興味がありました。私はそれがURLの理にかなっているとは思わないしかし

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

：それは文字列の連結を使用することは理にかなって、マークアップ文字列を

'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' 

Answer 1

あなたの質問には正解。長い文字列をJavaScriptで書く方法はたくさんありますが、それは主にあなたが選んだ味の問題です。私はここで私の視点をテーマに記述することができます。

まず、maxlen JSlintのオプションを使用して、デフォルトの行の長さを好きな値に変更することができます。たとえば、

/*jslint maxlen: 130 */ 

しかし、あなたはすでに設定を知っていると思います。

JavaScriptコードの一部を使用して、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/'; 

を提出し、あなたがURLに付加されなければならないパラメータを持っている場合は

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

として、後でそれを使用することができます

'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 * /'オプションを追加しようとすると、そのファイルだけをチェックして 'Line Too Long'を省略して問題を解決します。しかし、同じファイル上の他の行についてはどうでしょうか。長すぎますが、短くする必要があります。基本的には、jshintからの有効な懸案事項です。

長さにかかわらず、行をそのままにしたい場合のほとんどは、URL、HASH、SHAなどの文字列表現に関連しているため、プレースホルダを使用するとよいアプローチになる可能性があります。基本的には、JSファイルを作成してグローバル変数で利用できるようにすることです。次に、jQueryの使用方法（サイトテンプレートを使用するスクリプトの前にプレースホルダファイルをロードする必要があることを覚えておいてください）のように、サイト全体の任意のスクリプトから呼び出すことができます。この解決策の利点は、このmaxlenの検証を1つのファイルでのみ避ける必要があることです（実際には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が「My Feature」の正常なメッセージのHTMLコードであることを理解できます。基本的には、ドメイン（成功メッセージ、製品API、有効な電子メール...）の形式でどのような意味があり、どの形式で表現されているのかを説明しています（HTML、URL、REGEX ...）。

ソース：http://moredevideas.wordpress.com/2013/09/16/line-too-long-on-jslint-and-jshint/