জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএসের মধ্যে আঁটসাঁট মিলন: আরও আধুনিক পদ্ধতি?

Question

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

jQuery (এবং এর নির্বাচক ইঞ্জিন সিজল) সিএসএস-টাইপ সিনট্যাক্সের সাথে উপাদানগুলিকে রেফারেন্স করে সমর্থন করে এবং প্রচার করে। যেমন, প্রকল্পগুলি তৈরি করার সময় এই কৌশলটি 'আনার্ন' করা (বা রিফ্যাক্টর) বিশেষত কঠিন।

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

আমার প্রশ্ন হ'ল: আধুনিক ওয়েবসাইটগুলিতে কি এড়ানো উচিত?

যদি আমি ফ্রন্ট-এন্ড বিকাশের জন্য নতুন হয়ে থাকি এবং আমি জিনিসগুলি 'সঠিক উপায়ে' শিখতে চাই তবে কি শুরু থেকেই এই ধরনের নির্ভরতা এড়াতে শেখা উচিত? এর অর্থ কী এমন লাইব্রেরির পক্ষে jQuery এড়ানো যা আরও বেশি decoupled কাঠামো প্রচার করে?

Comments

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

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

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

— অ্যাঙ্গভিলার

প্রতিক্রিয়া বা ওয়েব উপাদানগুলি শিখুন, এবং আপনাকে আর জেএসে নির্বাচকদের বিরক্ত করতে হবে না।

— অ্যান্ডি

Answer 1

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

এর জন্য বিভিন্ন কনভেনশন রয়েছে।

স্তর 2 ডোম এপিআই getElementById, getElementByTagName এবং getElementsByName পদ্ধতি সরবরাহ করে। আজ অবধি এগুলি হ'ল কোনও ধরণের ডিওএম ট্র্যাভারসালের ওয়ার্কহর্স। অন্যান্য সমস্ত ফ্যানসিয়ার jQuery নির্বাচকগুলি শেষ পর্যন্ত এগুলির সংমিশ্রণে সমাধান করে এবং / অথবা প্রতিটি ডিওএম নোডের সোজা আপ ট্র্যাভারসাল (এটি ছিল getByClassName করার উপায়)।

অন্য কোনও শর্টকাট নেই। জাভাস্ক্রিপ্টে কী করতে হবে এবং কোথায় তা জানতে হবে। সাধারণত, যদি কোনও উপাদানের কোনও আইডি বা শ্রেণি থাকে যা কেবল স্ক্রিপ্টিংয়ের ক্ষেত্রে প্রাসঙ্গিক হয়, তবে অনেক লোক এটিকে js-বা অন্য কোনও স্পষ্ট পতাকা সহ উপস্থাপন করবে।

আর একটি নতুন কনভেনশন হ'ল ডেটা-অ্যাট্রিবিউট নির্বাচন।

<ul data-myapp-sortable="true">

jQuery('[data-myapp-sortable]').makeSortable();

ডেটা-অ্যাট্রিবিউটটি সাধারণত স্ক্রিপ্টিংয়ের উদ্দেশ্যে এবং এটি ব্যবহার করে বাছাইয়ের জন্য কিছু অর্থবোধ করে। অসুবিধাটি হ'ল এটি getElementById () ব্যবহারের চেয়ে ধীর।

আর একটি পদ্ধতি হ'ল কৌণিক জেএস ব্যবহার করে, যা একটি ভিউ-মডেল তৈরি করে। এই সম্মেলনে যে কোনও ধরণের স্ক্রিপ্টিং কার্যকারিতা বিশেষভাবে মনোনীত বৈশিষ্ট্যগুলি ng-disabled ng-hrefএবং আরও অনেকগুলি দ্বারা নির্দিষ্ট করা হয় । আপনি আপনার জাভাস্ক্রিপ্টে নির্বাচকদের যুক্ত করবেন না। কি স্ক্রিপ্ট করা হয় এবং কীভাবে তার উপর HTML ডকুমেন্টটি প্রধান কর্তৃপক্ষ হয়ে যায় এবং জাভাস্ক্রিপ্ট এতে বিমূর্তভাবে কাজ করে। এটি একটি ভাল পদ্ধতির, তবে স্পষ্টতই আগের পদ্ধতির তুলনায় উচ্চতর শিক্ষার বক্ররেখা। এবং আবার, কর্মক্ষমতা বিবেচনা করতে হবে।

তবে কখনও ভাববেন না যে আপনি ইন্টারেক্টিভ এইচটিএমএল এবং জাভাস্ক্রিপ্ট লিখতে পারেন এবং কোনওভাবে those উভয় অংশই অপরটি সম্পর্কে জানেন না। আপনি কীভাবে রেফারেন্সগুলিকে নির্ভরতার মধ্যে সীমাবদ্ধ করতে পারেন সে সম্পর্কে এটি আরও বেশি।

Comments

উজ্জ্বল উত্তর, +1। টাইট কাপলিং এড়ানোর জন্য প্রক্রিয়া হিসাবে যদি কেবল ডেটা অ্যাট্রিবিউটগুলি উল্লেখ করার জন্য হয়

— লন্ডনে ফার্গাস

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

— মাস্তাব্লাস্টা

আমি কখনই বুঝতে পারি নি কেন ক্লাস, আইডি এবং ডেটা অ্যাট্রিবিউটগুলি হুক এবং রাষ্ট্রীয় পতাকা হিসাবে পুনরায় নতুন করে নেওয়া দরকার using সমস্ত কৌণিক সে ক্ষেত্রে দক্ষতা অর্জনের একটি কার্যকারিতা হ্রাস এবং ব্যাপকভাবে পরিচিত / বোঝা কনভেনশন প্রতিস্থাপন করেছে যাতে এটি আপনার নিজের বৈশিষ্ট্য এবং ট্যাগ উদ্ভাবন করে কীভাবে "কৌণিক উপায়ে" করতে হয় তা বোঝার প্রয়োজন হয়। এখানে বিশাল কোন শেখার বক্ররেখা নেই। এটি কেবল ধীর, পুরোপুরি যুক্তিসঙ্গত এবং সাধারণভাবে পরিচিত কনভেনশন এবং সম্পূর্ণ অপ্রয়োজনীয় আইএমওর পাল্টা।

— এরিক রিপেন

Answer 2

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

ঠিক আছে. সম্ভবত এটি কিছুটা চরম।

ওয়েব অ্যাপ্লিকেশনটিতে ডিকোপলিং ইতিমধ্যে অনেকগুলি স্তরে ঘটে। আরআরএসটি অ্যাপ্লিকেশনগুলি আপনাকে একটি URL এর সাথে সম্পর্কিত "ওয়েব সংস্থানসমূহ" এর ক্ষেত্রে আপনার অ্যাপ্লিকেশনটি সংজ্ঞায়িত করতে দেয়। মডেলগুলি দেখুন আপনাকে ইউআইতে ডেটা উপস্থাপনের অনুমতি দেয় যা ডোমেন মডেল থেকে ডুপ্লোল করা থাকে তবে এটির আকারটি সঠিকভাবে প্রদর্শন করার জন্য আপনার দরকার হয়। পরিষেবা স্তরগুলি একটি ইউআইকে অন্যটির জন্য স্যুপ পরিবর্তন করতে দেয় এবং আরও অনেক কিছু।

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

সর্বাধিক "আধুনিক" পদ্ধতির (অর্থাত্ সপ্তাহের স্বাদ) সম্ভবত এসপিএ অ্যাপ্লিকেশন ।

Comments

আমাকে চরম শব্দ না। অনেকগুলি সাইট যা জাভাস্ক্রিপ্টের বিস্তৃত ব্যবহার করে, সেগুলি বিনা ব্যতীত সেগুলি এখানের প্রয়োজন হয় না actually যদি তাদের বিকাশকারীদের আরও ক্লু থাকত ...

— মাইকেল হ্যাম্পটন

Answer 3

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

Application Logic <----> DOM Manipulation <----> DOM / HTML

Comments

+1 আমি জাভাস্ক্রিপ্ট <--> ডিওএম লজিককে আলাদা করার সাথে পুরোপুরি একমত। আমি সত্যিই ডেটা অ্যাট্রিবিউট পছন্দ করি না কারণ এগুলি ডিওমের সাথে প্রাসঙ্গিক নয় তবে বাহ্যিক সরঞ্জামের জন্য। আমি মনে করি যে একটি ক্লিনার পদ্ধতির মধ্যে কিছু ধরণের ম্যাপিং রয়েছে। হ্যাঁ, এর অর্থ হতে পারে যে তারপরে আপনার কাছে দুটি দিকের (যেমন, জেএস ফাংশন এবং ডোম উপাদানগুলি) রেফারেন্স সহ একটি ফাইল রয়েছে, উদাহরণস্বরূপ, জেএস যে পয়েন্টগুলি তুলে ধরেছে এমন কিছু রেফারেন্স সম্বলিত ডিওএম (যা 'একক-দিক হিসাবে বর্ণিত হতে পারে) ')। যাইহোক, যদি চিন্তা করে সম্পন্ন করা হয় তবে এটি খুব রক্ষণাবেক্ষণযোগ্য, পুনরায় ব্যবহারযোগ্য এবং ডেটা অ্যাট্রিবিউটের চেয়ে উদ্বেগের আরও ভাল বিভাজনের প্রস্তাব দিতে পারে।

— awj

Answer 4

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

যদিও এই সিনট্যাক্সটির ভুল ব্যবহার এবং একটি ভয়ঙ্কর এবং উদ্বেগহীন অ্যাপ্লিকেশন তৈরি করা সম্ভব, আপনার ভাষা বা টুলসেট নির্বিশেষে এগুলি সম্ভব।

Comments

আমি আসলে অনেক কিছুর জন্য ক্লাস, উপাদান এবং আইডি নির্বাচক ব্যবহার করার বিরুদ্ধে সুপারিশ করি এবং পরিবর্তে কাস্টম [data-*]অ্যাট্রিবিউট সিলেক্টরগুলি ব্যবহার করে ফোকাস করি , যা খুব শক্তিশালী উপায়ে ব্যবহার করা যেতে পারে।

— zzzzBov

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

— লন্ডনে ফার্গাস

@zzzzBov - আমি জানি এটি একটি মাইক্রোপটিমাইজেশন, তবে আইডি এবং শ্রেণি অনুসন্ধানগুলি ডেটা-অ্যাট্রিবিউট লুকআপের চেয়ে অনেক দ্রুত। তবে হ্যাঁ, আমি বিভিন্ন উদ্বেগ পরিচালনা করতে বিভিন্ন বৈশিষ্ট্যের বিভিন্ন সেট ব্যবহার করার ধারণাটি পছন্দ করি।

— জিমি ব্রেক - ম্যাককে

Answer 5

ডোমটিতে ইন্ডিরিশন এবং ক্যাশে স্তরটির জন্য কারও কাছে একটি jQuery পাথ ম্যানেজার ইন্টারফেস তৈরি করা প্রয়োজন।

pathMgr.register(name,selector [,isDynamic=false]);
pathMgr.get(name [,refresh]);

তারপর,

String.prototype.reg([isDynamic=false]);
String.prototype.get(name [,refresh]);

সুতরাং,

// at init....
var pathMgr=new PathMgr();
'sidebar-links #sidebar a'.reg();// new registery of selector '#sidebar a' under name 'sidebar-links'
// more, more


// in code
'sidebar-links'.get().css(etc...);
//or
'sidebar-links'.addStyleRule({});