JQuery ব্যবহার করে এইচটিএমএল উপাদান তৈরি করার সবচেয়ে কার্যকরী উপায় কী?

Question

সম্প্রতি আমি প্রচুর মডেল উইন্ডো পপ-আপগুলি করছি এবং কী নয়, যার জন্য আমি jQuery ব্যবহার করেছি। পৃষ্ঠায় নতুন উপাদান তৈরি করার জন্য আমি যে পদ্ধতিটি ব্যবহার করেছি তা অবিচ্ছিন্নভাবে এর লাইনের সাথে চলেছে:

$("<div></div>");

যাইহোক, আমি অনুভব করছি যে এটি করার সর্বোত্তম বা সবচেয়ে কার্যকর পদ্ধতি নয়। পারফরম্যান্সের দৃষ্টিকোণ থেকে jQuery এ উপাদান তৈরি করার সর্বোত্তম উপায় কী?

এই উত্তরের নীচের পরামর্শগুলির মানদণ্ড রয়েছে।

Comments

শৈলীগুলি অপসারণ করার জন্যও পরীক্ষা করুন এবং দেখুন যে এটি জিনিসগুলিকে গতি দেয়। আমি সিএসএস অ্যাপ্লিকেশন খুঁজে পাই এবং আপডেটগুলি আমার জন্য বড় পৃষ্ঠাগুলিতে সবচেয়ে ধীর করে দেয়।

— সিভেরটেক্স

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

— ব্লেজমোনজার

@ ব্লাজমোনজার এটি এতটা না যে আমাকে ডিওএম উপাদান তৈরি করার জন্য আরও দক্ষ পদ্ধতির প্রয়োজন ছিল , তবে যে পরিস্থিতি আমার মধ্যে ছিল তা আমাকে বিকল্পগুলির কী কী এবং তারা কতটা দক্ষ হতে পারে তা ভেবে দেখিয়েছিল।

— ডার্কো জেড

jQuery একটি লাইব্রেরি - আপনি প্রায় সবসময় এই কারণে ওভারহেড কর্মক্ষমতা ব্যয় করতে হবে: এটি দোভাষীর মাধ্যমে কারও সাথে কথা বলার মতো। আপনি যদি কাঁচা জাভাস্ক্রিপ্ট ব্যবহার করতে না চান তবে $ ('<div>') লিখতে এবং পারফরম্যান্সের হিটটি গ্রহণ করা কতটা দ্রুত তা কাজে লাগান।

— ড্যানি বুলিস

jsben.ch/#/bgvCV <= এই মানদণ্ডটি আপনার প্রশ্নের উত্তর দেওয়া উচিত

— EscapeNetscape

Answer 1

আমি $(document.createElement('div')); বেঞ্চমার্কিং শোগুলি ব্যবহার করি এই কৌশলটি দ্রুততম। আমি অনুমান করি এটি হ'ল jQuery এর এটিকে কোনও উপাদান হিসাবে সনাক্ত করতে এবং উপাদানটি নিজেই তৈরি করতে হবে না।

আপনার সত্যই বিভিন্ন জাভাস্ক্রিপ্ট ইঞ্জিন সহ বেঞ্চমার্ক চালানো উচিত এবং ফলাফলের সাথে আপনার শ্রোতাদের ওজন করা উচিত। সেখান থেকে সিদ্ধান্ত নিন।

Comments

jQuery এটি ডিওমে "সংযুক্ত" করে? কোথায়? এটি আমার কাছে খুব একটা বোঝায় না - ডিভটি কোথায় যাবে?

— স্ট্র্যাজার

জাভাস্ক্রিপ্টে তৈরি একটি ডিভ ঠিক ঠিক জাভাস্ক্রিপ্টে যুক্ত করতে হবে। '(' <div> ') নিজেই DOM এর সাথে সংযুক্ত থাকে না যতক্ষণ না আপনি এটি কোনও কিছুতে যুক্ত করেন ()।

— ওভেন

@ ডেভিড - স্পষ্টতই আপনি ঠিক বলেছেন আমি নোট করব যে আমি প্রায় 2 বছর আগে মন্তব্যটি যুক্ত করেছি যখন আমি jQuery শিখতে শুরু করেছি। আপনার একটি করা দরকার appendTo, ... কারণ মন্তব্যগুলি স্পষ্টত ভুল ছিল, তাই আমি সেগুলি সরিয়েছি।

— tvanfosson

মানদণ্ডের রেফারেন্সটি দুর্দান্ত, তবে এটি কয়েক হাজার উপাদান তৈরির পরীক্ষাও করছে। আপনি কখন সাধারণ পরিস্থিতিতে এমন অনেক উপাদানগুলির সাথে কাজ করবেন? সম্ভাবনাগুলি হ'ল, উপাদান কীভাবে তৈরি করা যায় তার চেয়ে বেশি চিন্তা করার জন্য আপনার কাছে বড় জিনিস রয়েছে। document.createElement "0.097 সেকেন্ডে 39,682 বার রান", যেখানে $ ('<div>') "0.068 সেকেন্ডে 12,642 রান হয়েছে" " আমি বলতাম কিছু যদি এক সেকেন্ডেরও কম সময়ে কয়েক হাজার বার চালানো যায় তবে আপনি নিরাপদ।

— ড্যানি বুলিস

তদ্ব্যতীত, $ (ডকুমেন্ট.ক্রেটইলেট ('ডিভ')) ব্যবহার করে; আমি বলবো কম দক্ষ কারণ আপনি ব্রাউজারে পাবেন এমন যথেষ্ট পরিমাণে সুবিধার জন্য লিখতে বেশি সময় লাগে যদি আপনি এখানে এবং সেখানে কেবল একবারে একটি উপাদান তৈরি করে থাকেন। প্রযুক্তিগতভাবে, দেখার জন্য ব্যয় এবং ওভারহেড ব্যবহার করে আপনি যে পরিমাণ ওভারহেড ব্যবহার করেছেন তা jQuery নিজেই লাইব্রেরি হিসাবে কম দক্ষ। যদি কেউ $ ('<div>') এর পরিবর্তে ডকুমেন্ট.ক্রেটএলিমেন্ট ব্যবহার করে মিলি-সেকেন্ডের মূল্যবান হাজারতম সঞ্চয় করার বিষয়ে আগ্রহী হয় তবে তাদের jQuery ব্যবহার করা উচিত নয়:], কারণ $ ('<div>') আপনি এটি ব্যবহার করার একটি কারণ!

— ড্যানি বুলিস

Answer 2

ব্যক্তিগতভাবে আমি প্রস্তাব করব (পাঠযোগ্যতার জন্য):

$('<div>');

এখনও অবধি পরামর্শের কয়েকটি সংখ্যা (সাফারি ৩.২.১ / ম্যাক ওএস এক্স):

var it = 50000;

var start = new Date().getTime();
for (i = 0; i < it; ++i)  {
  // test creation of an element 
  // see below statements
}
var end = new Date().getTime();
alert( end - start );                

var e = $( document.createElement('div') );  // ~300ms
var e = $('<div>');                          // ~3100ms
var e = $('<div></div>');                    // ~3200ms
var e = $('<div/>');                         // ~3500ms              

Comments

Jquery ডক্স থেকে: 'একক উপাদান তৈরি করার সময় ক্লোজিং ট্যাগ বা এক্সএইচটিএমএল ফর্ম্যাট ব্যবহার করুন। উদাহরণস্বরূপ, একটি স্প্যান তৈরি করতে ক্লাশ স্ল্যাশ / ট্যাগ ছাড়াই $ ("<span />") বা $ ("<span> </span>") ব্যবহার করুন ''

— tvanfosson

@ ওউন, সেই আচরণটি একটি বাগ, কোনও বৈশিষ্ট্য নয়। আবর্জনা ভিতরে garbage ফাংশনের স্পেসিফিকেশন পরিবর্তিত না হলে jQuery সংস্করণগুলির মধ্যে এটির উপর নির্ভর করবেন না।

— স্ট্র্যাজার

যেমনটি প্রত্যাশা করা হয়েছিল, ম্যাক ওএস এক্স ক্রোম (ক্রাইলেমেন্ট (100 মিমি বনাম 500 মিমি পাঠ্য পার্সিংয়ের জন্য 100 মিমি) এবং ম্যাক ওএস এক্স ফায়ারফক্স (350 মিমি বনাম 1000 মিমি) তে একই সংখ্যাগুলি দেখতে পাচ্ছি। পরীক্ষার লুপটি লেখার জন্য ধন্যবাদ

— আনিকা ব্যাকস্ট্রোম

@ টানফসন এটি আপাতদৃষ্টিতে পরিবর্তিত হয়েছে, বর্তমান নথিতে এটি বলেছে: "প্যারামিটারের যখন একটি একক ট্যাগ থাকে (alচ্ছিক সমাপ্তি ট্যাগ বা দ্রুত-সমাপ্তি সহ) - $ (" <img /> ") বা $ (" <img> " ), $ ("<a> </a>") বা $ ("<a>") - jQuery স্থানীয় জাভাস্ক্রিপ্ট তৈরির উপাদান () ফাংশন ব্যবহার করে উপাদান তৈরি করে ""

— metatron

@ মার্সস্টোবার কোনও অপরাধ নেওয়া হয়নি। এটি এখনও এখানে রয়েছে: http://api.jquery.com/jQuery/#jQuery2 । দস্তাবেজগুলি

— alচ্ছিক

Answer 3

প্রশ্ন:

JQuery ব্যবহার করে এইচটিএমএল উপাদান তৈরি করার সবচেয়ে কার্যকরী উপায় কী?

উত্তর:

যেহেতু এটি প্রায় jQueryতখনই আমি মনে করি এটি (পরিষ্কার) পদ্ধতির (আপনি ব্যবহার করছেন) ব্যবহার করা ভাল think

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'text':'Text Only',
}).on('click', function(){
    alert(this.id); // myDiv
}).appendTo('body');

ডেমো।

এইভাবে, আপনি এমনকি নির্দিষ্ট উপাদানগুলির মতো ইভেন্ট হ্যান্ডলারগুলিও ব্যবহার করতে পারেন

$('<div/>', {
    'id':'myDiv',
    'class':'myClass',
    'style':'cursor:pointer;font-weight:bold;',
    'html':'<span>For HTML</span>',
    'click':function(){ alert(this.id) },
    'mouseenter':function(){ $(this).css('color', 'red'); },
    'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

ডেমো।

তবে আপনি যখন প্রচুর গতিশীল উপাদানগুলির সাথে কাজ করছেন, আপনার handlersনির্দিষ্ট উপাদানগুলিতে ইভেন্ট যুক্ত করা এড়ানো উচিত , পরিবর্তে, আপনার কোনও প্রতিনিধি ইভেন্ট হ্যান্ডলার ব্যবহার করা উচিত, যেমন

$(document).on('click', '.myClass', function(){
    alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
    $('<div/>', {
        'class':'myClass',
        'html':'<span>Element'+i+'</span>'
    }).appendTo('body');
}

ডেমো।

সুতরাং, আপনি যদি একই শ্রেণীর সাথে শতভাগ উপাদান তৈরি করে বা সংযোজন করেন, অর্থাৎ ( myClass) তবে ইভেন্ট ম্যানেজিংয়ের জন্য কম মেমরি গ্রাস করা হবে, কারণ সমস্ত গতিযুক্ত sertedোকানো উপাদানগুলির জন্য কাজ করার জন্য কেবলমাত্র একজন হ্যান্ডলার থাকবেন।

আপডেট: যেহেতু আমরা গতিশীল উপাদান তৈরি করতে নিম্নলিখিত পদ্ধতির ব্যবহার করতে পারি

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    'size': '30'
}).appendTo("body");

তবে sizeএই পদ্ধতির সাহায্যে jQuery-1.8.0বা পরে ব্যবহার করে অ্যাট্রিবিউট সেট করা যাবে না এবং এখানে একটি পুরানো বাগ রিপোর্ট রয়েছে , এই উদাহরণটি ব্যবহার করে দেখুন jQuery-1.7.2যা দেখায় যে উপরের উদাহরণটি ব্যবহার করে sizeঅ্যাট্রিবিউট সেট করা আছে 30তবে একই পদ্ধতির সাহায্যে আমরা sizeব্যবহার করে অ্যাট্রিবিউট সেট করতে পারি না jQuery-1.8.3, এখানে হ'ল একটি অ-কার্যক্ষম ফিডল । সুতরাং, sizeবৈশিষ্ট্যটি সেট করতে , আমরা নিম্নলিখিত পদ্ধতির ব্যবহার করতে পারি

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    attr: { size: "30" }
}).appendTo("body");

বা এই এক

$('<input/>', {
    'type': 'Text',
    'value':'Some Text',
    prop: { size: "30" }
}).appendTo("body");

আমরা পাস করতে পারেন attr/propএকটি শিশু অবজেক্ট হিসেবে কিন্তু এটি কাজ করে jQuery-1.8.0 and laterসংস্করণের পরীক্ষা এই উদাহরণে কিন্তু এটি কাজ করবে না এ jQuery-1.7.2 or earlier(সমস্ত পূর্ববর্তী সংস্করণে পরীক্ষিত নয়)।

বিটিডাব্লু, jQueryবাগ রিপোর্ট থেকে নেওয়া

বেশ কয়েকটি সমাধান রয়েছে। প্রথমটি হ'ল এটি একেবারেই ব্যবহার না করা, যেহেতু এটি আপনার কোনও স্থান সংরক্ষণ করে না এবং এটি কোডের স্বচ্ছতা উন্নত করে:

তারা নিম্নলিখিত পদ্ধতির ব্যবহার করার পরামর্শ দিয়েছিল ( পূর্বেরগুলিতেও কাজ করে , পরীক্ষিত 1.6.4)

$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

সুতরাং, আইএমও, এই পদ্ধতির ব্যবহার করা আরও ভাল। আমি এই উত্তরটি পড়ার / খুঁজে পাওয়ার পরে এই আপডেটটি করা হয়েছে এবং এই উত্তরে দেখায় যে আপনি যদি এর 'Size'(capital S)পরিবর্তে ব্যবহার করেন 'size'তবে এটি ঠিক কাজ করবে , এমনকিversion-2.0.2

$('<input>', {
    'type' : 'text',
    'Size' : '50', // size won't work
    'autofocus' : 'true'
}).appendTo('body');

প্রপ সম্পর্কেও পড়ুন , কারণ একটি পার্থক্য রয়েছে Attributes vs. Properties, এটি সংস্করণগুলির মাধ্যমে পরিবর্তিত হয়।

Comments

এটি কী ধরণের সিনট্যাক্স / ('<div />', {.........}), আমি এটি সন্ধান করেছি এবং $ ('<div>) .attr ব্যবহার করে কিছু অনুরূপ খুঁজে পেয়েছি ( {......})?

— রাফায়েল রুইজ তাবারেস

@ রাফায়েলরুয়েজটিবারেস, $('<div>', {...})আপনি এমন একটি বস্তু যাচ্ছেন যাতে সমস্ত বৈশিষ্ট্য রয়েছে এবং $('<div>').attr({...})আপনি কোনও বৈশিষ্ট্য ছাড়াই একটি উপাদান তৈরি করছেন তবে attr()পরে পদ্ধতিটি ব্যবহার করে বৈশিষ্ট্যগুলি নির্ধারণ করছেন ।

— আলফা

@ আলফা আমি inside} এর ভিতরে কী লিখতে পারি সে সম্পর্কে আমি কোথায় তথ্য জানতে পারি? কারণ আমি দেখতে পাছি যে তারা বৈশিষ্ট্য এবং ইভেন্টগুলি তবে <ডিভ> আপনি এইচটিএমএলও ব্যবহার করেন। ধন্যবাদ!

— রাফায়েল রুইজ তাবারেস

jQuery.comওয়েব সাইটটি অনুসন্ধানে সহায়ক হতে পারে @ রাফায়েলরুজটাইবারস, বা গুগল করুন :-)

— আলফা

এটি এখন পর্যন্ত সবচেয়ে পরিষ্কার পঠনযোগ্য উপায়! সম্ভবত দ্রুত উপায় নয় তবে অবশ্যই কম ত্রুটি স্ট্রিং সংযোজন প্রবণ। ধন্যবাদ @ দি আলফা

— আরেস

Answer 4

আসলে, আপনি যদি করছেন $('<div>'), jQuery এছাড়াও ব্যবহার করবে document.createElement()।

( 117 লাইনটি একবার দেখুন )

কিছু ফাংশন-কল ওভারহেড রয়েছে, তবে যদি না পারফরম্যান্স সমালোচিত না হয় (আপনি কয়েকশো [হাজার হাজার উপাদান তৈরি করছেন), প্লেইন ডিওমে ফিরে যাওয়ার খুব বেশি কারণ নেই ।

কেবলমাত্র একটি নতুন ওয়েবপৃষ্ঠার জন্য উপাদান তৈরি করা সম্ভবত এমন একটি ঘটনা যা আপনি সর্বোত্তমভাবে কাজগুলি করার jQuery উপায়ে আঁকড়ে থাকুন ।

Answer 5

আপনার যদি প্রচুর এইচটিএমএল সামগ্রী থাকে (কেবলমাত্র একটি একক ডিভের চেয়ে বেশি), আপনি কোনও লুকানো ধারকটির মধ্যে পৃষ্ঠাতে এইচটিএমএল তৈরির কথা বিবেচনা করতে পারেন, তারপরে এটি আপডেট করে এবং প্রয়োজনে এটি দৃশ্যমান করে তোলা। এইভাবে, আপনার মার্কআপের একটি বড় অংশ ব্রাউজারের প্রাক পার্স করতে পারে এবং যখন জাভাস্ক্রিপ্ট কল করা হয় তখন তা জালিয়াতি থেকে বিরত থাকে। আশাকরি এটা সাহায্য করবে!

Comments

পরামর্শের জন্য ধন্যবাদ. আমি এই পদ্ধতির আগে ব্যবহার করেছি, তবে এই বিশেষ ক্ষেত্রে আমি বিশেষত উপাদান তৈরির বিষয়ে জানতে চাই।

— ডার্কো জেড

Answer 6

এটি প্রশ্নের সঠিক উত্তর নয় তবে তবুও আমি এটি ভাগ করে নিতে চাই ...

শুধু ব্যবহার document.createElement('div')এবং jQuery কুঁদন কর্মক্ষমতা অনেক উন্নত যখন আপনি মাছি এবং DOM সংযোজন উপাদান অনেক করতে চাই হবে।

Answer 7

আমি মনে করি আপনি সেরা পদ্ধতিটি ব্যবহার করছেন, যদিও আপনি এটিকে অনুকূল করতে পারেন:

 $("<div/>");

Answer 8

আপনাকে কোনও অপারেশন থেকে কাঁচা পারফরম্যান্সের দরকার নেই আপনি সিপিইউর দৃষ্টিকোণ থেকে অত্যন্ত কদাচিৎ সম্পাদন করবেন।

Comments

আপনি কত ঘন ঘন এটি করছেন তার উপর নির্ভর করে।

— ধনী ব্র্যাডশো

ওপি একটি মডেল পপআপ তৈরি করছে । এই অপারেশনটি প্রতি সেকেন্ডে কয়েক হাজার বার পুনরাবৃত্তি হয় না। পরিবর্তে, এটি প্রতি কয়েক সেকেন্ডে সর্বোচ্চ একবারে পুনরাবৃত্তি হতে পারে। jQuery(html :: String)পদ্ধতিটি ব্যবহার করা পুরোপুরি ঠিক আছে। পরিস্থিতি যদি চরম অস্বাভাবিক না হয় তবে কারও পক্ষে আরও ভাল উপলব্ধি করা সম্ভব হবে না । যে ক্ষেত্রে এটি ব্যবহার করতে পারে তাতে অপ্টিমাইজেশন শক্তি ব্যয় করুন। অতিরিক্তভাবে, jQuery বিভিন্নভাবে গতির জন্য অনুকূলিত হয়েছে optim এর সাথে বুদ্ধিমান জিনিসগুলি করুন এবং এটি দ্রুত হওয়ার জন্য আস্থার তবে-যাচাই করুন।

— yfeldblum

Answer 9

আপনাকে বুঝতে হবে যে উপাদান তৈরির পারফরম্যান্সের তাত্পর্যটি প্রথমে jQuery ব্যবহারের প্রসঙ্গে অপ্রাসঙ্গিক।

মনে রাখবেন, অ্যালিমেন্ট তৈরির আসল উদ্দেশ্য নেই যতক্ষণ না আপনি বাস্তবে এটি ব্যবহার করতে যাচ্ছেন না।

আপনি $(document.createElement('div'))বনাম এর মতো পারফরম্যান্স টেস্টে প্রলুব্ধ হতে পারেন $('<div>')এবং ব্যবহার থেকে দুর্দান্ত পারফরম্যান্স লাভ অর্জন করতে পারেন $(document.createElement('div'))তবে এটি কেবলমাত্র একটি উপাদান যা ডমটিতে এখনও নেই।

যাইহোক, দিনের শেষে, আপনি যে কোনও উপায়ে এলিমেন্টটি ব্যবহার করতে চান তাই আসল পরীক্ষায় f.ex অন্তর্ভুক্ত করা উচিত। .appendTo ();

আসুন দেখুন, আপনি যদি একে অপরের বিরুদ্ধে নিম্নলিখিত পরীক্ষা করে থাকেন:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

আপনি ফলাফল পৃথক লক্ষ্য করবেন। কখনও কখনও একটি উপায় অন্য চেয়ে ভাল পারফরম্যান্স হয়। এবং এটি কেবলমাত্র আপনার কম্পিউটারে পটভূমির কাজের পরিমাণ সময়ের সাথে সাথে পরিবর্তিত হয়।

নিজেকে এখানে পরীক্ষা করুন

সুতরাং, দিনের শেষে, আপনি একটি উপাদান তৈরি করার সবচেয়ে ছোট এবং সর্বাধিক পঠনযোগ্য উপায় চয়ন করতে চান। এইভাবে, কমপক্ষে, আপনার স্ক্রিপ্ট ফাইলগুলি ক্ষুদ্রতম সম্ভব হবে। সম্ভবত এটি ডিওএম এ ব্যবহার করার আগে কোনও উপাদান তৈরির পদ্ধতির চেয়ে পারফরম্যান্স পয়েন্টের আরও গুরুত্বপূর্ণ উপাদান।

Comments

আমি জানি এটি পুরানো, তবে প্রথম উদাহরণে jQuery এর কোনও দরকার নেই:document.getElementById('target).appendChild(document.createElement('div'));

— 18

Answer 10

কেউ ইতিমধ্যে একটি মাপদণ্ড তৈরি করেছেন: jQuery ডকুমেন্ট। ক্রিয়েট এলিমেন্টের সমতুল্য?

$(document.createElement('div')) বড় বিজয়ী।

Answer 11

একটি বিষয় হ'ল এটি করা সহজ হতে পারে:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

তারপরে jquery কলগুলি দিয়ে সেগুলি করতে।

Answer 12

আমি jquery.min v2.0.3 ব্যবহার করছি। নিম্নলিখিতটি ব্যবহার করা আমার পক্ষে ভাল:

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

নিম্নলিখিত হিসাবে:

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

প্রথম কোডের প্রসেসিং সময় দ্বিতীয় কোডের তুলনায় অনেক কম।