2012-03-05 5 views
9

एक प्रस्तावना के रूप में, हाँ मुझे पता है कि जेएसलिंट नियमों की तुलना में दिशानिर्देशों का एक सेट है।एक लंबी स्ट्रिंग बनाने के जेएसलिंट अनुमोदित तरीके क्या है?

जेएसलिंट का उपयोग करते हुए कुछ कोड को साफ करने के लिए, वहां कई जगहें हैं जहां कुछ यूआरएल तारों में उपयोग की जाती हैं। वे स्क्रिप्ट के लिए जरूरी हैं, लेकिन मानक 50 वर्ण रेखा-लंबाई से अधिक लंबे हैं।

मैं बस उन विशेष लाइनों से गुज़र रहा हूं, क्योंकि वे कोई समस्या नहीं हैं; हालांकि, यह जेएस कोड में लंबे स्ट्रिंग अक्षर को संभालने का सबसे अच्छा तरीका है के रूप में मुझे उत्सुक बना दिया।

मार्कअप तार के लिए यह स्ट्रिंग संयोजन का उपयोग करने के समझ में आता है:

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

हालांकि मुझे नहीं लगता कि यह यूआरएल के लिए समझ में आता है है:

'http://example.com/foo/bar/baz/fizz/buzz/lorem/ipsum/etc/...' 

संपादित

यह भी कुछ हैश मानों (जैसे एपीआई कुंजी के लिए उपयोग किया जाता है) के लिए समझ में नहीं आता है:

//i.e. this made up string of me bashing on my keyboard 
'0aidf9ejvr0e9vjkilkj34ioijs90eu8f9948joljse890f90jiljoi4' 
+0

'हालांकि मुझे नहीं लगता कि यह URLs' के लिए समझ में आता है और क्यों है कि है? –

+0

@ लाइटनेसरेसेसिन ऑर्बिट, क्योंकि एक स्ट्रिंग को कई लाइनों में विभाजित करने से यह अधिक पठनीय/सुरक्षित कोड 100% समय नहीं बनता है। – zzzzBov

+0

कुछ भी 100% समय नहीं करता है। सही परिदृश्य के लिए सही उपकरण का प्रयोग करें। –

उत्तर

5

मुझे लगता है कि आपके सवाल का नहीं हो सकता है कि केवल एक ही सही उत्तर। जावास्क्रिप्ट में लंबे तार लिखने के कई तरीके हैं और यह ज्यादातर स्वाद का विषय है जिसे आप चुनते हैं। मैं सिर्फ इस विषय पर मेरे दृष्टिकोण के बारे में बता सकता हूं।

सबसे पहले आप जेएसलिंट के maxlen विकल्प का उपयोग कर सकते हैं ताकि डिफ़ॉल्ट लाइन लंबाई किसी भी मूल्य को बदल सके। उदाहरण के लिए

/*jslint maxlen: 130 */ 

लेकिन मुझे लगता है कि आप पहले से ही सेटिंग जानते हैं।

मुझे लगता है कि आप अपने जावाScripts (जैसे 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"); 

को न्यूनतम किया जाएगा और सभी स्ट्रिंग स्थिरांक concatenated कर दिया जाएगा। तो आप लंबे स्ट्रिंग स्थिरांक वाले कोड को अधिकतर प्रारूपित कर सकते हैं, इसलिए कोड बेहतर पढ़ा जा सकता है। Minifier आपके लिए बाकी काम करेगा।

लंबे यूआरएल के मामले में आप किसी भी स्थान पर लंबे तारों को तोड़ सकते हैं जो आपको तार्किक दृष्टिकोण से सबसे अच्छा लगता है (मुझे लगता है कि यह हमेशा '/' चरित्र पर होगा)।अधिकांश व्यावहारिक मामलों में आपके पास baseURL है जो संलग्न किया जाएगा। तो आप अपनी फ़ाइल की शुरुआत में कहीं न कहीं आम परियोजना सेटिंग निर्धारित कर सकते हैं या अलग जावास्क्रिप्ट में

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 के संबंध में सही ढंग से एन्कोड किए जाएंगे, यदि इसकी आवश्यकता हो।

उपरोक्त सभी नियम हैं जिन्हें मैं अपने जावास्क्रिप्ट कोड लिखने के दौरान स्वयं का पालन करने का प्रयास करता हूं।

+0

+1: यह _the_ उत्तर है। –

+0

@ लाइटनेसरेसेसिन ऑर्बिट: धन्यवाद! – Oleg

5

आप की तरह

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

कुछ इस्तेमाल कर सकते हैं, लेकिन यह भी पठनीय नहीं लगती है। सामान्य तौर पर, कुछ कोडिंग के दिशा-निर्देशों को स्पष्ट रूप से URL के लिए एक स्ट्रिंग की लंबाई पर सीमा को निकालने (यह जावा के import बयान के साथ एक ही है -। उन मनमाने ढंग से लंबी हो सकती है)

1

सबसे पहले, मैं मानता हूं कि इस स्थिति के लिए कोई 'एक समाधान' नहीं है और दूसरा मुझे लगता है कि यह तकनीकी समस्या से अधिक डिजाइन का विषय है। यह सच है कि कभी-कभी एचटीएमएल कोड प्रस्तुतियों के मामले में इस तरह के तारों को कई पंक्तियों में विभाजित करने का अर्थ होता है, लेकिन कभी-कभी यह किसी यूआरएल, एचएएसएच/एसएचए स्ट्रिंग या पैराग्राफ के उदाहरण में नहीं होता है।

तो आपकी जेएस फ़ाइल के शीर्ष पर '/ * jslint maxlen: 130 * /' विकल्प जोड़ने का पहला प्रयास समस्या को ठीक करेगा, उस फ़ाइल को चेक करके 'लाइन टू लांग' को छोड़कर। लेकिन एक ही फाइल पर अन्य लाइनों के बारे में क्या, जो बहुत लंबे समय तक हैं लेकिन कम होना चाहिए, मूल रूप से जिशिंट से एक वैध चिंता है।

चूंकि अधिकांश मामले जहां हम लाइन को रखना चाहते हैं, वैसे भी, कोई फर्क नहीं पड़ता, यूआरएल, एचएएसएचएस, एसएचए जैसे स्ट्रिंग प्रस्तुतियों से संबंधित हैं और इसी तरह प्लेसहोल्डर का उपयोग करना एक अच्छा दृष्टिकोण हो सकता है। असल में विचार यह है कि उन्हें स्टोर करने के लिए एक जेएस फ़ाइल बनाना और इसे वैश्विक चर के माध्यम से उपलब्ध कराएं। फिर आप इसे अपनी साइट पर किसी भी स्क्रिप्ट से कॉल कर सकते हैं, जिस तरह से jQuery का उपयोग किया जाता है (बस याद रखें कि आपको स्क्रिप्ट्स का उपयोग करने से पहले प्लेसहोल्डर फ़ाइल लोड करने की आवश्यकता है)। इस समाधान के बारे में लाभ यह है कि आपको केवल एक फ़ाइल में इस अधिकतम सत्यापन से बचने की आवश्यकता है (असल में हम अधिकतम संख्या को अधिकतम संख्या में सेट कर रहे हैं)।

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(/^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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 यूआरएल उत्पाद एपीआई का प्रतिनिधित्व करता है या MyFeature.successfulMessageHTML 'मेरा फ़ीचर' के लिए एक सफल संदेश के लिए HTML कोड है। असल में हम यह बता रहे हैं कि डोमेन की अवधि (सफल संदेश, उत्पाद API, मान्य ईमेल ...) में इसका क्या अर्थ है और किस प्रारूप में प्रदर्शित किया गया है (HTML, URL, REGEX ...)।

स्रोत: http://moredevideas.wordpress.com/2013/09/16/line-too-long-on-jslint-and-jshint/

+0

इस पर प्रतिबिंबित करने के लिए एक वर्ष से अधिक होने के बाद, मैंने डेटा संग्रहीत करने के लिए लिया है जहां यह वास्तव में संबंधित है: HTML। निश्चित रूप से अभी भी ऐसे समय हैं जहां मैं जेएस में अच्छे डिफ़ॉल्ट चाहते हैं जो एक निश्चित रेखा की लंबाई से अधिक हो सकता है, लेकिन जब डेटा की लंबी तारों की बात आती है, तो मेरी प्रवृत्ति अब उन्हें '[डेटा - *]' विशेषताओं से खींचना है, या छुपा डोम तत्व (जैसे '