ভ্যানিলা জাভাস্ক্রিপ্ট বনাম jQuery কখন ব্যবহার করবেন?


238

আমি জেনেছি / সাধারণ jQuery প্রশ্নের উত্তর দেওয়ার চেষ্টা করার সময় আমি লক্ষ্য করেছি যে jQuery এর পরিবর্তে জাভাস্ক্রিপ্ট ব্যবহার করার কিছু নির্দিষ্ট অনুশীলন রয়েছে যা আসলে আপনাকে কম লিখতে এবং করতে সক্ষম করে ... ভাল একই পরিমাণে। এবং কর্মক্ষমতা সুবিধাও পেতে পারে।

একটি নির্দিষ্ট উদাহরণ

$(this) বনাম this

ক্লিক করা ইভেন্টের আইডি উল্লেখ করে একটি ক্লিক ইভেন্টের ভিতরে

jQuery এর

$(this).attr("id");

জাভাস্ক্রিপ্ট

this.id;

এর মতো আর কোন প্রচলিত অনুশীলন আছে কি? যেখানে কিছু জাভাস্ক্রিপ্ট ক্রিয়াকলাপ মিক্সটিতে jQuery না নিয়ে সহজেই সম্পাদন করা যায়। নাকি এটি বিরল ঘটনা? (একটি jQuery "শর্টকাট" আসলে আরও কোডের প্রয়োজন)

সম্পাদনা: আমি jQuery বনাম সরল জাভাস্ক্রিপ্ট কর্মক্ষমতা সম্পর্কিত উত্তরগুলির প্রশংসা করি, আমি আসলে আরও অনেক পরিমাণগত উত্তর খুঁজছি। JQuery ব্যবহার করার সময় , উদাহরণগুলি ব্যবহার করার পরিবর্তে সরল জাভাস্ক্রিপ্ট ব্যবহার করা ভাল (পড়ার যোগ্যতা / সংক্ষিপ্তকরণ) থেকে ভাল $()। উদাহরণটি ছাড়াও আমি আমার মূল প্রশ্নটি দিয়েছি।


আমি নিশ্চিত না যে আমি প্রশ্নটি বুঝতে পেরেছি। আপনি কি লাইব্রেরি কোড ব্যবহারের যোগ্যতার বিষয়ে মতামত সন্ধান করছেন, বা আপনি অতিরিক্ত নন-জিক্যুরি ক্রস ব্রাউজারের সামঞ্জস্যপূর্ণ কৌশলগুলি সন্ধান করছেন this.id?
ব্যবহারকারী 113716

1
উত্তরগুলি থেকে দেখে মনে হচ্ছে প্রত্যেকেই এই প্রশ্নটি দার্শনিক হিসাবে গ্রহণ করছে, যেমনটি আমি খুব পরিমাণগত হতে চেয়েছিলাম, প্রায় আমি যেমন সাধারণ (ম্যাল) অভ্যাসগুলি উল্লেখ করেছি তার মতো উদাহরণগুলির একটি তালিকা তৈরি করে।
jondavidjohn


উত্তর:


207
  • this.id (যেমনটি আপনি জানেন)
  • this.value(বেশিরভাগ ইনপুট ধরণের ক্ষেত্রে only কেবলমাত্র আমি জানি যেগুলি যখন IE এর উপাদানগুলির উপর <select>কোনও valueসম্পত্তি সেট করে না থাকে <option>বা সাফারিতে রেডিও ইনপুট থাকে না))
  • this.className একটি সম্পূর্ণ "শ্রেণি" সম্পত্তি পেতে বা সেট করতে
  • this.selectedIndexএকটি বিরুদ্ধে <select>নির্বাচিত সূচক পেতে
  • this.optionsউপাদানগুলির <select>একটি তালিকা পেতে একটি বিরুদ্ধে<option>
  • this.textএর বিরুদ্ধে <option>এটির পাঠ্য সামগ্রী পেতে
  • this.rowsএকটি বিরুদ্ধে উপাদান <table>সংগ্রহ পেতে<tr>
  • this.cells<tr>এর কোষগুলি পাওয়ার জন্য একটি (টিডি ও থ্রি)
  • this.parentNode সরাসরি পিতা বা মাতা পেতে
  • this.checkedএকটি ধন্যবাদ @ টিম ডাউনের পরীক্ষিত রাষ্ট্রটি পেতেcheckbox
  • this.selectedএকটি ধন্যবাদ @ টিম ডাউন এর নির্বাচিত রাষ্ট্র পেতে option to
  • this.disabledএকটি ধন্যবাদ @ টিম ডাউনের অক্ষম রাষ্ট্র পেতেinput
  • this.readOnlyএকটি ধন্যবাদ @ টিম ডাউন ডাউন পঠনযোগ্য রাষ্ট্র পেতেinput
  • this.href<a>এটি পেতে একটি উপাদান বিরুদ্ধেhref
  • this.hostname<a>এর ডোমেন পেতে কোনও উপাদানটির বিপরীতেhref
  • this.pathnameএকটি <a>উপাদান এর পথ পেতে বিরুদ্ধেhref
  • this.search<a>এর কোয়েরিস্ট্রিং পেতে কোনও উপাদানটির বিপরীতেhref
  • this.src এমন উপাদানটির বিরুদ্ধে যেখানে এটি থাকা বৈধ src

... আমি মনে করি আপনি ধারণা পেয়েছেন।

এমন সময় আসবে যখন পারফরম্যান্স গুরুত্বপূর্ণ। আপনি যদি অনেকবার লুপটিতে কিছু সম্পাদন করে থাকেন তবে আপনি jQuery খনন করতে পারেন।

সাধারণভাবে আপনি প্রতিস্থাপন করতে পারেন:

$(el).attr('someName');

সঙ্গে:

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

নীচের বাক্যটি সাজানো এর সাজানো। আরও ভাল চিকিত্সার জন্য এই উত্তরটি দেখুন

el.getAttribute('someName');

... সরাসরি কোনও বৈশিষ্ট্য অ্যাক্সেস করার জন্য। দ্রষ্টব্য যে বৈশিষ্ট্যগুলি বৈশিষ্ট্যের মতো নয় (যদিও তারা কখনও কখনও একে অপরকে মিরর করে)। অবশ্যই আছে setAttribute

বলুন আপনার এমন একটি পরিস্থিতি হয়েছিল যেখানে এমন কোনও পৃষ্ঠা পাওয়া গিয়েছিল যেখানে আপনাকে একটি নির্দিষ্ট ধরণের সমস্ত ট্যাগ আনারপ করতে হবে। এটি jQuery এর সাথে সংক্ষিপ্ত এবং সহজ:

$('span').unwrap();  // unwrap all span elements

তবে যদি অনেকগুলি থাকে তবে আপনি কিছুটা দেশীয় DOM এপিআই করতে চাইতে পারেন:

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

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

আমি বাইরের সঙ্গে একটি অসীম লুপ আছে এটা মনে হতে পারে whileকারণ while(spans[0]), কিন্তু কারণ আমরা একটি "লাইভ তালিকা" এটি আপডেট পরার যখন আমরা কি সঙ্গে লেনদেন করছেন parent.removeChild(span[0]);। এটি একটি চমত্কার নিফটি বৈশিষ্ট্য যা পরিবর্তে কোনও অ্যারে (বা অ্যারের মতো বস্তু) এর সাথে কাজ করার সময় আমরা হাতছাড়া করি।


2
সুন্দর ... সুতরাং বেশিরভাগ ক্ষেত্রে এটি মূল শব্দটির চারদিকে ঘোরে un
jondavidjohn

1
@ জন্ডাভিডজহান: ভাল, কিছু কিছু স্থিরতা রয়েছে যা কিছু ক্ষেত্রে দুর্দান্ত, যেমন কয়েকটি ক্ষেত্রে this.valueব্রাউজারের কয়েকটি দম্পতি রয়েছে। এটি আপনার প্রয়োজনের উপর নির্ভর করে। অনেকগুলি দুর্দান্ত কৌশল রয়েছে যা jQuery ছাড়াই সহজ, বিশেষত যখন কার্য সম্পাদন অত্যন্ত গুরুত্বপূর্ণ। আমি আরও চিন্তা করার চেষ্টা করব।
ব্যবহারকারী 113716

3
আমি একটি উত্তর লিখতে চলেছিলাম তবে পরিবর্তে আমি আপনার জন্য পরামর্শ যুক্ত করব। সাধারণত, attr()ব্যাপকভাবে overused হয়। আপনি যদি কেবলমাত্র একটি উপাদান নিয়ে কাজ করছেন তবে আপনার খুব কমই প্রয়োজন হবে attr()। আমার প্রিয় দুই প্রায় বিভ্রান্তির হয় checked(: প্রায় এক রহস্যময় incantations সমস্ত প্রকারের চেকবাক্সগুলি সম্পত্তির $(this).attr("checked", "checked"), $(this).is(":checked")ইত্যাদি) এবং একইভাবে selectedসম্পত্তির <option>উপাদান।
টিম ডাউন

1
আআরঘ, @ পেট্রিক, নুও: আপনি সুপারিশ করেছেন getAttribute()আপনার প্রায় কখনও এটির প্রয়োজন হয় না : এটি আইইতে ভাঙ্গা হয়, সর্বদা বর্তমান অবস্থা প্রতিফলিত করে না এবং jQuery যাই হোক না কেন এটি তা নয়। শুধু বৈশিষ্ট্য ব্যবহার করুন। stackoverflow.com/questions/4456231/…
টিম ডাউন

1
আমি এত দিন জেএস ব্যবহার করছিলাম এবং আমি ক্লাসের নাম, থেক্স সম্পর্কে জানতাম না।
আইএডাপ্টার

60

সঠিক উত্তরটি হ'ল 'প্লেইন ওল্ড' নেটিভ জাভাস্ক্রিপ্টের পরিবর্তে jQuery ব্যবহার করার সময় আপনি সর্বদা পারফরম্যান্স পেনাল্টি নেবেন। এটি কারণ jQuery একটি জাভাস্ক্রিপ্ট লাইব্রেরি। এটি জাভাস্ক্রিপ্টের অভিনব নতুন সংস্করণ নয়।

JQuery শক্তিশালী হওয়ার কারণটি হ'ল এটি এমন কিছু জিনিস তৈরি করে যা ক্রস ব্রাউজার পরিস্থিতিতে অত্যধিক ক্লান্তিকর হয় (এজাজ অন্যতম সেরা উদাহরণ) এটি সহজেই উপাদানগুলির গ্রুপগুলিতে একসাথে কাজ করা সহজ করার জন্য চেইনিং, ইমপ্লাইড পুনরাবৃত্তি ইত্যাদির মত ধারণাগুলিও সহজেই সহজ করে দেয়।

জাভাস্ক্রিপ্ট শেখার কোনও বিকল্প নেই jQuery শেখা is পরবর্তী ক্ষেত্রে আপনার দৃ basis় ভিত্তি থাকা উচিত যাতে প্রাক্তনটি জানা আপনার পক্ষে কী আরও সহজ করে তুলছে তা আপনি পুরোপুরি প্রশংসা করুন।

- মন্তব্যগুলি অন্তর্ভুক্ত করতে সম্পাদিত -

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

আমার মতে তখন, উত্তরটি আপনি কী অর্জন করার চেষ্টা করছেন তার উপর নির্ভর করে। যদি পারফরম্যান্স সুবিধার জন্য আপনার রেফারেন্সের উপর ভিত্তি করে আমি ধরে নিয়েছি, আপনি আপনার অ্যাপ্লিকেশনটি সর্বাধিক সম্ভব গতির পরে করছেন, তবে jQuery ব্যবহার করে আপনি যখনই কল করবেন প্রত্যেক সময় ওভারহেডের পরিচয় দেয় $()। আপনি যদি পঠনযোগ্যতা, ধারাবাহিকতা, ক্রস ব্রাউজারের সামঞ্জস্যতা ইত্যাদির জন্য যান, তবে অবশ্যই 'নেটিভ' জাভাস্ক্রিপ্টের চেয়ে jQuery পছন্দ করার কারণ রয়েছে।


8
আমি এমন পরিস্থিতির উদাহরণ দেখতে চাই যেখানে jQuery বিশুদ্ধ জেএস কার্যকরভাবে কার্যকর করতে পারে। আপনি যা করেন তা বিবেচনাধীন নয়, আপনি যদি jQuery ব্যবহার করেন (বা অন্য কোনও লাইব্রেরি matter বিষয়টির জন্য) আপনার অনিবার্য নয় এমন ওভারহেড ফাংশন রয়েছে। কলিং থেকে উত্পন্ন (যদিও) গৌণ ওভারহেড থেকে দূরে আসার কোনও উপায় নেই $()। যদি আপনি এই কলটি না করেন তবে আপনি সময় সাশ্রয় করবেন।
gddc

16
দুর্বলভাবে লেখা বাড়িতে তৈরি সমাধান সম্ভবত ধীর হতে পারে be JQuery টিম প্যাকেজে কিছু উচ্চ দক্ষ জাভাস্ক্রিপ্ট কার্যকর করেছে। @ ফ্রিল্যান্সারের উত্তর দেখুন।
স্টিফেন

3
একটি দুর্বল লিখিত সমাধান সর্বদা একটি দুর্বল লিখিত সমাধান হবে এবং এটি ভাষার দোষ নয়। লাইব্রেরিতে ওভারহেড পড়বে যে 'দেশীয়' ফাংশনটি যদি ভালভাবে চিন্তা করা যায় তবে এড়াতে পারে তা পরিবর্তন করে না।
gddc

11
@gddc আমি মনে করি যেখানে jQuery "আউটফর্মফর্মস" (বেঞ্চমার্ক বাক্সের বাইরে পড়ুন) খাঁটি জেএস ডে সময়কে হ্রাস করছে (এটি একটি বিরাট মূল্য ব্যবসায়িক ভিত্তিতে) এবং পরীক্ষার সহজীকরণে
বেন

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

38

একটি কাঠামো বলা আছে ... ওহ কি ধারণা? Vanilla JS। আশা করি আপনি কৌতুকটি পেয়ে যাবেন ...: ডি এটি পারফরম্যান্সের জন্য কোডের যোগ্যতা ত্যাগ করে ... বেল্টের সাথে তুলনা করে আপনি jQueryদেখতে পারেন যে কোনও DOMউপাদান দ্বারা পুনরুদ্ধার IDকরা প্রায় 35X দ্রুত। :)

সুতরাং আপনি যদি পারফরম্যান্স চান তবে আপনি ভ্যানিলা জেএস আরও ভাল করে চেষ্টা করতে এবং নিজের সিদ্ধান্তে আঁকতে পারেন। forলুপের ভিতরে যেমন নিবিড় কোড চলাকালীন আপনি জাভাস্ক্রিপ্ট ব্রাউজারের জিইউআই ঝুলিয়ে / ইউআই থ্রেডটিকে লক করার অভিজ্ঞতা পাবেন না ।

অবিশ্বাস্য, শক্তিশালী জাভাস্ক্রিপ্ট অ্যাপ্লিকেশন তৈরির জন্য ভ্যানিলা জেএস একটি দ্রুত, হালকা ওজনের, ক্রস-প্ল্যাটফর্ম কাঠামো।

তাদের হোমপেজে কিছু পারফেক্ট তুলনা রয়েছে:

এখানে চিত্র বর্ণনা লিখুন


1
@ লেনিয়েল ম্যাকাফেরি ওহ ম্যান আমি এই উত্তরটি পছন্দ করতাম! আমি বুঝতে পারিনি যে ভ্যানিলা এবং অন্যান্য ফ্রেমওয়ার্কগুলির মধ্যে পারফরম্যান্স এমন একটি পার্থক্য আনতে পারে! যাই হোক এই উত্তরের জন্য হলের খ্যাতি !! পিএস: আপনিও ওয়েবসাইট বানিয়েছেন?
স্টিভ

17

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

http://www.quirksmode.org/compatibility.html

এটি কোথাও কোন ব্রাউজারে কাজ করে এবং কোনটি কাজ করে না তার সর্বাধিক বিস্তৃত তালিকা। DOM বিভাগে বিশেষ মনোযোগ দিন। এটি পড়ার জন্য অনেক কিছুই তবে বিন্দুটি সব পড়ার জন্য নয় তবে এটি একটি রেফারেন্স হিসাবে ব্যবহার করা।

আমি যখন সিরিয়াসভাবে ওয়েব অ্যাপ্লিকেশন লিখতে শুরু করি তখন আমি সমস্ত ডিওএম টেবিলগুলি মুদ্রিত করে দেয়ালে ঝুলিয়ে দিয়েছিলাম যাতে আমি এক নজরে জানতে পারি কী ব্যবহার করা নিরাপদ এবং কী হ্যাকের প্রয়োজন। quirksmode parentNode compatibilityআমার সন্দেহ আছে যখন এই দিনগুলিতে আমি ঠিক কিছু গুগল করছি ।

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


পিএস: পিপিকে (সাইটের লেখক) এর একটি খুব সুন্দর বই রয়েছে যা আমি পড়ার পরামর্শ দিই


14

কখন:

  1. আপনি জানেন যে আপনি যা করছেন তার জন্য অবিচ্ছিন্ন ক্রস ব্রাউজার সমর্থন রয়েছে এবং and
  2. এটি টাইপ করার জন্য উল্লেখযোগ্যভাবে বেশি কোড নয় এবং
  3. এটি উল্লেখযোগ্যভাবে কম পাঠযোগ্য নয়, এবং
  4. আপনি যথাযথভাবে আত্মবিশ্বাসী যে আরও ভাল পারফরম্যান্স অর্জনের জন্য jQuery ব্রাউজারের উপর ভিত্তি করে বিভিন্ন বাস্তবায়ন বেছে নেবে না:

জাভাস্ক্রিপ্ট ব্যবহার করুন। অন্যথায় jQuery ব্যবহার করুন (আপনি যদি পারেন)

সম্পাদনা করুন : jQuery সামগ্রিকভাবে একে বাদ দেওয়ার বিপরীতে ব্যবহার করার পাশাপাশি jQuery এর ভিতরে ভ্যানিলা জেএস ব্যবহার করবেন কিনা তা চয়ন করার সময় এই উত্তর উভয়ই প্রযোজ্য। জেএসের পক্ষে attr('id')এবং .idলিন্সের removeClass('foo')বিপরীতে বেছে নেওয়ার সময়, জেএসের পক্ষে নির্বাচন করা এবং ঝোঁক .className = .className.replace( new Regexp("(?:^|\\s+)"+foo+"(?:\\s+|$)",'g'), '' )


3
আমি মনে করি ওপি jQuery ব্যবহার করতে চায়, কিন্তু আশ্চর্য করে যে কোথায় এবং কখন তার jQuery পদ্ধতিতে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে।
স্টিফেন

.classList.remove('foo')নতুন ব্রাউজারগুলিতে দুর্দান্ত কাজ করছে বলে মনে হচ্ছে
টিয়ালো

3
@ টাইলো ক্লাসলিস্ট.রেমভ এইচটিএমএল 5 ক্লাসলিস্ট এপিআই-র অংশ যা উদাহরণস্বরূপ আই 9 এ প্রয়োগ করা হয়নি ক্যানিউজ.com
#

13

অন্যের উত্তরগুলি "jQuery বনাম সরল জেএস" এর বিস্তৃত প্রশ্নের উপর দৃষ্টি নিবদ্ধ করেছে। আপনার ওপি থেকে বিচার করে, আমি মনে করি আপনি যদি ভাসিলা জেএস ব্যবহার করার জন্য ইতিমধ্যে ভিজিলা জেএস ব্যবহার করা ভাল তবে আপনি কেবল ভাবছিলেন। আপনার ভ্যানিলা জেএস কখন ব্যবহার করা উচিত তার উদাহরণ হ'ল একটি নিখুঁত উদাহরণ:

$(this).attr('id');

ধীর এবং (আমার মতে) উভয়ই এর চেয়ে কম পঠনযোগ্য:

this.id

এটি ধীরে ধীরে কারণ আপনাকে jQuery উপায়ে বৈশিষ্ট্যটি পুনরুদ্ধার করতে একটি নতুন জেএস অবজেক্ট স্পিন করতে হবে। এখন, আপনি যদি $(this)অন্য ক্রিয়াকলাপ সম্পাদন করতে ব্যবহার করতে যাচ্ছেন তবে সমস্ত উপায়ে সেই jQuery অবজেক্টটিকে একটি ভেরিয়েবলে সঞ্চয় করুন এবং এটির সাথে অপারেট করুন। যাইহোক, আমি অনেক পরিস্থিতিতে চলে এসেছি যেখানে আমার কেবলমাত্র উপাদান (যেমন idবা src) থেকে কোনও গুণকের প্রয়োজন ।

এর মতো আর কোন প্রচলিত অনুশীলন আছে কি? যেখানে কিছু জাভাস্ক্রিপ্ট ক্রিয়াকলাপ মিক্সটিতে jQuery না নিয়ে সহজেই সম্পাদন করা যায়। নাকি এটি বিরল ঘটনা? (একটি jQuery "শর্টকাট" আসলে আরও কোডের প্রয়োজন)

আমি মনে করি সবচেয়ে সাধারণ কেসটি আপনার পোস্টে আপনি বর্ণনা করেছেন; লোকেরা $(this)অযথা একটি jQuery বস্তু মোড়ানো । আমি এটি বেশিরভাগ ক্ষেত্রেই idএবং এর valueপরিবর্তে ব্যবহার করে দেখি $(this).val()

সম্পাদনা: এখানে একটি নিবন্ধ এখানে ব্যাখ্যা করেছে যে ক্ষেত্রে jQuery ব্যবহার করা কেনattr() ধীর। স্বীকারোক্তি: ট্যাগটি উইকি থেকে এটি চুরি করেছে, তবে আমি মনে করি এটি প্রশ্নের জন্য উল্লেখযোগ্য।

আবার সম্পাদনা করুন: সরাসরি বৈশিষ্ট্যগুলি অ্যাক্সেস করার পাঠযোগ্যতা / পারফরম্যান্সের প্রভাবগুলি প্রদত্ত, আমি বলব থাম্বের একটি ভাল নিয়ম সম্ভবত ব্যবহার করার চেষ্টা করা উচিতthis.<attributename> সম্ভব হলে । সম্ভবত এমন কিছু উদাহরণ রয়েছে যেখানে ব্রাউজারের অসঙ্গতির কারণে এটি কাজ করবে না, তবে সম্ভবত এটি প্রথমে চেষ্টা করা ভাল হয় এবং যদি এটি কাজ না করে তবে jQuery এ ফিরে আসুন better


হ্যাঁ, প্রশ্নটি পড়ার জন্য ধন্যবাদ;) ... তাই এটি কি ব্যতিক্রমত ব্যতিক্রম?
jondavidjohn

@ জন্ডাভিডজহান: সত্য, আমি এই কল করতে দ্বিধা বোধ করছি। আমি মনে করি হ্যাঁ, ক্রস ব্রাউজার উদ্বেগের কারণে jQuery ব্যবহার করা আপনার সুবিধার জন্য। অন্যান্য উদাহরণ আছে, যেমন this.style.display = 'none'। এর চেয়ে ভাল কি $(this).hide()? আমি যুক্তি দিয়ে বলছি যে আধুনিকটি আরও বেশি পঠনযোগ্য, তবে পূর্বেরটি সম্ভবত দ্রুততর। JQuery ব্যতীত কিছু ক্রিয়াকলাপ ব্রাউজার জুড়ে কাজ করবে কিনা তা দেখার জন্য নিজেকে কিছু পরীক্ষা-নিরীক্ষা করা ক্ষতিগ্রস্থ করে না - কোনও অপারেশন সম্পাদনের জন্য jQuery অবজেক্টে কোনও উপাদান মোড়ানোর আগে সাধারণত আমি এটি করি।
অ্যান্ড্রু হুইটেকার

10

আপনি যদি প্রায়শই পারফরম্যান্স সম্পর্কে উদ্বিগ্ন হন তবে আপনার মূল উদাহরণটি মাথার পেরেকটি আঘাত করে। অপ্রয়োজনীয় বা অপ্রয়োজনীয় jQuery চালনা হ'ল, আইএমএইচও, ধীর পারফরম্যান্সের দ্বিতীয় প্রধান কারণ (প্রথমটি হ'ল দুর্বল ডিওএম ট্র্যাভারসাল)।

এটা না আপনি যা সন্ধান করছেন তার প্রকৃত উদাহরণ , তবে আমি এটি প্রায়শই দেখি যে এটির উল্লেখ রয়েছে: আপনার jQuery স্ক্রিপ্টগুলির কার্যকারিতা গতি বাড়ানোর এক সেরা উপায় হল jQuery অবজেক্টগুলিকে ক্যাশে করা, এবং / অথবা চেইন ব্যবহার:

// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

// poor
$('.something').load('url');
$('.something').show();

// excellent
var something = $('#container').children('p.something');
something.load('url').show();

আকর্ষণীয় ... ভের ইনস্ট্যান্টেশন এবং অ্যাকশনের এই পৃথকীকরণটি কার্যত কার্যকারিতা লাভের দিকে পরিচালিত করে? বা কেবল অ্যাকশনটিকে তার নিজের উপর চালানোর অনুমতি দেয় (এটি আমার কম
ধারণাযুক্ত করে তোলে

1
এটি অবশ্যই কার্য সম্পাদন লাভের দিকে নিয়ে যায় তবে আপনি যদি নির্বাচিত উপাদানটি পুনরায় ব্যবহার করেন। সুতরাং, শেষ ক্ষেত্রে var something, আমার সত্যিই jQuery অবজেক্টটি ক্যাশে করার প্রয়োজন হয়নি (যেহেতু আমি চেইন ব্যবহার করেছি), তবে অভ্যাসের বাইরে আমি যাইহোক এটি করি।
স্টিফেন

2
অন্যদিকে, একই উদাহরণটি ধরুন। $('.something')দু'বার কল করার অর্থ jQuery অবশ্যই সেই নির্বাচকের সাথে সমস্ত উপাদান অনুসন্ধান করার জন্য দু'বার ডোমকে অতিক্রম করবে ।
স্টিফেন

2
প্রথম উদাহরণের ক্ষেত্রে, ক্যাচিং $(this)jQuery ফাংশনে কলগুলি হ্রাস করে। এটি আপনাকে লুপের দৃশ্যে সর্বাধিক উপার্জন দেবে।
স্টিফেন

2
@ অ্যালনিটাক নোটিশ যে elementসমান $(this)। এতে একাধিক উপাদান থাকে না।
স্টিফেন

8

আমি খুঁজে পেয়েছি অবশ্যই জেএস এবং জিকিউয়ের মধ্যে ওভারল্যাপ রয়েছে। আপনার প্রদর্শিত কোডটি এর একটি ভাল উদাহরণ। সত্যি বলতে, জেএস-এর উপরে জিকিউ ব্যবহারের সর্বোত্তম কারণটি হ'ল ব্রাউজারের সামঞ্জস্য। আমি জেএস-তে কোনও কিছু অর্জন করতে পারলেও আমি সবসময় জেকিউয়ের দিকে ঝুঁকছি।


8
কোনও ওভারল্যাপ না থাকলে এটি আশ্চর্য হবে, কারণ জিকুয়েরি জাভাস্ক্রিপ্ট।
সাইমন

6

এটি আমার ব্যক্তিগত দৃষ্টিভঙ্গি, তবে jQuery যেভাবেই জাভাস্ক্রিপ্ট, তাই আমি মনে করি তাত্ত্বিকভাবে এটি ভ্যানিলা জেএস এর চেয়ে ভাল পারফর্ম করতে পারে না।

তবে ব্যবহারিকভাবে এটি হাতে লিখিত জেএসের চেয়ে আরও ভাল পারফরম্যান্স করতে পারে, কারণ কারও হাতে লিখিত কোড jQuery এর মতো দক্ষ নাও হতে পারে।

নীচের লাইন - ছোট স্টাফের জন্য আমি ভ্যানিলা জেএস ব্যবহার করতে ঝোঁক, জেএস নিবিড় প্রকল্পগুলির জন্য আমি jQuery ব্যবহার করতে পছন্দ করি এবং চাকাটি পুনরায় উদ্ভাবন করতে চাই না - এটি আরও উত্পাদনশীল।


1
এমন অনেকগুলি উদাহরণ রয়েছে যেখানে গ্রন্থাগারগুলি ভ্যানিলা জেএসকে ছাপিয়ে যায়। জেএস-এর অনেকগুলি অন্তর্নির্মিত প্রোটোটাইপ পদ্ধতিগুলি খারাপভাবে লেখা হয়, এটি দেখা যায়।
উদাহরণস্বরূপ পরিসংখ্যান শেখা

3

thisডিওএম উপাদান হিসাবে প্রথম উত্তরের লাইভ প্রোপার্টি তালিকাটি সম্পূর্ণ সম্পূর্ণ।

আপনি অন্য কিছু জানতে আগ্রহী হতে পারে।

এটি যখন নথি:

  • this.forms একটি পেতে HTMLCollectionবর্তমান নথি ফর্মগুলির ,
  • this.anchorsসেট করা সাথে HTMLCollectionসমস্ত কিছু পেতে ,HTMLAnchorElementsname
  • this.linksসেট হয়ে HTMLCollectionসমস্ত HTMLAnchorElementএস একটি পেতে href,
  • this.imagesHTMLCollectionসমস্ত HTMLImageElementএস এর একটি পেতে
  • হ্রাসপ্রাপ্ত অ্যাপলেটগুলির সাথে একই this.applets

আপনি যখন কাজ করেন document.forms, তখন document.forms[formNameOrId]নামযুক্ত বা চিহ্নিত ফর্মটি পান।

যখন এটি একটি ফর্ম:

  • this[inputNameOrId] নামকরণ বা চিহ্নিত ক্ষেত্র পেতে

যখন এটি ফর্ম ক্ষেত্র:

  • this.type ক্ষেত্রের ধরণ পেতে

JQuery নির্বাচনকারীদের শিখার সময়, আমরা প্রায়শই ইতিমধ্যে বিদ্যমান এইচটিএমএল উপাদানগুলির বৈশিষ্ট্যগুলি শিখি না, যা অ্যাক্সেস করার জন্য খুব দ্রুত।


আপনি উল্লিখিত বৈশিষ্ট্যগুলি ডিওএম স্তর 2 টি এইচটিএমএল স্পেসিফিকেশনে সংজ্ঞায়িত করা হয়েছে , এবং ব্যাপকভাবে সমর্থিত। document.embedsএবং document.pluginsব্যাপকভাবে সমর্থিত (DOM 0)। এইচটিএমএল 5 স্পেসিফিকেশনেdocument.scripts সংজ্ঞায়িত , এবং ব্যাপকভাবে সমর্থিত (এবং ফায়ারফক্স 9+ ) ও একটি সুবিধাজনক সংগ্রহ ।
রব ডব্লু

@ রোবউ তাই তালিকাটি এখন সম্পূর্ণ হতে পারে এবং অবশ্যই কার্যকর এবং দ্রুত। ধন্যবাদ;)
lib3d

2

যথারীতি আমি এই পার্টিতে দেরি করে আসছি।

এটি অতিরিক্ত কার্যকারিতা নয় যা আমাকে jQuery ব্যবহার করার সিদ্ধান্ত নিয়েছে, যতটা আকর্ষণীয়। সর্বোপরি কিছুই আপনার নিজের ফাংশন লিখতে বাধা দেয় না।

এটি সত্য ছিল যে মেমরি ফাঁস এড়াতে DOM সংশোধন করার সময় শিখার জন্য অনেকগুলি কৌশল ছিল (আমি আপনার বিষয়ে কথা বলছি IE)। একটি কেন্দ্রীয় সংস্থান আছে যা আমার জন্য সমস্ত ধরণের ইস্যু পরিচালনা করেছিল, যারা আমার চেয়ে অনেক বেশি ভালো জেএস কোডার ছিলেন তাদের দ্বারা লিখিত, যা নিয়মিত পর্যালোচনা করা, সংশোধিত ও পরীক্ষিত ছিল godশ্বর প্রেরণ।

আমি অনুমান করি এই ধরণের ফলসটি ক্রস ব্রাউজার সমর্থন / বিমূর্ত যুক্তির আওতায়।

এবং অবশ্যই jQuery আপনার প্রয়োজন হলে স্ট্রেট জেএস এর ব্যবহারকে বিরত রাখে না। আমি সবসময় অনুভব করলাম দুজনে একসাথে একসাথে কাজ করবে বলে মনে হয়েছে।

অবশ্যই যদি আপনার ব্রাউজারটি jQuery দ্বারা সমর্থিত না হয় বা আপনি নিম্ন প্রান্তের পরিবেশকে (পুরানো ফোন?) সমর্থন করছেন তবে একটি বড় .js ফাইল কোনও সমস্যা হতে পারে। মনে রাখবেন কখন jQuery ক্ষুদ্র ছিল?

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

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


2

এখানে একটি প্রযুক্তিগত উত্তর নেই - অনেকগুলি কাজ jQuery এর মতো নির্দিষ্ট গ্রন্থাগারকে মঞ্জুরি দেয় না।

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

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


1

$(this)এর থেকে আলাদা this:

$(this)আপনি ব্যবহার করে নিশ্চিত করেছেন যে jQuery প্রোটোটাইপটি বস্তুটির উপর দিয়ে যাচ্ছে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.