Si të shkruani kod të pastër Javascript

Si të shkruani kod të pastër Javascript

Kështu që javën e kaluar kam mësuar për kodin e pastër dhe praktikën e mirë gjatë shkrimit të kodit javascript dhe doja të ndaja disa nga mësimet e mia me ju djema ky titullohet kodi i pastër javascript, por mendoj se shumica e gjërave janë themelore dhe të përgjithshme dhe mund të zbatohen në çdo gjuhë programimi.

Le të fillojmë:

1. Konventat e emërtimit.

• Përdorni emërtime më të mira për variablat dhe konstantet.
• Shembull duhet të deklarojmë dy herë të një treni që është ora e mbërritjes dhe e nisjes.
• Tani në këtë skenar shumë njerëz do të përdorin

Let time1 = new Date(2020,2,2)
Let time2 = new Date(2020,2,2

• Këto emërtime mund të përmirësohen jashtëzakonisht shumë dhe lexuesi mund t'i kuptojë më mirë duke e deklaruar variablin më me mençuri si kjo:

Let arrivalTime = new Date(2020,2,2)
Let departureTime = new Date(2020,2,2

• Një shembull tjetër i deklarimit të objektit të përdoruesit me detaje.

const obj = {
	username: "Pratik Tiwari",
	rollNo: 22

• Ky nuk është emri më i mirë për këtë objekt.

const user = {
	username: "Pratik Tiwari",
	rollNo: 22
}

• Këtu përdoruesi ka më shumë kuptim sesa një emërtim obj.
• Një shembull tjetër i objekteve JSON është. Supozoni..

const car = {
	carName: "Pratik Tiwari",
	carModel: x02
	carPrice: 282882
}

• Pra, në vend që të përdorni makinën gjatë gjithë kohës, përdorni vetëm veçoritë e saj pasi emri i objektit është një makinë, kështu që lexuesi do të kuptojë se po flasim për makinë

const car = {
	name: "Pratik Tiwari",
	model: x02
	price: 282882
}

2. Konventat e funksioneve.

• Mundohuni të mos i rritni argumentet e funksionit tuaj në më shumë se 2. Nëse është më shumë se 2, duhet të shikoni ndryshimin e strukturës së të dhënave
• Shembull:

function saveDetails(name, model, price, color) {
	// logic to save 
}

• Në vend të kësaj, ne mund të përcaktojmë një objekt dhe ta marrim atë si argument dhe ta dekonstruktojmë nëse dëshirojmë.

const car = {
	name: "Pratik Tiwari",
	model: x02,
	price: 282882,
	color: red
}
function saveDetails(car) {
	// logic to save 
}

• Shkruani kodin e testueshëm për njësi. Mos e shtrëngoni logjikën në një funksion të vetëm, por thyeni logjikën tuaj në funksione të ndryshme.

function emailActiveClients(clients) {
	clients.map(client => {
		const clientRecord = DB.lookip()
		if(clientRecord.isActive) {
			sendEmail(clientRecord.email);
		}
	})
}

• Kjo duhet të prishet kështu

function emailClient(clients) {
	clients.filter(isActiveClient).forEach(email);
}
function isActiveClient(client) {
	const clientRecord = DB.lookip(client);
	return clientRecord.isActive;
}

• Vetë emri i funksionit duhet të tregojë se çfarë bën funksioni. Shmangni shkrimin e kodit të kopjuar.
• Merrni për shembull këtë funksion:

function showDeveloperList(developers) {
  developers.forEach((developer) => {
    const expectSalary = developer.calculateExpectedSalary();
    const experience = developer.getExperience();
    const githubLink = developer.getGithubLink();
    const data = {
      expectedSalary,
      experience,
      githubLink,
    };
    render(data);
  });
}
function showManagerList(managers) {
  managers.forEach((manager) => {
    const expectSalary = manager.calculateExpectedSalary();
    const experience = manager.getExperience();
    const githubLink = manager.getMBAProjects();
    const data = {
      expectedSalary,
      experience,
      portfolio,
    };
    render(data);
  });

• Pra, këtu shohim dy funksione të ndryshme të cilat kanë dy qëllime të ndryshme dhe e justifikojnë veten në mënyrë shumë të përsosur. por këtu shohim se disa gjëra në funksion janë të njëjta dhe kështu mund t'i kombinojmë ato në një funksion të ndryshëm për të shmangur përsëritjen e vetvetes dhe për të ripërdorur kodin.
• Ndryshimi i vetëm në të dy funksionet është në zhvillues, ne po marrim lidhjen GitHub dhe në menaxher, ne po marrim lidhjen e portofolit dhe prandaj e trajtojmë atë dhe mund ta ripërdorim kodin tjetër shumë lehtë.

function showEmployeeList(employees) {
  employees.forEach((employee) => {
    const expectSalary = employee.calculateExpectedSalary();
    const experience = employee.getExperience();
    const data = {
      expectedSalary,
      experience,
    };
    switch (employee.type) {
      case "manager":
        data.portfolio = employee.getMBAProjects();
        break;
      case "developer":
        data.github = employee.getGithubLink();
        break;
    }
    render(data);
  }); 
}

3. Funksionet e vogla dhe njësi të testueshme.

• Supozoni se kemi një skenar ku duhet të kryejmë operacione në të dhëna të ndryshme, ne mund ta bëjmë atë në të njëjtin funksion, por duke pasur atë të diferencuar në funksione të ndryshme e bën atë dukshëm tërheqës dhe gjithashtu të testueshëm për njësi:

var items = [
    {
        name: 'RAM',
       price: 77.99,
       bought: true 
    },
    {
        name: 'CPU',
       price: 177.99,
       bought: false 
    },
    {
        name: 'Mouse',
       price: 7.99,
       bought: false 
    },
    {
        name: 'Hard Drive',
       price: 77.99,
       bought: false 
    },
    {
        name: 'Keyboard',
       price: 37.99,
       bought: true 
    }
]

• Kështu duhet të shkruajmë funksionin për skenarin tonë:

function generateIds(item){
    return items.map((i, index) => {
        i.id = index + 1;
        return i;
    })
}
function getTotalCost(items){
    return items.filter(i => i.bought);
}
function getBoughtItems(items){
    return items.filter(i => i.bought);
}
functionCalculateCost(items){
    let cost = 0;
    items.forEach(i => {
        cost = cost + i.price;
    })
    return cost;
}
function getTotalCost(items){
    const itemsWithIds = generateIds(items);
    const boughtItems = getBoughtItems(itemsWithIds);
    return calculateCost(boughtItems);
}

Shmangni efektet anësore

• ajo që zakonisht bëjnë shumë zhvillues është të supozojmë se kur kemi një grup dhe duhet t'i shtojmë një vlerë dhe të kthejmë grupin e sapo shtuar, ne thjesht e shtyjmë elementin në grup, i cili nuk është alternativa më e mirë në vend të kësaj ajo që duhet të bëjmë është që ne duhet të krijojë një kopje të re të grupit dhe të kthejë grupin e ri me vlerën e re të shtuar. le ta shohim në mënyrë të dukshme në shembullin e mëposhtëm.

const addItemToCart = (cart, item) => {
    cart.push({item, date: Date.now()});
}
const addItemToCart = (cart, item) => {
    return [...cart, {item, date: Date.now()}]
}

Kodi deklarativ dhe Programimi Funksional.

• Shmangni shkrimin e kodit imperativ. dmth kur filloni të shkruani thjesht për sythe kudo përdorni programim më funksional.
• Se si ky efekt dhe duket, le ta shohim me një shembull:

// imperative style
var totalOutput = 0;
for (let i = 0; i < programmerOutput.length; i++) {
  totalOutput += programmerOutput[i].linesOfCode;
}
// Declarative style
const totalOutput = programmerOutput.reduce((lines, output) => {
  return lines + output.linesOfCode;
}, 0);
const newResult = programmerOutput.filter(i => i.linesOfCode >= 1000).map(i => {
    return {
        ...i, coolCoder = true
    }
})

Pra, këto ishin disa nga gjërat që unë me të vërtetë mendoj se janë shumë themelore dhe të rëndësishme gjatë shkrimit të kodit të pastër.

Shperndaje nese te pelqeu :)