আমার কখন jQuery এর ডকুমেন্ট.ডিডি ফাংশন ব্যবহার করা উচিত?

107

আমাকে ডকুমেন্টটি ব্যবহার করতে বলা হয়েছিল।আমি যখন প্রথম জাভাস্ক্রিপ্ট / জিকুয়েরি ব্যবহার শুরু করি তবে কেন আমি সত্যিই তা শিখিনি।

JQuery এর মধ্যে জাভাস্ক্রিপ্ট / jquery কোড মোড়ানোর জন্য যখন বোধগম্য হয় তখন সে সম্পর্কে কেউ কিছু প্রাথমিক নির্দেশিকা সরবরাহ করতে পারে document.ready?

আমি আগ্রহী কিছু বিষয়:

jQuery এর .on()পদ্ধতি: আমি .on()AJAX এর জন্য পদ্ধতিটি বেশ খানিকটা ব্যবহার করি (সাধারণত গতিশীলভাবে তৈরি DOM উপাদানগুলিতে)। করা উচিত .on()ক্লিক হ্যান্ডেলার সবসময় হতে ভিতরে document.ready ?
পারফরম্যান্স: বিভিন্ন জাভাস্ক্রিপ্ট / jQuery অবজেক্টগুলি ডকুমেন্টের অভ্যন্তরে বা বাইরে রাখা কি আরও পারফরম্যান্ট ready
অবজেক্ট স্কোপ: পূর্ববর্তী পৃষ্ঠার ডকুমেন্টের ভিতরে থাকা অজ্যাক্স-বোঝা পৃষ্ঠাগুলি অ্যাক্সেস করতে পারে না ready প্রস্তুত , সঠিক? ডকুমেন্টের বাইরের জিনিসগুলিতে তারা কেবল অ্যাক্সেস করতে পারে ready

আপডেট: একটি সর্বোত্তম অনুশীলন অনুসরণ করতে, আমার সমস্ত জাভাস্ক্রিপ্ট (jQuery লাইব্রেরি এবং আমার অ্যাপ্লিকেশন কোড) আমার এইচটিএমএল পৃষ্ঠার নীচে এবং আমি deferআমার এজেএক্স-বোঝা পৃষ্ঠাগুলিতে jQuery- সহ স্ক্রিপ্টগুলিতে বৈশিষ্ট্যটি ব্যবহার করছি যাতে আমি এই পৃষ্ঠাগুলিতে jQuery লাইব্রেরি অ্যাক্সেস করতে পারেন।

— টিম পিটারসন
সূত্র

2

কারণ যদি ডিওএম প্রস্তুত না হয় তবে আপনি অপ্রত্যাশিত ফলাফল পেতে পারেন, এগুলিই।

— রবার্ট হার্ভে

1

২.- আচ্ছা আমি কেবল ডিবাগ করার জন্য বাইরে ব্যবহার করি এবং কনসোল দ্বারা কিছু

— ভেরি

@ রবার্টহরভে কী ধরণের "অপ্রত্যাশিত" ফলাফল? আপনি একটি উদাহরণ প্রদান করতে পারেন?

— টিম পিটারসন

3

আপনি এমন কোনও উপাদান বা বৈশিষ্ট্য পরিবর্তন করতে চেষ্টা করেছেন যা এটি এখনও ডিওমে তৈরি করে নি।

— রবার্ট হার্ভে

143

সহজ কথায়,

$(document).readyএটি এমন একটি ইভেন্ট যা documentপ্রস্তুত হওয়ার পরে আগুন জ্বলে ওঠে ।

ধরুন আপনি নিজের jQuery কোডটি headবিভাগে রেখেছেন এবং কোনও domউপাদান (একটি অ্যাঙ্কর, একটি ইম্জি ইত্যাদি) অ্যাক্সেস করার চেষ্টা করছেন , আপনি এটিতে অ্যাক্সেস করতে পারবেন না কারণ htmlউপরে থেকে নীচে পর্যন্ত ব্যাখ্যা করা হয়েছে এবং আপনার jQuery কোডটি উপস্থিত করার সময় আপনার এইচটিএমএল উপাদান উপস্থিত নেই চালানো হয়।

এই সমস্যাটি কাটিয়ে উঠতে, আমরা প্রতিটি jQuery / জাভাস্ক্রিপ্ট কোড (যা DOM ব্যবহার করে) $(document).readyফাংশনের ভিতরে রাখি যা যখন সমস্ত domউপাদান অ্যাক্সেস করা যায় তখন কল হয়ে যায় called

এবং এই কারণটি হ'ল, যখন আপনি আপনার jQuery কোডটি নীচে রাখেন (সমস্ত ডোম উপাদানগুলির পরে, ঠিক আগে </body>), তখন কোনও প্রয়োজন নেই$(document).ready

আমি উপরে বর্ণিত একই কারণে আপনি যখন পদ্ধতিটি ব্যবহার করেন কেবল তখন onভিতরে অভ্যন্তরীণ পদ্ধতি রাখার দরকার নেই ।$(document).readyondocument

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

সম্পাদনা

মন্তব্য থেকে,

$(document).readyচিত্র বা স্ক্রিপ্টগুলির জন্য অপেক্ষা করে না। মধ্যে বড় পার্থক্য এখানেই $(document).readyএবং$(document).load
কেবলমাত্র কোড যা ডোম অ্যাক্সেস করে তা হ্যান্ডলারের প্রস্তুত হওয়া উচিত। যদি এটি প্লাগইন হয় তবে এটি প্রস্তুত ইভেন্টে থাকা উচিত নয়।

— Jashwant
সূত্র

@ দিপাকস হ্যাঁ, না কেন? আমরা শুধু ব্যবহার করতে খুব ব্যবহৃত হয় $(document).ready। দেখুন এই

— Jashwant

যতক্ষণ আপনি jQuery লোড করেন headএবং উপাদানগুলি ম্যানিপুলেটেড হওয়ার পরে আপনি স্ক্রিপ্ট করেন ততক্ষণ document.readyপ্রয়োজন হয় না। চিত্রগুলি যদিও একটি বিশেষ কেস ...

— এলক্ল্যানাররা

@ এলক্লানার্স আমার আপডেট হওয়া প্রশ্নটি দেখুন। আমি ঠিক এর পরে আমার অ্যাপ্লিকেশন-নির্দিষ্ট কোড দিয়ে আমার HTML পৃষ্ঠার নীচে jQuery লোড করছি।

— টিম পিটারসন

@ যশবন্ত কীভাবে ডম রেডি বনামের পারফরম্যান্সের পার্থক্য সম্পর্কে? এগুলি কি প্রাসঙ্গিক?

— টিম পিটারসন

1

আমরা সব jQueryকোড প্রস্তুত হ্যান্ডলারের মধ্যে রাখি না । কেবলমাত্র কোড যা ডোম অ্যাক্সেস করে। যদি এটি প্লাগইন হয় তবে এটি ready ইভেন্টে হওয়া উচিত নয়

— হুয়ান মেন্ডেস

7

উত্তর:

jQuery এর .on () পদ্ধতি: আমি AJAX এর জন্য .on () পদ্ধতিটি বেশ খানিকটা ব্যবহার করি (গতিশীলভাবে DOM উপাদান তৈরি করে)। .On () ক্লিক হ্যান্ডলারগুলি সর্বদা ডকুমেন্টের অভ্যন্তরে থাকা উচিত?

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

পারফরম্যান্স: বিভিন্ন জাভাস্ক্রিপ্ট / jQuery অবজেক্টগুলি ডকুমেন্টের অভ্যন্তরে বা বাইরে রাখা কি আরও পারফরম্যান্ট ready

এটা নির্ভর করে. হ্যান্ডলারগুলিকে সংযুক্ত করতে এটি একই পরিমাণ সময় নেবে, আপনি পৃষ্ঠাটি লোড হওয়ার সাথে সাথে এটি ঘটতে চাইলে বা পুরো ডকটি লোড না হওয়া পর্যন্ত অপেক্ষা করতে চান তা কেবল নির্ভর করে। সুতরাং এটি পৃষ্ঠায় আপনি কী করছেন সেগুলি নির্ভর করবে।

অবজেক্ট স্কোপ: পূর্ববর্তী পৃষ্ঠার ডকুমেন্টের ভিতরে থাকা অজ্যাক্স-বোঝা পৃষ্ঠাগুলি অ্যাক্সেস করতে পারে না ready প্রস্তুত, সঠিক? ডকুমেন্টের বাইরের জিনিসগুলিতে তারা কেবল অ্যাক্সেস করতে পারে ready

এটি মূলত এটি নিজস্ব ফাংশন তাই এটি কেবলমাত্র বিশ্বব্যাপী ঘোষিত ঘোষিত যুদ্ধগুলি (সমস্ত ফাংশনের বাইরে / উপরে) বা এর সাথে অ্যাক্সেস করতে পারে window.myvarname = '';

— জাস্টিন
সূত্র

6

আপনি নিরাপদে jQuery ব্যবহার করার আগে আপনাকে নিশ্চিত করতে হবে যে পৃষ্ঠাটি এমন একটি রাজ্যে রয়েছে যেখানে এটি ম্যানিপুলেট করার জন্য প্রস্তুত । JQuery দিয়ে, আমরা আমাদের কোডটি একটি ফাংশনে রেখে এবং পরে সেই ফাংশনটি পাস করে এটি সম্পাদন করি $(document).ready()। আমরা যে ফাংশনটি পাস করি তা কেবল একটি অনামী ফাংশন হতে পারে ।

$(document).ready(function() {  
    console.log('ready!');  
});

এটি নথিটি প্রস্তুত হয়ে যাওয়ার পরে আমরা .dre () এ যাব সেই ফাংশনটি চালাবে। এখানে কি হচ্ছে? আমরা আমাদের পৃষ্ঠার ডকুমেন্ট থেকে jQuery অবজেক্ট তৈরি করতে document (ডকুমেন্ট) ব্যবহার করছি এবং তারপরে object অবজেক্টে .ডিআর () ফাংশনটি কল করে, এটি কার্যকর করতে চাই এমন ফাংশনটি পাস করছি।

যেহেতু এটি এমন কিছু যা আপনি নিজেকে অনেক কিছু করতে দেখেন, তাই আপনি যদি পছন্দ করেন তবে এর জন্য একটি শর্টহ্যান্ড পদ্ধতি রয়েছে - $ () ফাংশনটি alias (নথি) এর জন্য একটি উপাধিকার হিসাবে ডাবল ডিউটি করে ready

$(function() {  
    console.log('ready!');  
});

এটি একটি ভাল পঠন: জ্যাকারি ফান্ডামেন্টাল

— টম সার্ডু
সূত্র

3

(function($){ })(jQuery);আপনার কোডটি এমনভাবে গুটিয়ে যায় যাতে বিভ্রান্ত হওয়ার দরকার নেই যাতে closure সেই বন্ধের ভিতরে jQuery হয়

— জন ম্যাগনোলিয়া

3

.ডিডি () - ডিওএম সম্পূর্ণরূপে লোড হয়ে গেলে কার্যকর করার জন্য একটি ফাংশন নির্দিষ্ট করুন।

$(document).ready(function() {
  // Handler for .ready() called.
});

সমস্ত jQuery পদ্ধতির তালিকা এখানে

Rod (দস্তাবেজ) উপস্থাপন উপর পড়ুন। প্রস্তুত ()

— দীপক
সূত্র

3

বাস্তববাদী হওয়ার document.readyজন্য, ডমকে সঠিকভাবে চালিত করা ছাড়া অন্য কোনও কিছুর জন্য প্রয়োজন হয় না এবং এটি সর্বদা প্রয়োজন হয় না বা সেরা বিকল্প। আমার অর্থ হ'ল আপনি যখন একটি বড় jQuery প্লাগইন তৈরি করেন উদাহরণস্বরূপ আপনি কোডটি জুড়ে এটি খুব কমই ব্যবহার করেন কারণ আপনি এটি শুকনো রাখার চেষ্টা করছেন, তাই আপনি DOM কে ম্যানিপুলেট করে এমন পদ্ধতিগুলিতে যতটা সম্ভব বিমূর্ত করেন তবে বোঝানো হচ্ছে পরে. আপনার সব কোড শক্তভাবে শুধুমাত্র পদ্ধতিতে উদ্ভাসিত ইন্টিগ্রেটেড থাকে, তখন document.readyসাধারণত initযেখানে সব DOM জাদু ঘটবে। আশা করি এটি আপনার প্রশ্নের উত্তর দেয়।

— elclanrs
সূত্র

0

আপনার সমস্ত ক্রিয়া ডকুমেন্টে আবদ্ধ করা উচিত ready প্রস্তুতি, কারণ দস্তাবেজটি সম্পূর্ণ লোড না হওয়া পর্যন্ত আপনার অপেক্ষা করা উচিত।

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

এই ফাংশনগুলি হ'ল যেখানে আপনি ইভেন্টগুলি এবং ক্রিয়া আইটেমগুলিকে আবদ্ধ করেছেন।

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}

— পুলকিত মিত্তাল
সূত্র

0

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

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

এটা কাজ করে না. তারপরে আমি jQuery কোডটি inside (ডকুমেন্ট) এর ভিতরে রেখেছি এবং এটি পুরোপুরি কাজ করেছে। এটা এখানে.

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});

— সেফার আহমেদ
সূত্র

-2

তিনি প্রস্তুত ইভেন্টটি ঘটে যখন ডম (ডকুমেন্ট অবজেক্ট মডেল) লোড করা হয়।

যেহেতু এই ইভেন্টটি নথিটি প্রস্তুত হওয়ার পরে ঘটে, তাই অন্যান্য সমস্ত jQuery ইভেন্ট এবং ফাংশন রাখার জন্য এটি ভাল জায়গা। উপরের উদাহরণে মত।

প্রস্তুত () পদ্ধতিটি প্রস্তুত ইভেন্ট যখন ঘটে তখন কী ঘটে তা নির্দিষ্ট করে।

টিপ: প্রস্তুত () পদ্ধতিটি একসাথে ব্যবহার করা উচিত নয়।

— শ্রীকান্ত শীলেদার
সূত্র