জেভাস্ক্রিপ্ট স্টাইল গাইড

সবসময় আপনার সকল জেভাস্ক্রিপ্ট প্রকল্পের জন্য একই কোড সম্মতি ব্যবহার করুন

জেভাস্ক্রিপ্ট কোড সম্মতি

কোডিং সম্মতি (Coding conventions) বোঝায়প্রোগ্রামিং স্টাইল নির্দেশিকাএই সুন্দরী নীতিগুলি মূলত নিম্নরূপ থাকে:

  • ভিন্ন ও ফাংশনের নামকরণ ও ঘোষণার নিয়ম
  • স্পেস, ইন্ডেন্ট ও মন্তব্য ব্যবহারের নিয়ম
  • প্রোগ্রামিং অভ্যাস ও নীতি

কোড সম্মতিগুণমান নিশ্চিত করুন：

  • কোডটির পড়ার মুখস্থতা উন্নত করা
  • কোডটির মেরামতযোগ্যতা বাড়াতে

কোড সম্মতি হতে পারে দলের পক্ষ থেকে লিখিত নিয়ম, অথবা আপনার নিজস্ব কোডিং অভ্যাস

এই পৃষ্ঠা কোডউৎসওয়েকম কম দ্বারা ব্যবহৃত সাধারণ জেভাস্ক্রিপ্ট কোড সম্মতি বর্ণনা করে。

আপনি পরবর্তী চাপ্তাক্ষর 'শ্রেষ্ঠ প্রয়োগ' পড়তে পাবেন, যেখানে কোডিং ট্র্যাপস থেকে বিরত থাকার পদ্ধতি শিখবেন。

বদলনাম

CodeW3C.com-এ, আমরা পরিচিতকরণ নাম (বদলগুলি এবং ফাংশন) জন্যহাইফেন বিন্যাস。

সমস্ত নাম সবসময়অক্ষরশুরু

এই পাতার নিচে, আমরা নামকরণ নিয়ম নিয়ে আরও বিস্তারিতভাবে আলোচনা করবো。

firstName = "Bill";
lastName = "Gates";
price = 19.90;
tax = 0.20;
fullPrice = price + (price * tax);

সমতুলক আগের স্পেস

সমতুলক ( = + - * / ) এবং কমা (,) আগে এবং পরে সবসময় স্পেস ব্যবহার করুন

উদাহরণ

var x = y + z;
var values = ["Volvo", "Saab",  "Fiat"];

কোড সুজুড়ন

সবসময় কোড ব্লককে 4টি স্পেসে সুজুড়ন করুন

ফাংশন

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

শুধুমাত্র ট্যাব ব্যবহার না করে সূচককে সুজুড়ন করুন। ভিন্ন সম্পাদকগুলি ট্যাবকে বৈচিত্র্যময়ভাবে বোঝে

বিবৃতি নিয়ম

সহজ বিবৃতি (simple) জন্য সাধারণ নিয়ম:

সবসময় একক বিবৃতি (single) শেষে সমানুক্ত সমাপ্তি ব্যবহার করুন

উদাহরণ

var values = ["Volvo", "Saab",  "Fiat"];
var person = {
    firstName: "Bill",
     lastName: "Gates",
    age: 50,
    eyeColor:  "blue"
};

জটিল বিবৃতি (compound) জন্য সাধারণ নিয়ম:

  • প্রথম লাইনের শেষে খোলা ব্র্যাকেট লিখুন
  • খোলা ব্র্যাকেটের আগে একটি স্পেস ব্যবহার করুন
  • নতুন লাইনে বন্ধনী ব্র্যাকেটটি লিখুন, প্রাথমিক স্পেস ছাড়া
  • জটিল বিবৃতি (compound) শেষে সমানুক্ত সমাপ্তি ব্যবহার না করুন

ফাংশন:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

ব্যবস্থা:

for (i = 0; i < 5; i++) {
    x += i;
}

শর্ত:

if (time < 20) {
    greeting = "Good day";
} else {
     greeting = "Good evening";
}

অবজেক্ট নিয়ম

অবজেক্ট নির্বাচনের জন্য সাধারণ নিয়ম:

  • খোলা ব্র্যাকেটকে অবজেক্ট নামের সাথে একই লাইনে রাখুন
  • প্রতিটি মানবোদ্ধীয় এবং তার মানের মধ্যে একটি কমা এবং স্পেস ব্যবহার করুন
  • শেষ মানবোদ্ধীয় মানের পরে কমা ব্যবহার না করুন
  • নতুন লাইনে বন্ধনী ব্র্যাকেটটি লিখুন, প্রাথমিক স্পেস ছাড়া
  • সবসময় অবজেক্ট নির্বাচনকে সমাপ্ত করতে সমানুক্ত সমাপ্তি সমানুক্ত ব্যবহার করুন

উদাহরণ

var person = {
    firstName: "Bill",
    lastName: "Gates",
    age: 19,
    eyeColor:  "blue"
};

সক্ষম করে একটি স্কোয়ায়ার ডব্লিউ অবজেক্টটিকে একটি লাইনে সংক্ষেপিত করা যেতে পারে, শুধুমাত্র প্রতিমূলক মধ্যে স্পেস ব্যবহার করে:

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

লাইন দৈর্ঘ্য 80 অক্ষরের নীচে

পড়াশুনা বৃদ্ধির জন্য, প্রত্যেক লাইনের দৈর্ঘ্য 80 অক্ষরের বেশি হওয়ার জন্য বেচেছেন না।

যদি জেভাস্ক্রিপ্ট স্টেটমেন্ট একটি লাইনের বেশি দৈর্ঘ্যের হয়, তবে সর্বোত্তম ভাবে অপারেটর বা কমা পরে লাইন বিভক্ত করা হবে।

উদাহরণ

document.getElementById("demo").innerHTML =
    "Hello Kitty.";

আপনার হাতে পরীক্ষা করুন

নামকরণ নীতি

আপনার সব কোডের জন্য একই নামকরণ নীতি ব্যবহার করুন। উদাহরণ:

  • বদলী এবং ফাংশন নামকরণ যেমনহাইফেন ক্যাপিটেললিখা
  • সার্বজনীন বদলী ব্যবহার করাবড় অক্ষর(আমরা এমনটা করি না, কিন্তু অনেক সাধারণ)
  • স্থায়ী (যেমন PI) ব্যবহার করাবড় অক্ষর

আমরা কি বদলীর নামে হাইফেন ব্যবহার করা উচিত?হাইফেন、হাইফেন ক্যাপিটেলবাহাইফেনকি?

এটা প্রোগ্রামাররা সবসময় আলোচনা করেন প্রশ্ন। উত্তর এই প্রশ্নটি কে জবাব দিয়েছে তার উপর নির্ভর করে:

HTML এবং CSS-তে হাইফেন:

HTML5 অ্যাট্রিবিউটগুলি data- দ্বারা শুরু করতে পারে (data-quantity, data-price)।

CSS-এ property-names-তে হাইফেন ব্যবহার করা হয় (font-size)।

হাইফেনগুলি ভুলে হাইফেন গণিত করা হতে পারে। জেভাস্ক্রিপ্ট নামকরণ হাইফেন ব্যবহার করবেন না।

হাইফেন:

অনেক প্রোগ্রামাররা হাইফেন (date_of_birth) ব্যবহার করেন, বিশেষত SQL ডাটাবেস-এ।

হাইফেন সাধারণত PHP রেফারেন্স-এ ব্যবহৃত হয়।

পাস্কাল নামকরণ (PascalCase):

সি ল্যাঙ্গুয়েজ প্রোগ্রামাররা পাস্কাল নামকরণ ব্যবহার করেন বেশিরভাগ সময়।

হাইফেন ক্যাপিটেল (camelCase):

জেভাস্ক্রিপ্ট নিজে, jQuery এবং অন্যান্য জেভাস্ক্রিপ্ট লাইব্রেরি হাইফেন ক্যাপিটেল ব্যবহার করে।

জেভাস্ক্রিপ্ট নামকরণ $ সংকেত দ্বারা শুরু করবেন না। এটা জেভাস্ক্রিপ্ট নামকরণ সংঘাত সৃষ্টির কারণ হতে পারে।

এইচটিএমএল-তে জেভাস্ক্রিপ্ট লোড করা

বাইরের স্ক্রিপ্ট লোড করতে সরল গঠন (type অপশন অপরিহার্য নয়):

<script src="myscript.js"></script>

এইচটিএমএল ইলেকট্রনম

অসুস্থ হওয়া এইচটিএমএল শৈলীর পরিণাম, এটা জেভাস্ক্রিপ্ট ত্রুটির সৃষ্টির কারণ হতে পারে।

এই দুটি জেভাস্ক্রিপ্ট স্টেটমেন্ট ভিন্ন ফলাফল প্রদান করবে:

var obj = getElementById("Demo")
var obj = getElementById("demo")

যদি সম্ভব, তবে HTML-তে একই নামকরণ নীতি ব্যবহার করুন (জেভাস্ক্রিপ্ট-এর মতো)।

এইচটিএমএল সাইল গাইডলাইন পরিদর্শন করুন。

ফাইল এক্সটেনশন

HTML ফাইলগুলি ব্যবহার করা উচিত .html এক্সটেনশন (এবং .htm)

CSS ফাইলগুলি ব্যবহার করা উচিত .css এক্সটেনশন

জেভাস্ক্রিপ্ট ফাইলগুলি ব্যবহার করা উচিত .js এক্সটেনশন

ছোট ফাইলনাম ব্যবহার করুন

অধিকাংশ ওয়েব সার্ভার (অ্যাপাচ, ইউনিক্স) ফাইলনামের হাইপারটেক্সট সংবেদনশীল

london.jpg লন্ডন.jpg হিসাবে পরিদর্শন করা যায় না

অন্যান্য ওয়েব সার্ভার (মাইক্রোসফট এইচএস) হাইপারটেক্সট নামকরণযোগ্য নয়

london.jpg লন্ডন.jpg বা london.jpg হিসাবে পরিদর্শন করা যেতে পারে

আপনি হাইপারটেক্সট নামকরণযোগ্য এবং হাইপারটেক্সট সার্ভারের মধ্যে মিশ্রিত ব্যবহার করলে, তাহলে আপনাকে সর্বদা ক্রমাগত এবং একইভাবে সংরক্ষণ করতে হবে。

আপনি সাইটটিকে হাইপারটেক্সট নামকরণযোগ্য সার্ভার থেকে হাইপারটেক্সট সার্ভারে স্থানান্তরিত করলে, এমন ছোট ত্রুটিও আপনার সাইটকে ক্ষতিগ্রস্ত করতে পারে。

এই সমস্যাগুলি এড়াতে, সর্বদা ছোট ফাইলনাম (যদি সম্ভব) ব্যবহার করুন。

কার্যকারিতা

কম্পিউটার কোড কনভেনশন ব্যবহার করে না।বেশিরভাগ নিয়ম প্রোগ্রামের কার্যকারিতা প্রভাবিত করে না。

সম্প্রসারিত স্পেস এবং অতিরিক্ত স্পেস ছোট স্ক্রিপ্টগুলির জন্য গুরুত্বপূর্ণ নয়。

ডেভেলপমেন্টিং এক্সিকিউটিং স্ক্রিপ্টের জন্য, পড়াশোনা করা উচিত।বড় উৎপাদন স্ক্রিপ্টগুলির কাছে সংকুচিত করা উচিত。