আপনার একাধিক $ (নথি) থাকতে পারে .ডিডি (ফাংশন () {…}); বিভাগে?


240

আমার যদি স্টার্টআপে প্রচুর ফাংশন থাকে তবে সেগুলি কি একটিরই অধীনে থাকতে হবে:

$(document).ready(function() {

বা আমার কি একাধিক বিবৃতি থাকতে পারে?


1
মূলত যখন আমাকে একাধিক জেএস ফাইল লোড করতে হয় যেখানে প্রতিটিতে document (ডকুমেন্ট) থাকে .ডিআর (); ফাংশন
আবদুল্লাহ

@ এলওরাকে একটি সাক্ষাত্কারে এই প্রশ্ন জিজ্ঞাসা করা হয়েছিল: ডি ধন্যবাদ
এয়ারনাইওস

উত্তর:


288

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

http://www.learningjquery.com/2006/09/multiple-document-ready

এটি ব্যবহার করে দেখুন:

$(document).ready(function() {
    alert('Hello Tom!');
});

$(document).ready(function() {
    alert('Hello Jeff!');
});

$(document).ready(function() {
    alert('Hello Dexter!');
});

আপনি দেখতে পাবেন এটি এর সমতুল্য, মৃত্যুদন্ড কার্যকর করার আদেশটি নোট করুন:

$(document).ready(function() {
    alert('Hello Tom!');
    alert('Hello Jeff!');
    alert('Hello Dexter!');
});

এটিও লক্ষণীয় যে একটি $(document).readyব্লকের মধ্যে সংজ্ঞায়িত একটি ফাংশন অন্য $(document).readyব্লক থেকে কল করা যায় না , আমি এই পরীক্ষাটি চালিয়েছি:

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
}); 

আউটপুট ছিল:

hello1
something
hello2

25
একাধিক $ (নথি)। প্রস্তুত () বিবৃতি ব্যবহার করার সময় মৃত্যুদণ্ডের আদেশের উপর নির্ভর করা বুদ্ধিমানের কাজ নয়। ইতিমধ্যে মৃত্যুদন্ড কার্যকর করা হয়েছে বা না হয়েছে তার জন্য প্রত্যেককে স্বাধীনভাবে কার্যকর করতে হবে।
জেমস

@ এওপি - আমি জানি না যে কতটা বোধগম্যতা তৈরি করে, যদি সেগুলি কার্যকরভাবে কার্যকর করা না হয় তবে তারা একাধিক $ (নথি) ব্যবহার করে প্রস্তুতি (ব্লকগুলি সম্পূর্ণভাবে ভেঙে দেওয়া হবে) প্রয়োগের প্রসঙ্গে পুরো অর্থহীন।
karim79

7
@ করিম 79৯ অবশ্যই একাধিক স্টার্টআপ উদ্বেগ নিয়ে জটিল বিট কোড লেখার সময় এটির (ও.পি. এর প্রশ্ন) সর্বাধিক প্রযোজ্য - যেমন কিছু কোড যা সর্বদা চালিত হয় যখন লোড শেষ হয় এবং কিছু কিছু যা কেবল কিছু সামগ্রী নোডে প্রয়োজনীয়? এমন পরিস্থিতিতে, প্রসঙ্গটি সিলোড হওয়া উচিত, এবং মৃত্যুদণ্ডের আদেশটি অবিচলিত হওয়া উচিত - অর্ডারের আচরণ নির্বিশেষে পূর্ববর্তীটিকে ওভাররাইট না করে 'ডম প্রস্তুত' ইভেন্টে বরাদ্দ করতে সক্ষম হওয়া একটি দরকারী বৈশিষ্ট্য হয়ে ওঠে।
তেহওয়ালরাস

1
একটি প্রস্তুত ব্লকে সংজ্ঞায়িত কোনও ফাংশন সম্পর্কিত যে কোনও অন্য প্রস্তুত ব্লক থেকে কলযোগ্য নয় - এটি আপনি ফাংশনটি যেভাবে সংজ্ঞায়িত করেন ঠিক এটি সত্য, তবে আপনি যদি এর পরিবর্তে সেসথিং = ফাংশন () {as হিসাবে সংজ্ঞা দেন তবে আপনি এটি কল করতে পারেন can অদ্ভুত, তাই না? jsfiddle.net/f56qsogm এটি এখানে পরীক্ষা করে দেখুন।
ferr

2
আমি মনে করি এটি এর মতো আচরণ করে কারণ এটি উইন্ডো অবজেক্টে ফাংশন যুক্ত করছে যা বিশ্বব্যাপী অ্যাক্সেসযোগ্য। অন্যথায় এটি একটি ঘোষিত ফাংশন যা স্থানীয়ভাবে প্রস্তুত ফাংশনে স্কোপ করা হয়।
ferr

19

আপনি একাধিক ব্যবহার করতে পারেন। তবে আপনি একটি নথির ভিতরেও একাধিক ফাংশন ব্যবহার করতে পারেন ready পাশাপাশি প্রস্তুত:

$(document).ready(function() {
    // Jquery
    $('.hide').hide();
    $('.test').each(function() {
       $(this).fadeIn();
    });

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});

আপনার ঠিক আছে যদি পৃষ্ঠায় সংযুক্ত কোডের সম্পূর্ণ নিয়ন্ত্রণ থাকে। যদি কেউ ইতিমধ্যে পৃষ্ঠার সাথে সংযুক্ত অন্য কোনও ফাইলে এটি লিখে ফেলেছেন, তবে আপনি এটির মতো এটি ঘোষণা করা ঠিক আছে।
জেমস উইজম্যান

আপনি কী বলার চেষ্টা করছেন তা নিশ্চিত নন। তবে আপনি যদি এটি আপনার মাথার ভিতরে রাখেন এবং 15 টি বাহ্যিক জেএস অন্তর্ভুক্ত করেন তবে সমস্ত উইকেটে একটি (বা একাধিক ডকুমেন্ট.লোড) রয়েছে এটি এখনও কাজ করবে যেমন ঠিক আছে। উল্লেখ করার মতো বিষয় হ'ল প্রতিটি ফাংশন / ভেরিয়েবলের স্কুপটি $ (ডকুমেন্ট) এর বন্ধনী বন্ধনী দিয়ে শেষ হয় .ডিডি-ফাংশন।
মিকেল

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

1
আহ, এখন আমি তোমাকে পেয়েছি হ্যাঁ আমি তাতে একমত এটি সম্ভব হয়েছে তা প্রমাণ করার জন্য কেবল একটি উদাহরণ দিয়েছিলেন;)
মিকেল

15

হ্যাঁ আপনি সহজেই একাধিক ব্লক রাখতে পারেন। তাদের মধ্যে নির্ভরতা সম্পর্কে কেবল সাবধান থাকুন কারণ মূল্যায়নের আদেশটি আপনার প্রত্যাশাটি নাও হতে পারে।


11

হ্যাঁ একাধিক document (দস্তাবেজ) .ডিডি () কল করা সম্ভব। তবে আমি মনে করি না যে আপনি কীভাবে তাদের কার্যকর করা হবে তা আপনি জানতে পারবেন। (উৎস)


14
অর্ডারে ডাকা যুক্ত করা হয়েছে
redsquare

ধন্যবাদ, এটি পরিষ্কার করে দেওয়া ভাল, যেহেতু - বিষয়টিতে সাধারণ জ্ঞান থাকা সত্ত্বেও - jQuery প্রস্তুত () পৃষ্ঠাটি আসলে বলতে পারে না আপনি পারবেন কিনা (লেখার সময় :))। এটি কোনও ধরণের লাইনের মধ্যে পড়লে এটি ঠিকঠাকই বোঝায় :Ready handlers bound this way are executed after any bound by the other three methods above.
রেগ সম্পাদনা করুন

5

হ্যাঁ এটি সম্ভব তবে আপনি একটি ডিভ # এমডিআইভি ব্যবহার করতে পারেন এবং উভয়ই ব্যবহার করতে পারেন

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

//and

$("#mydiv").ready(function(){});

2
আকর্ষণীয় ধারণা, তবে এটি আরও ভাল কেন?
টিম

3
একটি ডিভ ব্যবহার समर्थित নয়। যদি কোনও কারণে আপনি এটি করেন তবে আপনি নিজের ঝুঁকিতে এটি করেন: .ডিডি () পদ্ধতিটি কেবলমাত্র বর্তমান নথির সাথে মিলে যাওয়া jQuery অবজেক্টে কল করা যেতে পারে
রেগ সম্পাদনা করুন

3

হ্যাঁ, এটি পুরোপুরি ঠিক আছে ut তবে কারণ ছাড়াই এটি করা এড়ানো। উদাহরণস্বরূপ, আমি যখন এটি আমার জাভাস্ক্রিপ্ট ফাইলগুলি গতিশীলভাবে উত্পন্ন করত তখন ভারতবর্ষের পৃষ্ঠাগুলির চেয়ে বিশ্বব্যাপী সাইটের নিয়মগুলি আলাদাভাবে ঘোষণা করতে ব্যবহার করেছিলাম তবে আপনি যদি এটির উপর থেকে চালিয়ে যান তবে এটি পড়তে অসুবিধা হবে।

এছাড়াও আপনি অন্য jQuery(function(){});কল থেকে কিছু পদ্ধতি অ্যাক্সেস করতে পারবেন না যাতে এটি অন্য কারণ হতে চান না।

পুরানো সাথে window.onloadযদিও আপনি প্রতিবার কোনও ফাংশন নির্দিষ্ট করে পুরানোটিকে প্রতিস্থাপন করবেন।


2

হ্যা, তুমি পারো.

একাধিক ডকুমেন্ট প্রস্তুত বিভাগগুলি বিশেষত দরকারী যদি আপনার যদি একই পৃষ্ঠাতে ব্যবহৃত মডিউলগুলি ব্যবহার করে থাকে। পুরানো window.onload=funcঘোষণার সাথে, যতবার আপনি কল করার জন্য কোনও ফাংশন নির্দিষ্ট করেছেন, এটি পুরানোটিকে প্রতিস্থাপন করেছে।

এখন সুনির্দিষ্ট সমস্ত ফাংশনগুলি সারিবদ্ধ / স্ট্যাকড (কোনওটি নিশ্চিত করতে পারে?) তারা কোন নথির প্রস্তুত বিভাগে সুনির্দিষ্ট করে নির্বিশেষে।


হ্যাঁ, এটি সত্য, ফাংশনগুলি পূর্ববর্তী document (নথি) প্রতিস্থাপনের চেয়ে রেটারে সারিযুক্ত।
ডিকসি

2

আমি মনে করি যেতে যাওয়ার আরও ভাল উপায় হ'ল নামযুক্ত ফাংশনগুলিতে স্যুইচ করা (সেই বিষয়ে আরও তথ্যের জন্য এই ওভারফ্লোটি পরীক্ষা করুন) । এইভাবে আপনি তাদের একক ইভেন্ট থেকে কল করতে পারেন।

তাই ভালো:

function firstFunction() {
    console.log("first");
}

function secondFunction() {
    console.log("second");
}


function thirdFunction() {
    console.log("third");
}

এইভাবে আপনি তাদের একক প্রস্তুত ফাংশনে লোড করতে পারেন।

jQuery(document).on('ready', function(){
   firstFunction();
   secondFunction();
   thirdFunction();

});

এটি নিম্নলিখিতটি আপনার কনসোল.লগে আউটপুট দেবে:

first
second
third

এইভাবে আপনি অন্যান্য ইভেন্টগুলির জন্য ফাংশনগুলি পুনরায় ব্যবহার করতে পারেন।

jQuery(window).on('resize',function(){
    secondFunction();
});

কার্যকারী সংস্করণটির জন্য এই ফিডলটি দেখুন


0

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


0

এমনকি অন্তর্ভুক্ত এইচটিএমএল ফাইলগুলির অভ্যন্তরে বাসা নথির প্রস্তুত ফাংশনগুলিও করতে পারেন। এখানে jquery ব্যবহার করে একটি উদাহরণ দেওয়া হয়েছে:

ফাইল: test_main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    {
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
    } );
</script>

</body>
</html>

ফাইল: test_e એમ્બેડ.html

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    {
        console.log( 'test_embed.html READY' );
    } );
</script>

কনসোল আউটপুট:

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

ব্রাউজার শো:

test_embed.html


0

আপনি এটি নিম্নলিখিত উপায়েও করতে পারেন:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
     $("#hide").click(function(){
     $("#test").hide();
     });
     $("#show").click(function(){
     $("#test").show();
     });
 });
</script>
</head>

<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>

পূর্ববর্তী উত্তরগুলি একক .ডিডি ব্লকের ভিতরে একাধিক নামযুক্ত ফাংশন ব্যবহার করে বা .ডিডি ব্লকের একটি একক নামবিহীন ফাংশন, রেডি ব্লকের বাইরে অন্য নামের ফাংশন ব্যবহার করে দেখায়। .ডি ব্লকের ভিতরে একাধিক নামবিহীন ফাংশন রাখার উপায় ছিল কিনা তা নিয়ে গবেষণা করার সময় আমি এই প্রশ্নটি পেয়েছি - বাক্য গঠনটি সঠিকভাবে পেলাম না। অবশেষে আমি এটি আবিষ্কার করেছি এবং আশা করেছি যে আমার পরীক্ষার কোডটি পোস্ট করার মাধ্যমে আমি অন্যদের আমার কাছে একই প্রশ্নের উত্তর খুঁজতে সহায়তা করব


অন্যান্য উত্তরগুলির চেয়ে এটি আলাদা কী আপনি বর্ণনা করতে পারেন?
স্টিফেন রাউচ

নিশ্চিত: পূর্ববর্তী উত্তরগুলি একক .ডিডি ব্লকের ভিতরে একাধিক নামযুক্ত ফাংশন ব্যবহার করে বা .ডিডি ব্লকের একক নামহীন ফাংশনটি ব্যবহার করে .ডিডি ব্লকের বাইরে অন্য নামের ফাংশন ব্যবহার করে দেখিয়েছে। .ডি ব্লকের ভিতরে একাধিক নামবিহীন ফাংশন রাখার উপায় ছিল কিনা তা নিয়ে গবেষণা করার সময় আমি এই প্রশ্নটি পেয়েছি - বাক্য গঠনটি সঠিকভাবে পেলাম না। অবশেষে আমি এটি আবিষ্কার করেছি এবং আশা করেছি যে আমার পরীক্ষার কোড পোস্ট করে আমি অন্যদেরকে আমার যে একই প্রশ্নের উত্তর পেয়েছিলাম তা খুঁজতে সাহায্য করবে।
জেপ্রিস

দুঃখিত, আমি প্রশ্নে বোঝাতে চেয়েছি পাঠ্য বাক্সের নীচে বামদিকে একটি সম্পাদনা বোতাম রয়েছে। আপনার সমাধান কেন পৃথক / উন্নত তা বর্ণনা করা এটিকে আরও উত্তরের উত্তর হিসাবে তুলনামূলকভাবে ভবিষ্যতের পাঠক আরও দ্রুত "কেন" বুঝতে পারবেন। ধন্যবাদ।
স্টিফেন রাউচ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.