هل هناك أفضل الممارسات من أجل توليد html مع جافا سكريبت

Question

أنا استدعاء خدمة ويب بإرجاع صفيف من الكائنات في JSON.أريد أن تأخذ هذه الكائنات تعيش على شعبة مع HTML.دعونا نقول كل كائن يحتوي على رابط و اسم.

إذا أردت أن تولد HTML التالية لكل كائن:

<div><img src="the url" />the name</div>

هل هناك أفضل الممارسات من أجل هذا ؟ أستطيع أن أرى بعض الطرق للقيام بذلك:

1. سلسلة سلاسل
2. إنشاء عناصر
3. استخدام النموذجيه المساعد
4. توليد html على الخادم ، ثم تقدم عن طريق JSON.

Answer 1

خيارات #1 و #2 ستكون الأكثر فورية على التوالي إلى الأمام الخيارات بالنسبة لكل الخيارات, وأنت تسير أن يشعر الأداء والصيانة تأثير إما بناء سلاسل أو إنشاء DOM الكائنات.

النموذجيه ليست ناضجة و أنت ترى المنبثقة في أهم الأطر جافا سكريبت.

هنا مثال في قالب مسج البرنامج المساعد من شأنها أن توفر لك الأداء ضرب و هو حقا واضحة:

var t = $.template('<div><img src="${url}" />${name}</div>');

$(selector).append( t , {
     url: jsonObj.url,
     name: jsonObj.name
});

أقول اذهب بارد الطريق (و أداء أفضل ، أكثر للصيانة) ، واستخدام النموذجيه.

Answer 2

إذا كان لديك على الاطلاق لسلسلة السلاسل بدلا من العادية :

var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }

استخدام مؤقت مجموعة:

var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");

باستخدام المصفوفات هو أسرع بكثير ، خاصة في IE.فعلت بعض التجارب مع سلاسل منذ فترة مع IE7, أوبرا FF.أوبرا أخذت فقط 0.4 s لأداء الاختبار ، ولكن IE7 لم ينته بعد 20 دقيقة !!!!( لا, أنا لا أمزح.) مع مجموعة أي كان سريع جدا.

Answer 3

أي من الخيارين الأولين هو شائع ومقبول.

سأعطيك أمثلة على كل واحد في النموذج.

// assuming JSON looks like this:
// { 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }

النهج #1:

var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); // inserts at bottom

النهج #2:

var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottom

Answer 4

وهنا على سبيل المثال ، استخدام بلدي بسيطة قوالب المكونات في مسج:

var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);

Answer 5

ربما نهج أكثر حداثة هو استخدام النموذجيه اللغة مثل شارب, التي لديها تطبيقات في العديد من اللغات بما في ذلك جافا سكريبت.على سبيل المثال:

var view = {
  url: "/hello",
  name: function () {
    return 'Jo' + 'hn';
  }
};

var output = Mustache.render('<div><img src="{{url}}" />{{name}}</div>', view);

حتى تحصل على ميزة إضافية - يمكنك إعادة استخدام نفس القوالب في أماكن أخرى ، مثل جانب الملقم.

إذا كنت في حاجة أكثر تعقيدا قوالب (إذا البيانات ، حلقات ، الخ) ، يمكنك استخدام المقاود التي لديها المزيد من الميزات ، و هو متوافق مع شارب.

Answer 6

يمكنك إضافة قالب HTML على الصفحة الخاصة بك في خفية div ثم استخدام cloneNode المفضلة المكتبة الاستعلام عن مرافق لملء ذلك

/* CSS */
.template {display:none;}

<!--HTML-->
<div class="template">
  <div class="container">
    <h1></h1>
    <img src="" alt="" />
  </div>
</div>

/*Javascript (using Prototype)*/
var copy = $$(".template .container")[0].cloneNode(true);
myElement.appendChild(copy);
$(copy).select("h1").each(function(e) {/*do stuff to h1*/})
$(copy).select("img").each(function(e) {/*do stuff to img*/})

Answer 7

الإفصاح:أنا معيل بوب.

هناك مكتبة جافا سكريبت التي تجعل هذه العملية أسهل بكثير يسمى بوب.

المحددة الخاصة بك على سبيل المثال:

<div><img src="the url" />the name</div>

هذا يمكن أن تتولد مع بوب قبل التعليمة البرمجية التالية.

new BOB("div").insert("img",{"src":"the url"}).up().content("the name").toString()
//=> "<div><img src="the url" />the name</div>"

أو مع جملة أقصر

new BOB("div").i("img",{"src":"the url"}).up().co("the name").s()
//=> "<div><img src="the url" />the name</div>"

هذه المكتبة هي قوية جدا ويمكن استخدامها لإنشاء هياكل معقدة للغاية مع البيانات الإدراج (على غرار d3), على سبيل المثال.:

data = [1,2,3,4,5,6,7]
new BOB("div").i("ul#count").do(data).i("li.number").co(BOB.d).up().up().a("a",{"href": "www.google.com"}).s()
//=> "<div><ul id="count"><li class="number">1</li><li class="number">2</li><li class="number">3</li><li class="number">4</li><li class="number">5</li><li class="number">6</li><li class="number">7</li></ul></div><a href="www.google.com"></a>"

بوب لا حاليا لا تدعم الحقن البيانات في DOM.هذا هو على todolist.الآن يمكنك ببساطة استخدام الإخراج مع العادي JS, أو مسج, ووضعها في أي مكان تريد.

document.getElementById("parent").innerHTML = new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s();
//Or jquery:
$("#parent").append(new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s());

---

أنا جعلت هذه المكتبة لأنني لم يسر مع أي من البدائل مثل مسج و d3.رمز معقدة جدا و من الصعب قراءة.العمل مع بوب هو في رأيي, التي من الواضح انها منحازة الكثير أكثر متعة.

بوب هو متاح على باور, لذا يمكنك الحصول عليه عن طريق تشغيل bower install BOB.

Answer 8

هل هناك أفضل الممارسات من أجل هذا ؟ أستطيع أن أرى بعض الطرق للقيام بذلك:

1. سلسلة سلاسل
2. إنشاء عناصر
3. استخدام النموذجيه المساعد
4. توليد html على الخادم ، ثم تقدم عن طريق JSON.

1) هذا هو الخيار.بناء html مع جافا سكريبت على جانب العميل ومن ثم حقنها في دوم ككل.

علما أن هناك نموذجا وراء هذا النهج:الخادم النواتج فقط البيانات (في حالة التفاعل) يتلقى البيانات من العميل asyncronoulsy مع طلبات اياكس.جانب العميل رمز operete بذاتها جافا سكريبت تطبيق ويب.

تطبيق ويب يمكن أن تعمل لجعل واجهة ، حتى من دون الملقم حتى (وبطبيعة الحال فإنه لن يتم عرض أية بيانات أو تقديم أي نوع من التفاعل).

هذا النموذج هو الحصول على اعتماد كثير من الأحيان في الآونة الأخيرة ، كامل أطر بناء حول هذا النهج (انظر backbone.js على سبيل المثال).

2) لأسباب تتعلق بالأداء ، عندما يكون ذلك ممكنا ، هو أفضل لبناء html في سلسلة ثم حقن ككل في الصفحة.

3) هذا هو خيار آخر ، وكذلك اعتماد إطار تطبيق ويب.المستخدمين الآخرين قد نشرت مختلف النموذجيه المحركات المتاحة.لدي انطباع بأن لديك المهارات اللازمة لتقييم لهم و تقرر ما إذا كانت تتبع هذا المسار أم لا.

4) خيار آخر.ولكن خدمتها كما نص عادي/html ؛ لماذا JSON ؟ أنا لا أحب هذا النهج لأنه يمزج PHP (الخادم الخاص بك اللغة) مع Html.ولكن لا تعتمد عليه كثير من الأحيان كما حل وسط معقول بين الخيار 1 و 4.

---

جوابي:كنت بالفعل أبحث في الاتجاه الصحيح.

أقترح اعتماد النهج بين 1 و 4 كما أفعل.وإلا اعتماد إطار الشبكة أو محرك النموذجيه.

مجرد رأيي بناء على تجربتي...