জাভাস্ক্রিপ্ট সহ এইচটিএমএল উত্পাদন করার জন্য কি সেরা অনুশীলন রয়েছে?

Question

আমি এমন একটি ওয়েব পরিষেবা কল করছি যা জেএসএনে বস্তুর অ্যারে ফিরিয়ে দেয়। আমি এই জিনিসগুলি নিতে এবং এইচটিএমএল দিয়ে একটি ডিভ পপুলেশন করতে চাই। ধরা যাক প্রতিটি বস্তুর একটি url এবং একটি নাম রয়েছে।

যদি আমি প্রতিটি বস্তুর জন্য নিম্নলিখিত HTML তৈরি করতে চাই:

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

এর জন্য কি সেরা অনুশীলন আছে? আমি এটি করার কয়েকটি উপায় দেখতে পাচ্ছি:

1. সংযুক্তি স্ট্রিং
2. উপাদান তৈরি করুন
3. একটি টেম্প্লেটিং প্লাগইন ব্যবহার করুন
4. সার্ভারে এইচটিএমএল তৈরি করুন, তারপরে JSON এর মাধ্যমে পরিবেশন করুন।

Comments

আপনি আন্ডারস্কোর

— জেএসও

পছন্দটি মং 1-4: নির্ভর করে যে কতগুলি বিষয়বস্তু ইনজেকশন করতে হবে ((বৃহত্তর 4 টি পছন্দ করুন) মোট কতগুলি পৃথক এইচটিএমএল অংশ যুক্ত করতে হবে (3 বা 4)। কি এসবি সঙ্গে পরিচিত। (দেব সময়ে প্রভাব) আপনি যদি কোনও সরঞ্জাম জানেন না তবে এটির জন্য কেবলমাত্র একটি ছোট মডেল যা ইনজেকশন করা হবে আমি এটি করার জন্য খাঁটি জেএসের চেয়ে ভাল উপায়টি জানি না (1-2)

— পার্টিজানোস

Answer 1

বিকল্প # 1 এবং # 2 আপনার সর্বাধিক তাত্ক্ষণিক স্ট্রেড ফরোয়ার্ড বিকল্প হতে চলেছে, তবে উভয় বিকল্পের জন্য, আপনি স্ট্রিং তৈরি করে বা ডোম অবজেক্ট তৈরির মাধ্যমে কর্মক্ষমতা এবং রক্ষণাবেক্ষণের প্রভাব অনুভব করতে যাচ্ছেন।

টেম্প্লেটিং সমস্ত অপরিণত নয়, এবং আপনি এটি বেশিরভাগ প্রধান জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলিতে পপআপ দেখছেন।

এখানে জিকিউরি টেম্পলেট প্লাগইনের একটি উদাহরণ যা আপনাকে সম্পাদন করবে পারফরম্যান্স হিট, এবং সত্যই সত্যই সোজা:

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

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

আমি বলি শীতল পথে যান (এবং আরও ভাল পারফরম্যান্স, আরও রক্ষণাবেক্ষণযোগ্য), এবং টেম্প্লেটিং ব্যবহার করুন।

Comments

জিকুয়ের টেম্প্লেটিংটি মারা গেছে বলে মনে হচ্ছে, দেখুন স্ট্যাকওভারফ্লো.com

— জেমস ম্যাকমাহন

@ জিম ফিওরাতো: লিঙ্কটি মারা গেছে: s

— অ্যাড্রিয়েন

লিঙ্কটি মারা গেছে, যেমন অ্যাড্রিন উল্লেখ করেছেন। আপনার উত্তরটি অন্তর্ভুক্ত করার জন্য আপডেট করার পরামর্শ দিন: মুস্তাচি.জেএস

— মিঃ পলিহর্ল

কেউ দয়া করে ব্যাখ্যা করতে পারেন, একটি jQuery- ভিত্তিক উত্তর কেন গৃহীত উত্তর? আমি সন্দেহ করি যে এটি সেরা অনুশীলন!

— ওআইইইইইইইইইইইইপি

@ ওআইআইআই আরও খারাপ, jQuery প্লাগইনটি মারা গেছে, সুতরাং এই উত্তরটি পুরানো।

— ফ্র্যাংকলিন ইউ

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("");

অ্যারে ব্যবহার করা আরও দ্রুত, বিশেষত আইই তে। আমি কিছুক্ষণ আগে আই 7, অপেরা এবং এফএফ দিয়ে স্ট্রিং দিয়ে কিছু পরীক্ষা করেছি। অপেরাটি পরীক্ষাটি চালানোর জন্য কেবল 0.4 সেকেন্ড নিয়েছিল, কিন্তু আইআই 7 20 মিনিটের পরে শেষ করেনি !!!! (না, আমি মজা করছি না) অ্যারের সাথে আইই খুব দ্রুত ছিল।

Comments

আমি অনেক আগে ব্রাউজারটি স্যুইচ করেছি, তাই আমি এতটা কষ্ট পাই না। আইই একটি ভয়ঙ্কর ব্রাউজার ছিল তবে এটি আরও ভাল হচ্ছে। তবে আমি সন্দেহ করি আমি কখনই ফিরে যাব।

— কিছু

প্রথম পদ্ধতিতে দেখা ধীর পারফরম্যান্স সম্ভবত কারণ ফলাফল স্ট্রিংটি 200 বার পুনঃনির্ধারণ করা উচিত, এবং মেমরির বরাদ্দটি ধীর হতে পারে। দুটি পুনরাবৃত্তির পরে আপনার "টেস্টিং টেস্টিং" রয়েছে। তিনটি পুনরাবৃত্তির পরে, সেই স্ট্রিংটি ফেলে দেওয়া হয় এবং "টেস্টেস্টেস্টেস্টেস্টিং" এর জন্য পর্যাপ্ত জায়গা সহ মেমরি বরাদ্দ করা হয়। এবং তাই 200 বার ধীরে ধীরে বৃদ্ধি দৈর্ঘ্য সঙ্গে। তবে s.join () এর ফলে একটি নতুন স্ট্রিং বরাদ্দ করে যা তাদের সকলের জন্য যথেষ্ট দীর্ঘ, তারপরে প্রত্যেকটিতে অনুলিপি করে। একটি বরাদ্দ, অনেক দ্রুত।

— এরিকপি

@ জোকোডার একমত হয়েছেন, এটি একটি শ্লেমিয়েল দ্য পেইন্টার অ্যালগোরিদম। joelonsoftware.com/articles/fog0000000319.html

— Jodrell

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

Comments

DOM উপাদানগুলির পরিবর্তে স্ট্রিং দিয়ে এইচটিএমএল তৈরি করা আরও পারফরম্যান্ট (ধরে নিই যে স্ট্রিং কনটেনটেশন একটি আসল সমস্যা নয়) এবং পাঠযোগ্য।

— রড্রিক চ্যাপম্যান

আইআর স্ট্রিংতে সর্বদা একটি বিষয় থাকে is পরিবর্তে একটি অ্যারে ব্যবহার করুন।

— কিছু

Answer 4

সম্ভবত একটি আরো আধুনিক পদ্ধতির এর মত টেমপ্লেট ভাষা ব্যবহার করা গোঁফ , যা JavaScript সহ অনেক ভাষা, মধ্যে বাস্তবায়নের হয়েছে। উদাহরণ স্বরূপ:

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

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

এমনকি আপনি একটি অতিরিক্ত সুবিধাও পান - আপনি অন্য জায়গাগুলিতে যেমন টেমপ্লেটগুলি আবার ব্যবহার করতে পারেন যেমন সার্ভার সাইড।

আপনার যদি আরও জটিল টেম্পলেটগুলির প্রয়োজন হয় (যদি বিবৃতি, লুপস ইত্যাদি) তবে আপনি হ্যান্ডেলবারগুলি ব্যবহার করতে পারেন যার আরও বৈশিষ্ট্য রয়েছে এবং এটি গোঁফের সাথে সামঞ্জস্যপূর্ণ।

Answer 5

JQuery এর জন্য আমার সাধারণ টেম্পলেটগুলি প্লাগ-ইন ব্যবহার করে এখানে একটি উদাহরণ দেওয়া হয়েছে :

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

Comments

ঝরঝরে। আমি কয়েক মাস আগে একটি বড় প্রকল্পের মতো এমন কিছু ব্যবহার করতে পারি।

— রড্রিক চ্যাপম্যান

হ্যাঁ. সংক্ষিপ্ত এবং ঝরঝরে!

— অজিতউব

Answer 6

আপনি কোনও লুকানো ডিভিতে আপনার পৃষ্ঠায় টেমপ্লেট এইচটিএমএল যুক্ত করতে পারেন এবং তারপরে এটি তৈরি করতে ক্লোননোড এবং আপনার প্রিয় লাইব্রেরির অনুসন্ধানের সুবিধাগুলি ব্যবহার করতে পারেন

/* 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>"

এই গ্রন্থাগারটি বেশ শক্তিশালী এবং ডেটা সন্নিবেশ (ডি 3 এর অনুরূপ) দিয়ে খুব জটিল কাঠামো তৈরি করতে ব্যবহৃত হতে পারে, যেমন:

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

বিওবি বর্তমানে ডিওএম-তে ডেটা ইনজেকশন সমর্থন করে না। এটি টডোলিস্টের উপর। আপাতত আপনি সাধারণ জেএস, বা জিকুয়েরির সাথে আউটপুটটি কেবল একসাথে ব্যবহার করতে পারেন এবং যেখানে খুশি সেখানে রেখে দিতে পারেন।

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());

---

আমি এই লাইব্রেরিটি তৈরি করেছি কারণ jquery এবং d3 এর মতো বিকল্পগুলির সাথে আমি সন্তুষ্ট ছিল না। কোডটি খুব জটিল এবং পড়া খুব কঠিন। বিওবির সাথে কাজ করা আমার মতে, যা স্পষ্টতই পক্ষপাতদুষ্ট, অনেক বেশি আনন্দদায়ক।

বব উপর উপলব্ধ আবাস তাই আপনি এটি চালিয়ে পেতে পারেন, bower install BOB।

Answer 8

এর জন্য কি সেরা অনুশীলন আছে? আমি এটি করার কয়েকটি উপায় দেখতে পাচ্ছি:

1. সংযুক্তি স্ট্রিং
2. উপাদান তৈরি করুন
3. একটি টেম্প্লেটিং প্লাগইন ব্যবহার করুন
4. সার্ভারে এইচটিএমএল তৈরি করুন, তারপরে JSON এর মাধ্যমে পরিবেশন করুন।

1) এটি একটি বিকল্প। ক্লায়েন্টের পাশে জাভাস্ক্রিপ্ট সহ এইচটিএমএল তৈরি করুন এবং তারপরে এটি পুরো ডিওমে ইনজেক্ট করুন।

নোট করুন যে এই পদ্ধতির পিছনে একটি দৃষ্টান্ত রয়েছে: সার্ভারটি কেবল ডেটা আউটপুট করে এবং (ইন্টারঅ্যাকশনের ক্ষেত্রে) এজ্যাক্স অনুরোধের সাথে ক্লায়েন্ট অ্যাসিক্রোনোলসির ডেটা গ্রহণ করে। ক্লায়েন্ট সাইড কোডটি এককভাবে জাভাস্ক্রিপ্ট ওয়েব অ্যাপ্লিকেশন হিসাবে অপারেট করে।

ওয়েব অ্যাপ্লিকেশনটি সার্ভারটি তৈরি না করেই ইন্টারফেসটি পরিচালনা করতে, ইন্টারফেসটি সরবরাহ করতে পারে (অবশ্যই এটি কোনও ডেটা প্রদর্শন করবে না বা কোনও ধরণের ইন্টারঅ্যাকশন প্রস্তাব করবে না)।

এই দৃষ্টান্তটি প্রায়শই গৃহীত হচ্ছে এবং পুরো ফ্রেমওয়ার্কগুলি এই পদ্ধতির চারপাশে তৈরি করা হয়েছে (উদাহরণস্বরূপ backbone.js দেখুন)।

2) পারফরম্যান্সের কারণে, যখন সম্ভব হয় তখন একটি স্ট্রিংতে এইচটিএমএল তৈরি করা ভাল এবং তারপরে পুরোটিকে পৃষ্ঠায় ইনজেক্ট করুন।

3) এটি অন্য একটি বিকল্প, পাশাপাশি একটি ওয়েব অ্যাপ্লিকেশন কাঠামো গ্রহণ করা। অন্যান্য ব্যবহারকারীগণ বিভিন্ন টেম্প্লেটিং ইঞ্জিন উপলব্ধ পোস্ট করেছেন। আমার ধারণা আছে যে তাদের মূল্যায়ন করার এবং এই পথটি অনুসরণ করা হবে কিনা তা সিদ্ধান্ত নেওয়ার দক্ষতা আপনার রয়েছে।

4) অন্য একটি বিকল্প। তবে এটি সরল পাঠ / এইচটিএমএল হিসাবে পরিবেশন করুন; কেন JSON? আমি এই পদ্ধতির পছন্দ করি না কারণ এইচটিএমএল এর সাথে পিএইচপি (আপনার সার্ভারের ভাষা) মিশ্রিত হয়। কিন্তু আমি বিকল্প মধ্যে একটি যুক্তিসঙ্গত আপস হিসাবে প্রায়ই দত্তক গ্রহণ করা 1 এবং 4 ।

---

আমার উত্তর: আপনি ইতিমধ্যে সঠিক দিকে সন্ধান করছেন।

আমি আমার মত 1 এবং 4 এর মধ্যে একটি পদ্ধতির অবলম্বন করার পরামর্শ দিই। অন্যথায় একটি ওয়েব ফ্রেমওয়ার্ক বা টেম্প্লেটিং ইঞ্জিন গ্রহণ করুন।

আমার অভিজ্ঞতার ভিত্তিতে আমার মতামত ...