जावास्क्रिप्ट के साथ तत्वों में एचटीएमएल के बड़े हिस्से डालने के लिए सबसे अच्छा अभ्यास?

Question

मैं एक वेब अनुप्रयोग (प्रोटोटाइप का उपयोग कर) बना रहा हूं जिसके लिए एचओएम में एचएमएम के बड़े हिस्से को जोड़ने की आवश्यकता है। इनमें से अधिकतर पंक्तियां हैं जिनमें सभी प्रकार के गुणों वाले तत्व होते हैं।

वर्तमान में मैं एक चर में HTML के एक रिक्त पंक्ति रखने के लिए और

var blankRow = '<tr><td>' 
    +'<a href="{LINK}" onclick="someFunc(\'{STRING}\');">{WORD}</a>' 
    +'</td></tr>'; 

function insertRow(o) { 
    newRow = blankRow 
     .sub('{LINK}',o.link) 
     .sub('{STRING}',o.string) 
     .sub('{WORD}',o.word); 
    $('tbodyElem').insert(newRow); 
} 

अब जब कि सब कुछ ठीक है और dandy काम करता है, लेकिन यह सबसे अच्छा अभ्यास है?

जब मैं पृष्ठ पर कोड अपडेट करता हूं तो मुझे blankRow में कोड अपडेट करना होगा, इसलिए नए तत्व डाले जा रहे हैं। जब मुझे एचटीएमएल की 40 लाइनें खाली होती हैं तो मुझे चूसना पड़ता है और फिर मुझे इसे भी बचाना पड़ता है।

क्या कोई आसान तरीका है? मैं urlencoding के बारे में सोच रहा था और फिर सम्मिलन से पहले इसे डीकोड कर रहा था, लेकिन इसका मतलब अभी भी एक खाली पंक्ति और भागने के बहुत से मतलब होगा।

ला PHP एट अल का एक ईफ फ़ंक्शन क्या होगा।

$blankRow = <<<EOF 
text 
text 
EOF; 

इसका मतलब यह नहीं होगा कि इससे बच निकले लेकिन इसे अभी भी रिक्त स्थान की आवश्यकता होगी।

आप इस स्थिति में क्या करते हैं?

प्रोटोटाइप में एक DOMBuilder का उपयोग कर समाप्त हल किया। कोई अन्य पुस्तकालयों की जरूरत थी:

$w('a div p span img table thead td th tr tbody tfoot input').each(function(e) { 
     window['$' + e] = function() { 
      return new Element(e, arguments[0]); 
     } 
}); 

newPart = $div({id: 'partition-4'}) 
    .insert($p() 
     .insert('<b>Stuff</b>') 
    ) 
    .insert($p({ 
     id: 'a-p'}) 
     .insert('<b>More stuff</b>') 
    ); 

$('parentDiv').insert(newPart); 

मेरी समाधान here या here देखें।

Answer 1

यह सबसे अच्छा अभ्यास है?

नहीं। वास्तव में आप HTML इंजेक्शन समस्याओं कीड़े के लिए अग्रणी मिल गया है, और सबसे ज्यादा मामले जहां इंजेक्शन तार उपयोगकर्ताओं द्वारा प्रदत्त सामग्री, XSS सुरक्षा छिद्र हो सकती है।

जब आप एक HTML स्ट्रिंग में सादे पाठ सामग्री और विशेषता मान डालते हैं, तो आप HTML- उन्हें एन्कोड करना चाहिए। PHP में, आपको ऐसा करने के लिए HTML में जाने वाले तारों पर htmlspecialchars() पर कॉल करना होगा। जावास्क्रिप्ट में, आपको अंतर्निहित HTML-escaping फ़ंक्शन नहीं मिलता है, इसलिए आपको अपना खुद का बनाना होगा, उदाहरण के लिए। HTML में जा रहे स्ट्रिंग पर s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;') का उपयोग करके।

onclick = "someFunc (\ '{STRING} \');"

यह गड़बड़ी से बचने का एक नया स्तर है। एक जावास्क्रिप्ट स्ट्रिंग एक ईवेंट हैंडलर विशेषता अंदर शाब्दिक में, आप जे एस एन्कोड करने के लिए स्ट्रिंग (\ -escaping ' और \ प्लस पूर्णता के लिए कुछ यूनिकोड वर्ण) और फिर HTML एन्कोड परिणाम होगा। अन्यथा स्ट्रिंग अपने स्ट्रिंग-शाब्दिक डेलीमीटर से बाहर हो सकती है और मनमाने ढंग से जेएस कोड इंजेक्ट कर सकती है। सभी मामलों में इनलाइन घटना हैंडलर विशेषताओं से बचें, लेकिन विशेष रूप से templating में।

HTML स्ट्रिंग्स के साथ पृष्ठ सामग्री बनाना बेकार है। आप त्रुटियों से बचने और अपने आवेदन की सुरक्षा समझौता करने की संभावना है। इसके बजाए डोम जैसी विधियों का उपयोग करें और आपको इसके बारे में चिंता करने की ज़रूरत नहीं है। आप jQuery ज़रिये जुड़े हुए हैं, इसलिए jQuery 1.4 तत्व निर्माण शॉर्टकट का प्रयास करें:

$('<tr>').append(
    $('<td>').append(
     $('<a>', { 
      href: o.link, 
      text: o.word, 
      onclick: function() { 
       someFunc(o.string); 
      } 
     }) 
    ) 
); 

या, HTML के रूप में दस्तावेज़ के अंदर अपने रिक्त पंक्ति वास्तव में रखने के लिए, लेकिन तब यह (display: none) को छिपाने या कम से दस्तावेज़ से यह अलग प्रारंभ समय (removeChild या jQuery detach)। फिर जब आप एक नई पंक्ति चाहते हैं, रिक्त पंक्ति क्लोन और परिवर्तन की जरूरत है: आप, स्ट्रिंग टेम्पलेट्स से सामग्री बनाने चाहिए सुनिश्चित डिफ़ॉल्ट रूप से हर प्रतिस्थापन अपने templating समारोह एचटीएमएल-निकल जाता है, और घटनाओं देते हैं

var blankRow= $('#blankRow').detach(); 

    ... 

var newRow= blankRow.clone(); 
var link= newRow.find('td>a'); 
link.attr('href': o.link); 
link.text(o.word); 
link.click(function() { 
    someFunc(o.string); 
}); 

click(function() { ... }) पर कॉल करने के लिए पार्स की गई सामग्री के अंदर नोड्स का चयन करके। या ईवेंट प्रतिनिधिमंडल का उपयोग करें (उदाहरण के लिए jQuery live()) जोड़े जाने पर नए नोड्स से जुड़ने के बिना ईवेंट को संभालने के लिए।

Answer 2

आप इसे एक अच्छे तरीके से उपयोग करते हैं, और यह अन्य शिष्टाचार पर विचार कर रहा है।

एक वैकल्पिक, supposely स्वच्छ समाधान जावास्क्रिप्ट में कई

document.createElement (टैगनाम) पर कॉल करके डोम तत्वों आप उपयोग करना है, के निर्माण के लिए है,

लेकिन आपका कोड तेजी से बढ़ेगा, मेरे विचार में, कुछ भी नहीं।

डीओएम सृजन को प्राप्त करने का मेरा पसंदीदा तरीका एचटीएमएल बॉडी के अंदर एक कोड है जिसे आप प्रतिलिपि बनाना चाहते हैं, इसे कक्षा नाम दें और/या "टेम्पलेट" जैसे आईडी दें जो अतिरिक्त रूप से (सीएसएस का उपयोग करके) छुपाएगा इसे, और उसके बाद तत्व को वापस प्राप्त करके, इसे क्लोन करना, और उस संपत्ति को सेट करना जो आप चाहते हैं उसे जोड़ने से पहले

Answer 3

यदि मैं आपको अच्छी तरह से समझता हूं, तो आपका प्रश्न बड़े तारों को शुरू करने के तरीके के बारे में है, क्या वह PHP में करेगा (या उस मामले के लिए पर्ल)? लंबे समय तक (बहु) स्ट्रिंग के लिए मैं का उपयोग करें:

var blankRow = [ 
    'a line', 
    'another line', 
    'still more lines', 
    'lines lines lines', 
    '... etc' 
    ].join('') 

तुम भी जारी रखने के लिए बैकस्लैश का उपयोग कर सकते हैं, लेकिन उस तरह का गन्दा प्राप्त कर सकते हैं: टिप्पणी के आधार पर

var blankRow = 'a line\ 
another line\ 
still more lines\ 
lines lines lines\ 
... etc'; 

संपादित करें: मैं बहुत आलसी हूँ !आलसी होने के साथ

function qs(str){ 
    str = str || this || ''; 
    return "'"+str+"'"; 
} 

function qd(str){ 
    str = str || this || ''; 
    return '"'+str+'"'; 

} 

String.prototype.qs = qs; 
String.prototype.qd = qd; 

// applied: 
var blankRow = [ 
     'a line', 
     'another '+qd('line'), 
     'still more lines', 
     'lines '+'lines'.qs()+ ' lines', 
     '... etc' 
     ].join(''); 

समस्या:: तो मैं बचने के लिए इसका उपयोग यह बहुत कठिन काम है लागू करने के लिए लोगों को lazyness