Klass vs tehas: edasise tee uurimine

BookAuthority nimetas Discover Funktsionaalse JavaScripti üheks parimaks uueks funktsionaalse programmeerimise raamatuks !

ECMAScript 2015 (aka ES6) on varustatud classsüntaksiga, nii et nüüd on meil objektide loomiseks kaks konkureerivat mustrit. Nende võrdlemiseks loon klassiga sama objekti definitsiooni (TodoModel),ja siis tehase funktsioonina.

TodoModel kui klass

class TodoModel { constructor(){ this.todos = []; this.lastChange = null; } addToPrivateList(){ console.log("addToPrivateList"); } add() { console.log("add"); } reload(){} }

TodoModel kui tehase funktsioon

function TodoModel(){ var todos = []; var lastChange = null; function addToPrivateList(){ console.log("addToPrivateList"); } function add() { console.log("add"); } function reload(){} return Object.freeze({ add, reload }); }

Kapseldamine

Kõigepealt märkame, et kõik klassiobjekti liikmed, väljad ja meetodid on avalikud.

var todoModel = new TodoModel(); console.log(todoModel.todos); //[] console.log(todoModel.lastChange) //null todoModel.addToPrivateList(); //addToPrivateList

Kapseldamise puudumine võib tekitada turvaprobleeme. Võtke näide globaalsest objektist, mida saab muuta otse arendajakonsoolilt.

Tehasefunktsiooni kasutamisel on avalikud ainult need meetodid, mida me eksponeerime, kõik muu on kapseldatud.

var todoModel = TodoModel(); console.log(todoModel.todos); //undefined console.log(todoModel.lastChange) //undefined todoModel.addToPrivateList(); //taskModel.addToPrivateList is not a function

seda

thiskonteksti kaotamise probleemid on klassi kasutamisel endiselt olemas. Näiteks thiskaotab pesastatud funktsioonide kontekst. See pole mitte ainult kodeerimise ajal tüütu, vaid on ka pidev vigade allikas.

class TodoModel { constructor(){ this.todos = []; } reload(){ setTimeout(function log() { console.log(this.todos); //undefined }, 0); } } todoModel.reload(); //undefined

või thiskaotab konteksti, kui meetodit kasutatakse tagasihelistamiseks, näiteks DOM-i sündmusel.

$("#btn").click(todoModel.reload); //undefined

Tehasefunktsiooni kasutamisel pole selliseid probleeme, kuna see ei kasuta thisüldse.

function TodoModel(){ var todos = []; function reload(){ setTimeout(function log() { console.log(todos); //[] }, 0); } } todoModel.reload(); //[] $("#btn").click(todoModel.reload); //[]

see ja noole funktsioon

Noolefunktsioon lahendab osaliselt thisklassides kaotatud kontekstiprobleemid, kuid loob samas uue probleemi:

  • this ei kaota enam pesastatud funktsioonide konteksti
  • this kaotab konteksti, kui meetodit kasutatakse tagasihelistamiseks
  • noolefunktsioon soodustab anonüümsete funktsioonide kasutamist

Tegin noolefunktsiooni TodoModelkasutamise ümber. Oluline on märkida, et noolefunktsiooni taastamise käigus võime kaotada midagi loetavuse jaoks väga olulist, funktsiooni nime. Vaadake näiteks:

//using function name to express intent setTimeout(function renderTodosForReview() { /* code */ }, 0); //versus using an anonymous function setTimeout(() => { /* code */ }, 0);

Avastage funktsionaalne JavaScript nimetati üheksparimad uued funktsionaalse programmeerimise raamatud BookAuthoritylt !

Funktsionaalsete programmeerimisvõtete rakendamise kohta Reactis lisateabe saamiseks vaadake funktsionaalset reageerimist .

Õpi funktsionaalset reaktsiooni projektipõhiselt koos funktsionaalse arhitektuuriga koos React ja Redux .

Jälgi Twitteris