জুমারি $ (দস্তাবেজ) বনাম জুমকি d (দস্তাবেজ)। প্রস্তুত ()?


100

আমি প্রয়োজনীয় জেএস ব্যবহার করছি এবং ডিওএম প্রস্তুতের জন্য কিছু শুরু করার দরকার। এখন, RequireJS domReadyপ্লাগইন সরবরাহ করে , তবে আমাদের কাছে ইতিমধ্যে jQuery রয়েছে $(document).ready(), যেহেতু আমার কাছে jQuery প্রয়োজন তাই আমার কাছে উপলব্ধ।

সুতরাং আমি দুটি বিকল্প পেয়েছি:

  1. domReadyপ্লাগইনটি ব্যবহার করুন :

    require(['domReady'], function (domReady) {
        domReady(function () {
            // Do my stuff here...
        });
    });
    
  2. ব্যবহার $(document).ready():

    $(document).ready(function() {
        // Do my stuff here...
    });
    

আমার কোনটি বেছে নেওয়া উচিত এবং কেন?

দুটি বিকল্পই প্রত্যাশার মতো কাজ করছে বলে মনে হচ্ছে। আমি jQuery এর একটিতে আত্মবিশ্বাসী নই কারণ প্রয়োজনীয় জেএস এর জাদুটি করছে; এটি হ'ল যেহেতু প্রয়োজনীয় জেএস গতিশীলভাবে স্ক্রিপ্টগুলি যুক্ত করবে, তাই আমি আশঙ্কা করছি যে ডায়নামিকভাবে অনুরোধ করা সমস্ত স্ক্রিপ্টগুলি লোড হওয়ার আগে ডম প্রস্তুত হতে পারে। domReadyযখনই আমার কাছে ইতিমধ্যে জিকুয়ের প্রয়োজন আছে তখন প্রয়োজন জেএসএস অতিরিক্ত জেএসের উপর একটি বোঝা যুক্ত করবে ।

প্রশ্ন

  • domReadyযখন আমরা জিকুয়েরি রাখতে পারি তখন প্রয়োজনীয় জেএস কেন একটি প্লাগইন সরবরাহ করে $(document).ready();? অন্য নির্ভরতা অন্তর্ভুক্ত করার কোনও সুবিধা আমি দেখছি না।
  • যদি এটি কেবল কোনও প্রয়োজন খাওয়ানোর জন্য, তবে ক্রস ব্রাউজার এজেএক্সের জন্য কেন সরবরাহ করবেন না?

আমি যতদূর জানি, একটি মডিউল যা domReadyডকুমেন্টটি প্রস্তুত হওয়ার পরে আনা বা কার্যকর করা হবে না এবং আপনি jQuery এর জন্য প্রয়োজনীয় একই কাজটি করতে পারেন:

require(['jQuery'], function ($) {
    $(document).ready(function () {
        // Do my stuff here...
    });
});

আমার প্রশ্নের আরও স্পষ্ট করে বলার জন্য: প্রয়োজনীয় domReadyবা এর মধ্যে পার্থক্য কী jQuery?


4
I am not confident in jquery's dom readyআমি এটি আক্রমণাত্মক হিসাবে চিহ্নিত করতে চাই:p
ডাকায়েত

4
jQuery এর ডোম প্রস্তুত পুরোপুরি নির্ভরযোগ্য, এমনকি আইই তেও। কয়েক মিলিয়ন মানুষ প্রতিদিন না জেনে এটি ব্যবহার করে ;-)
জন ডভোরাক

4
আপনার scriptট্যাগগুলি কোথায় চলে আপনি তার নিয়ন্ত্রণে রয়েছেন বা আপনি যে লাইব্রেরি / প্লাগ-ইন লিখছেন যা অন্যান্য লোকেরা ব্যবহার করবেন (এবং তাই তারা scriptমার্কআপে থাকা ট্যাগগুলির অবস্থানের নিয়ন্ত্রণে আছেন )?
টিজে ক্রাউডার

4
ওহ godশ্বর .. সম্পূর্ণ প্রসঙ্গে এটি পড়ুন। I am not confident in jquery's dom ready because requirejs is doing its magic.যেহেতু, প্রয়োজন হ'ল সীমাবদ্ধ স্থানীয় সুযোগে jquery encapsulating। কথাটি নয়। (যতদূর প্রশ্ন সম্পর্কিত)
যুগল জিন্দল

4
ধন্যবাদ, সম্পাদনার জন্য @ টিজে ক্রাউডার।
যুগল জিন্দল

উত্তর:


91

দেখে মনে হচ্ছে যে সমস্ত মূল পয়েন্ট ইতিমধ্যে হিট হয়েছে, তবে কয়েকটি বিবরণ ফাটল ধরেছে। প্রধানত:

domReady

এটি একটি প্লাগইন এবং একটি মডিউল উভয়ই। আপনি যদি এটিকে প্রয়োজনীয় অ্যারে ডাব্লু / ট্রেলিংয়ের সাথে অন্তর্ভুক্ত করেন তবে ডাব্লু / ডিওএম !ইন্টারেক্ট করার জন্য এটি "নিরাপদ" না হওয়া পর্যন্ত আপনার মডিউলটি কার্যকর করা হবে না:

define(['domReady!'], function () {
    console.info('The DOM is ready before I happen');
});

নোট করুন যে লোডিং এবং এক্সিকিউটিভ পৃথক; আপনি যত তাড়াতাড়ি সম্ভব আপনার সমস্ত ফাইল লোড করতে চান, এটি সময় সংবেদনশীল সামগ্রীর সম্পাদন।

যদি আপনি এটি বাদ দেন !, তবে এটি কেবলমাত্র একটি সাধারণ মডিউল যা কোনও ফাংশন হিসাবে ঘটে, যা একটি কলব্যাক নিতে পারে যা DOM এর সাথে যোগাযোগের জন্য নিরাপদ হওয়ার পূর্বে কার্যকর হয় না:

define(['domReady'], function (domReady) {
    domReady(function () {
        console.info('The DOM is ready before I happen');
    });
    console.info('The DOM might not be ready before I happen');        
});

প্লাগইন হিসাবে domReady ব্যবহার করার সময় সুবিধা

যে কোডটি এমন কোনও মডিউলে নির্ভর করে যা ঘুরে ফিরে নির্ভর করে domReady! তার একটি খুব উল্লেখযোগ্য সুবিধা রয়েছে: এটি ডিওএম প্রস্তুত হওয়ার অপেক্ষা রাখে না!

বলুন যে আমাদের কোডের একটি ব্লক রয়েছে, এ, এটি একটি মডিউল, বি এর উপর নির্ভর করে domReady!। মডিউল বি ডোম প্রস্তুত হওয়ার আগে লোডিং শেষ করবে না। ঘুরেফিরে, বি লোড হওয়ার আগে চলবে না।

আপনি যদি domReadyবি তে নিয়মিত মডিউল হিসাবে ব্যবহার করেন তবে এ এর ​​উপর নির্ভর করা domReadyযেমন প্রয়োজন তেমনি domReady()ফাংশন কলের অভ্যন্তরে এর কোডটি মোড়ানোও প্রয়োজন ।

তদ্ব্যতীত, এর অর্থ এই domReady!যে একই সুবিধাটি উপভোগ করে $(document).ready()

DomReady এবং $ (দস্তাবেজ) এর মধ্যে পার্থক্যগুলি পুনরায় করুন ready

DOM মূলত একইভাবে প্রস্তুত কিনা / তা দু'জনেই শুকিয়ে যান।

ভুল সময়ে jQuery গুলি ছোঁড়ার ভয়

jQuery করার আগে DOM লোড হওয়া সত্ত্বেও jQuery যে কোনও প্রস্তুত কলব্যাকের আগুন জ্বালিয়ে দেবে (আপনার কোডটি প্রথমে যা ঘটে সেদিকে খেয়াল করা উচিত নয়)।


4
সুন্দরী, এটাই আমি খুঁজছিলাম। যুক্তিসঙ্গত, ভাল সমর্থিত।
যুগাল জিন্ডল

খুশি আমি সাহায্য করতে পারলাম :-)
fncomp

@ YugalJindle অনুগ্রহের জন্য অনুপস্থিত কিছু আছে? :)
fncomp

আপনি যা লিখেছেন আমি কেবল তা পরীক্ষা করে দেখছিলাম - এখানে আপনি যান!
যুগাল জিন্ডল

DomReady প্লাগইন কোড ( github.com/requirejs/domReady/blob/master/domReady.js ) এর দিকে তাকিয়ে আপনি কেন এটিকে 'ডমরেডি' লোড করতে হবে তার কোনও কারণ আমি দেখতে পাচ্ছি না! 'domReady' এর পরিবর্তে - আপনি কি আমাকে কোডটির এমন একটি বিন্দুতে নির্দেশ করতে পারেন যা আচরণের পরিবর্তনের কারণ?
জেজ

20

আপনার মূল প্রশ্নের উত্তর দেওয়ার একটি প্রচেষ্টা:

কেন আমরা requirejsএকটি domReadyjquery এর থাকতে পারে যখন একটি প্লাগইন সরবরাহ করে $(document).ready();?

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

পার্থক্যটি সূক্ষ্ম বলে মনে হতে পারে তবে এটি ভেবে দেখুন: আমার একটি মডিউল রয়েছে যা কোনওভাবেই ডিওএমের সাথে মিলিত হওয়া দরকার, তাই আমি হয় domReadyমডিউল সংজ্ঞায়নের সময় এটির উপর নির্ভর করে এবং দম্পতি করতে পারি, বা $(document).ready()এর শেষে একটি লিখে রাখতে পারি put মডিউলটির জন্য একটি ইন ফাংশনে একটি কলব্যাক সহ। আমি প্রথম পদ্ধতির ক্লিনার কল করব।

এদিকে, আমার যদি $(document).ready()ডিওএম প্রস্তুত হওয়ার সাথে সাথে ঠিকঠাক হওয়ার দরকার হয় তবে ঘটনাটি হবে, যেহেতু বিশেষত প্রয়োজনীয়তা জেএসের লোডিং মডিউলগুলি করা হচ্ছে তার উপর নির্ভর করে না, আপনি যে কোডটির উপর নির্ভরশীলতা সরবরাহ করেছেন provided এটি থেকে কলিং পূরণ করা হয়।

আপনার প্রয়োজনীয়ভাবে jQuery এর সাথে RequireJS ব্যবহার করবেন না তাও বিবেচনা করার মতো। যে কোনও লাইব্রেরি মডিউল যা ডম অ্যাক্সেসের প্রয়োজন (তবে jQuery এর উপর নির্ভর করে না) তারপরেও এটি ব্যবহার করে কার্যকর হবে domReady


domReadyপ্রয়োজনীয়দের জন্য নির্ভরতা নয়। আপনি যদি domReadyডকুমেন্টরেডি ইভেন্টের জন্য ব্যবহার করেন তবে কোডটির জন্য নির্ভরতা হবে । এছাড়াও আপনি বিভ্রান্ত মনে হচ্ছে।
যুগাল জিন্ডল

4
দুর্দান্ত উত্তর এবং সূক্ষ্মতার জন্য একটি গুরুত্বপূর্ণ ইঙ্গিত যা অনেক বিকাশকারী প্রায়শই বুঝতে পারেন না (নিজেকে সহ ;-))।
গোলো রোডেন

4
ইউগাল, আমি domReadyনির্ভরতা হিসাবে উল্লেখ করছি , কারণ এটি এভাবেই ব্যবহৃত হয়। প্রয়োজনীয় জেএস এর নির্ভরতা হিসাবে নয়, এটি ব্যবহৃত মডিউলটির। হতে পারে আমার পাঠ্যে আমার সেই পরিষ্কার হওয়া উচিত, কীভাবে আপনার জন্য পরামর্শ আছে?
গার্ট সান্দার্বি

প্রশ্নের আপডেট 2 দেখুন । আমরা একই পৃষ্ঠায় নাও থাকতে পারি।
যুগল জিন্দল

ইউগল, আপনি যদি মুলটুল ব্যবহার করেন? কুক্সডু? কিছু jQuery না? RequireJS jQuery এর সাথে বিবাহিত নয়, যদিও তারা স্বীকার করেছেন সত্যই একসাথে খুব ভাল কাজ করে work
গার্ট সান্দার্বি

6

উপস্থিতি অনুসারে আপনার বুলেটের উত্তর দেওয়া:

  • তারা উভয়ই একই কাজ সম্পাদন করে
  • যদি আপনার কোনও কারণে jquery সম্পর্কে রিজার্ভেশন থাকে তবে domReady ব্যবহার করুন
  • সঠিক, তাই শুধু jQuery ব্যবহার করুন
  • কারণ সবাই jQuery ব্যবহার করে না
  • আমি সম্মত, কেবল jQuery ব্যবহার করুন
  • সংজ্ঞা দ্বারা প্লাগিনগুলি 'একটি প্রয়োজন খাওয়ান'।
  • ক্রস ব্রাউজার আজাক্স কোনও জিনিস নয়। ক্রস ডোমেইন? সম্ভবত আছে, এবং যদি না থাকে তবে খাওয়ানোর দরকার নেই।
  • , -, -, - ঠিক আছে

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

স্পষ্টতা আপডেট

DomReady প্লাগইন ডকুমেন্টটি 'প্রস্তুত' হলে কল করার জন্য ফাংশন সংগ্রহ করে । যদি এটি ইতিমধ্যে লোড হয় তবে তারা তত্ক্ষণাত্ কার্যকর করে।

JQuery ফাংশন সংগ্রহ করে এবং বাঁধাই করে a 'প্রস্তুত' হওয়ার জন্য পিছনে বস্তুকে করে। ডোম প্রস্তুত হলে মুলতুবি বস্তুটি সমাধান হবে এবং ফাংশনগুলিতে আগুন লাগবে। যদি ডোমটি ইতিমধ্যে 'প্রস্তুত' হয় তবে মুলতুবি ইতিমধ্যে সমাধান হয়ে যাবে সুতরাং ফাংশনটি তত্ক্ষণাত্ কার্যকর হবে।

এর অর্থ হল কার্যকরভাবে তারা ঠিক একই জিনিসটি করে।


0

একাধিক মডিউলগুলির সাথে প্রয়োজনীয়জগুলি নিয়ে কিছু পরীক্ষা-নিরীক্ষার পরে আমি ডমরিডি ব্যবহার করার পরামর্শ দিই

আমি লক্ষ্য করেছি যে multiple (ডকুমেন্ট) এর সাথে সম্পর্কিত ফাংশনটি যখন একাধিক মডিউল প্রয়োজনীয় জেএস দ্বারা লোড করা হয় তখন ডাকা হয় না ready আমি সন্দেহ করি যে সমস্ত প্রয়োজনীয়জেএস কোডটি কার্যকর করার আগে ডম প্রস্তুত হয়ে যাচ্ছে এবং ইউজার সংজ্ঞায়িত ফাংশন অর্থাৎ প্রধান মডিউল কোডের মধ্যে আবদ্ধ হওয়ার আগে jquery রেডি কলব্যাক হ্যান্ডলার কল করা হবে।

require(['jquery',
    'underscore',
    'text!some_template.html',
    './my_module_1',
    './my_module_2',
    'domReady',
    'other_dependency_1',
    'other_dependency_2'
    ], function($, _, someTemplate, myModule1, myModule2, domReady) {

    $(document).ready(function() {
        console.info('This might never be executed.'); 
        console.info('Dom might get ready before requirejs would load modules.');
    });

    domReady(function () {
        console.info('This runs when the dom gets ready and modules are loaded.');
    });
});

4
আমি সন্দেহ করি যে, আপনার নির্ভরতার তালিকায় যদি আপনার সমস্ত মডিউল থাকে তবে সমস্তগুলি আনা হবে এবং স্মৃতিতে ফিরে আসবে। পোস্ট করুন যে jquery মৃত্যুদন্ড কার্যকর করার আগে dom. چمتو উদাহরণগুলি সংগ্রহ করে।
যুগাল জিন্দল

যদি ডিওএম ইতিমধ্যে প্রস্তুত থাকে তবে এর জন্য কলব্যাক $(document).readyতত্ক্ষণাত্ চলবে।
দানিয়াল আয়তেকিন

-1

আমি খুঁজে পেয়েছি যে আমি এটি মূল প্রবেশের অংশ হিসাবে করেছি যাতে আমার সমস্ত জাভাস্ক্রিপ্ট গ্যারান্টিযুক্ত যে DOM প্রস্তুত এবং jquery লোড হয়েছে। এটি কতটা দুর্দান্ত তা নিশ্চিত নয় যে কোনও প্রতিক্রিয়াকে স্বাগত জানাই তবে এখানে আমার মেইন.জেএস:

require(['domReady!'], function(domReady){
    console.log('dom is ready');
    require(['jquery', 'bootstrap'], function(){
        console.log('jquery loaded');
        require(['app'], function(app){
            console.log('app loaded');
        });
    });
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.