আপনার জেএস, এইচটিএমএল এবং সিএসএস আলাদা করে রাখা উচিত?

Question

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

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

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

মধ্যে নির্বাচন একাধিক উইজেট ফাইল

• এইচটিএমএল
• বেসিক CSS লেআউট
• কিছুটা জেএসের সাথে সরাসরি মিথস্ক্রিয়া এবং ইউএক্স বর্ধনের নিয়ন্ত্রণ।

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

সুতরাং আপনি কীভাবে আপনার কোডটি সংগঠিত করেন তা জানার জন্য আমি পছন্দ করব, যদি আপনি সাধারণত প্রস্তাবিত বিচ্ছিন্নতার সাথে আঁকেন।

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

Comments

আপনি যে নীতিটি ইঙ্গিত করেছেন সেটিকে উপস্থাপনা এবং সামগ্রী পৃথকীকরণ

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

মনে রাখবেন যে আপনি যদি ফাইলগুলির সাথে আলাদা না হন তবে আপনার ব্যবহারকারীরা একবার পৃষ্ঠা ডাউনলোড করার পরিবর্তে প্রতিটি পৃষ্ঠার লোডে এমবেডড এইচটিএমএল এবং সিএসএস ডাউনলোড করবেন it

— নিকোল

@ রবার্টহারভে: ঠিক আছে ভাল রেফারেন্স ... তবে বিচ্ছেদ সামগ্রী / উপস্থাপনার জন্য সেখানে তালিকাভুক্ত একমাত্র কারণ হ'ল মেশিনের পঠনযোগ্যতা উন্নত করা improving তবে আমি মনে করি জেএস সহ পৃষ্ঠাটিতে যখন উইজেটগুলি যুক্ত হয় তখন কিছু যায় আসে না। বেসিক এইচটিএমএল এ যাইহোক তাদের ধারণ করে না !?

— সেপ্টপিক

@ রেনেসিস: এটি একটি বড় অসুবিধা, সত্য ... তবে উদাহরণস্বরূপ জাঙ্গোর সাথে একাধিক টেমপ্লেটগুলি থেকে আপনার জেএস এবং সিএসএস সংগ্রহ এবং একক ফাইলে মার্জ করা মোটামুটি সহজ।

— সেবপিক

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

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

Answer 1

আমি এই কাঠামো বজায় রাখছি

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

সাইটের মূলটিতে, জেএস, এক্সএমএল, চিত্র এবং সিএসএস ফোল্ডারগুলিও রয়েছে যার প্রতিটি সাইটের বিস্তৃত সংস্থান রয়েছে।

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

এটি তাদের সংস্থান হিসাবে আমার সংস্থানগুলিকে সংগঠিত করে। এবং আমার কাছে রুট জেএস ফোল্ডারে এক ডজন জেএস ফাইল থাকতে পারে, তাদের সার্ভারের পাশটি সংযুক্ত করে এবং মাইনাইফ করে এক জেএস রিসোর্স হিসাবে ফিরিয়ে দেওয়া হবে (এবং ফলাফলটি ক্যাশে করে)।

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

Comments

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

— সেবপিক

Answer 2

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

Comments

পৃথক ফাইলগুলি আসলে গতি উন্নতি করে বরং তা

— হ্রাস

এইচটিএমএল ফাইলে সামান্য পরিমাণে সিএসএস এবং জেএস হ'ল তিন পৃষ্ঠার অনুরোধের পরিবর্তে একটি পৃষ্ঠার অনুরোধ, যা খুব দ্রুত সংখ্যক পৃষ্ঠাগুলি পরিবেশন করার জন্য ভাল। বা কমপক্ষে তাদের প্রয়োজন মতো সংযুক্ত করুন - Code.google.com/speed/page-speed/docs/rtt.html

— ব্র্যাচ

Answer 3

একাধিক উইজেট ফাইল নির্বাচন করুন

• এইচটিএমএল
• বেসিক CSS লেআউট
• কিছুটা জেএসের সাথে সরাসরি মিথস্ক্রিয়া এবং ইউএক্স বর্ধনের নিয়ন্ত্রণ।

আমার কাছে একটি সংস্থার সরঞ্জাম ( ট্রিনিটি ) রয়েছে যা আপনাকে এটি প্রচার করে।

উইজেট ফাইলটি বাদে 3 টি ছোট ফাইল, এইচটিএমএল, সিএসএস এবং জেএসে বিভক্ত। এর অর্থ আপনার কাছে পৃথক ফাইল রয়েছে তবে সেগুলি এখনও লিঙ্কযুক্ত।

এটি ফ্যাট ফাইলগুলির সমস্যা এড়ায় কিন্তু তবুও আপনাকে আলাদা ফাইল দেয়।

সুতরাং উদ্বেগগুলি কেবল আলাদা করার অর্থ এই নয় যে আপনার একটি বড় এইচটিএমএল / সিএসএস / জেএস ফাইল থাকা উচিত। <HTML, CSS, JS>আপনার সমস্ত পুনঃব্যবহারযোগ্য এনক্যাপসুলেটেড কোডের জন্য আপনার একাধিক ট্রিপল্ট থাকা উচিত

এই সমস্তগুলি একটি ফাইলে থাকা যতক্ষণ না তারা স্পষ্টভাবে বিচ্ছিন্ন হয়ে যায় তেমন কোনও ভুল নেই।

মত একটি উইজেট

<div id="wrapper">
  <style scoped> CSS code </style>
  <script> JS code </script>
  HTML code
</div>

ভাল, এবং দুর্দান্ত। একটি ফাইলে সমস্ত কিছু থাকা ব্যতীত কোনও রক্ষণাবেক্ষণকারীর পক্ষে সিএসএস / জেএস / এইচটিএমএল মেশানো এবং মিলানো শুরু করা খুব সহজ হয়ে যায়।

সময়ের সাথে সাথে এটি স্প্যাগেটিতে রূপান্তরিত করার জন্য এটি এটিকে অনেক সহজ করে তোলে।

লোকেরা পৃথক ফাইল প্রচার করার মূল কারণ হ'ল দুই গুণ

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

Comments

হ্যাঁ ... চাদের মতো একই পরামর্শ! এবং প্রকৃতপক্ষে আমি তাৎক্ষণিকভাবে এটি চেষ্টা করেছিলাম, এবং আমি বিক্রি হয়ে গিয়েছি :) এটি এর মতো এত ক্লিনার ... আপনার সরঞ্জামটি নোডের জন্য সঠিক? জ্যাঙ্গোর জন্য আমার এমন কিছু খুঁজে পাওয়া উচিত ...

— সেপ্টপিক

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

— রায়নস

Answer 4

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

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

বিচ্ছেদ ব্যবহার:

• পৃথক জাভাস্ক্রিপ্ট অন্য পৃষ্ঠাতে এটি পুনরায় ব্যবহার করা যেতে পারে
• পৃথক সিএসএস পুনরায় ব্যবহারের পাশাপাশি সাইটটিকে নতুন করে নতুন চেহারা দিতে সক্ষম হতে পারে
• পৃথক এইচটিএমএল কন্টেন্ট চেহারা না ফোকাস হতে পারে।

আপনার সাইটের একাধিক পৃষ্ঠায় ব্যবহার করা হলে সিএসএস / জেএস ক্যাশে হতে পারে তাও উল্লেখ করা উচিত

Comments

... এবং এমন অনেকগুলি "বিল্ড সরঞ্জাম" রয়েছে যা প্রকৃত ফাইলগুলি স্থাপনের জন্য পৃথক ফাইলগুলি (নিযুক্ত নয়) জেএস এবং সিএসএস সম্পদ সংগ্রহ করতে পারে ... সম্পদ সংগ্রহ করে, নকলগুলি সরিয়ে (বা সনাক্তকরণ), ক্ষুদ্রকরণ এবং শীঘ্রই.

— মাইক রবিনসন