jQuery: পৃষ্ঠার নীচে বাহ্যিক জেএস হলে ডকুমেন্ট.ডিআর কেন ব্যবহার করবেন?


88

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

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

যাইহোক, আমি যখন প্রস্তুত ফাংশনটি সরিয়ে ফেলি এবং পদ্ধতিগুলিকে স্ট্রেট-আপ বলি, সমস্ত কিছু ঠিক একইভাবে কাজ করে তবে উল্লেখযোগ্যভাবে দ্রুত চালিত হয় - প্রায় পুরো দ্বিতীয়টি খুব সুন্দর একটি বেসিক ফাইলে দ্রুত! যেহেতু ডকুমেন্টটি এই মুহুর্তে লোড করা উচিত (সমস্ত মার্কআপ যেমন স্ক্রিপ্ট ট্যাগগুলির আগে আসে), তখনও প্রস্তুত ইভেন্টটি ব্যবহার করার কোনও ভাল কারণ আছে?


9
আকর্ষণীয় প্রশ্ন। দুঃখের বিষয় হ'ল বর্তমান উত্তরগুলি সত্যই প্রশ্নের উত্তর দেয় না এবং আমার কোনও ভাল উত্তরও নেই। সম্ভবত এটি প্রশ্নটির পুনঃব্যবস্থাপনা করতে সহায়তা করবে: "ফাইলের শেষে জাভাস্ক্রিপ্ট ডকুমেন্ট স্থাপন করা হচ্ছে গ্যারান্টির ফাঁসির আগে DOM
চাপানো হবে

উত্তর:


116

দুর্দান্ত প্রশ্ন।

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

আমি ধরে নিচ্ছি যে আপনি তত্ক্ষণাত্ আপনার স্ক্রিপ্টগুলিতে ( documentবা যত সহজ সরল কিছু document.getElementById) চালাচ্ছেন সেগুলিতে আপনি ডমকে উল্লেখ করছেন । আমি ধরে নিচ্ছি যে আপনি কেবল এই [ডোম-রেফারেন্সিং] ফাইলগুলি সম্পর্কে জিজ্ঞাসা করছেন। আইওডাব্লু, লাইব্রেরি স্ক্রিপ্ট বা স্ক্রিপ্ট যা আপনার ডোম-রেফারেন্সিং কোডের (jQuery এর মতো) পৃষ্ঠার আগে স্থাপন করা দরকার।

আপনার প্রশ্নের উত্তর দেওয়ার জন্য : আপনি যদি পৃষ্ঠার নীচে আপনার ডোম-রেফারেন্সিং স্ক্রিপ্টগুলি অন্তর্ভুক্ত করেন, না, আপনার প্রয়োজন নেই $(document).ready

ব্যাখ্যা : থাম্ব নিয়মের মতো সম্পর্কিত সম্পর্কিত বাস্তবায়নগুলির সহায়তা ছাড়াই হ'ল: পৃষ্ঠার মধ্যে ডোম উপাদানগুলির সাথে ইন্টারেক্ট করে এমন যে কোনও কোড পৃষ্ঠাতে নীচে উল্লেখ করা উচিত: সবচেয়ে সহজ কাজটি হচ্ছে কোডটি বন্ধ হওয়ার আগে স্থাপন করা । দেখুন এখানে এবং এখানে । এটি IE এর ভয়ঙ্কর "অপারেশন বাতিল" ত্রুটির আশপাশেও কাজ করে ।"onload"$(document).ready</body>

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

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

সবশেষে, এটি সমস্ত ডিওএম-রেফারেন্সিং কোডটিতে জ্যাম দেওয়ার জন্য "সর্বোত্তম অনুশীলন" হিসাবে ব্যবহৃত হত window.onload, তবে এটি ডকুমেন্টের কারণে কার্যকরভাবে $(document).readyবাস্তবায়িত হয়েছিল ।

এগুলি সমস্ত $(document).readyখুব তাড়াতাড়ি DOM উপাদানগুলির রেফারেন্সিংয়ের সমস্যাটির জন্য আরও উন্নততর, ব্যবহারিক এবং সাধারণ সমাধান হিসাবে যুক্ত করে।


4
"আপনি যদি পৃষ্ঠার নীচে আপনার ডোম-রেফারেন্সিং স্ক্রিপ্টগুলি অন্তর্ভুক্ত করেন, না, আপনার $ (ডকুমেন্ট) লাগবে না। জাভাস্ক্রিপ্ট চালানোর আগে সমস্ত সিএসএস ডাউনলোড এবং প্রক্রিয়াজাত করা হয়। এই সত্য নাও হতে পারে; ব্রাউজারগুলি সমান্তরালে বাহ্যিক ফাইলগুলি ডাউনলোড করতে পারে।
পাওয়ারলর্ড

8
সম্পূর্ণরূপে সঠিক নয়, আপনার কাছে যদি কোনও deferস্ক্রিপ্ট নথি প্রস্তুত থাকে তবে তা নিশ্চিত হয়ে যাবে যে তারা প্রস্তুত কোডের পূর্বে কার্যকর করেছে। দেখুন: w3.org/TR/html5/the-end.html#the-end
স্যাম
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.