Hogyan kezdjük el írni a ‘komplex’ kódot

ez egy bejegyzés arról, hogy gondolkodjunk az írt kódról. Minden, ami itt található, az én véleményem, és mindig figyelembe kell vennie a véleményem érvényességét, összehasonlítva őket a jobbakkal! A nyelv, amit használni fogok, a Javascript. A cikk megértésének előfeltétele a köztes Javascript ismerete és néhány objektumorientált fogalom ismerete. Ezt a bejegyzést Cristina Lopes “gyakorlatok programozási stílusban”című kiváló könyvének 9.fejezete ihlette.

egy nagyon gyakori minta kód—

1. adjon meg egy egyszerű objektumot

var store_item = {
name : 'wonderball'
}

2. Ezután, hogy készen álljon a weboldalon való megjelenítésre, minden tulajdonságot futtatunk néhány funkción keresztül.

addExclamationPoint(store_item);
capitalizeName(store_item);function addExclamationPoint(item) {
item.name = item.name + '!';
}function capitalizeName(item) {
// some code to capitalize item.name, cut out for brevity.
}

és gyakran így készítjük elő az adatokat a megjelenítésre. Most, hogy a store_item-nek nagybetűs neve és felkiáltójele van, problémamentesen megjeleníthetjük a weboldalunkon. Ha van egy harmadik dolog, amit meg kell tennünk, egyszerűen írunk egy harmadik függvényt az adatok átalakításához, és átadjuk az elemet a szokásos módon.

az itt létrehozott nagyobb, nagy képminta:

van néhány divatos kifejezés az ilyen típusú programozásra, például ‘procedurális’ vagy ‘imperatív’, de más kifejezésnek nevezném: ‘egyszerű’. Nagyon egyszerű programozás. Ez az a fajta programozás, amelyet mindenki először megtanul. A kis léptékű programok esetében ez a legjobb módja a programozásnak,mert az emberek jól tudják követni az 1-10 logikai lépést.

amikor a program elég nagy lesz (több mint 10 transzformáció az adatok megjelenítése előtt), vagy egy függvény sok adatobjektumot módosít (több mint 2), vagy sok if utasításunk van, ami elágazó logikát okoz, ez az ‘egyszerű’ programozás ehelyett ‘rendetlenséggé’válik.

a legtöbb minden projekt vagy kódrészlet rendetlen lesz. A programozás nagy része valójában a kódolók, akik a rendetlenség elkerülésének módjaival állnak elő, nem pedig az adatok megjelenítésének tényleges problémájára. A programozás feladata a kódírás megtanulása oly módon, hogy 100-as transzformációkat alkalmazzunk 100-as adatdarabokon, és ne legyen rendetlenség.

most hadd mutassak be egy nagy változást a fenti mintában, és fontold meg, hogy amit most mutatok, az az első lépés ahhoz, hogy fejlettebb kódolóvá válj, mert ez kitör az ‘egyszerű’ kódolásból. Ez bemutatja, hogy az új gondolkodásmódot, hogyan kell csinálni egy egyszerű dolog, mint módosítása néhány adatot egy weboldal. Az objektumnak most megvan a saját funkciója, az úgynevezett ‘bind’, és ez a funkció lesz felelős az adatok átalakításáért.

var store_item = {
name: 'wonderball',
bind: function(func) {
this.name = func(this.name);
return this;
}
}// Here are two functions I'll use to transform the store_item.name, each one now just takes a name and modifies it, neither function has any clue what properties it's changing in store_item anymore.function capitalize(name) {
return name.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() +
txt.substr(1).toLowerCase();
});
}function addExclamationPoint(name) {
return name + '!';
}store_item.bind(addExclamationPoint).bind(capitalize);

ez a megoldás pontosan úgy viselkedik, mint a fenti eredeti ‘egyszerű’ kód, de bonyolultabbnak tűnik, miért? Mert az egyszerű feladat van, ez túlzás, de mi a kompromisszumok ez a komplexitás?

ennek megválaszolásához beszéljünk arról, hogy mi a különbség:

1. van ez az őrült, furcsa, ‘bind’ függvény, amely argumentumként veszi figyelembe, nem egy új értéket a névhez,hanem egy másik függvényt, mondjuk most?
2. a nagybetűs és addExclamationPoint függvények különbözőek, most már nem hívják item.name közvetlenül többé.
3. már nem állítunk be nevet ‘ = ‘ – val, ehelyett ezt a furcsa store_item-et használjuk.bind (function_name), szintaxis helyett.

ezzel a három különbséggel most fel kell tennünk magunknak a kérdést, jobb-e ez a változás? Talán nem, ha a projekt ilyen kicsi marad. Talán igen, ha a projekt sokkal nagyobb lesz.

a legfontosabb változás az, hogy a store_item objektum most felelős az állapotának kezeléséért a bind függvényen keresztül. Természetesen, ha akartad, közvetlenül megváltoztathatod store_item.name, de az objektum gyakorlatilag sikoltozik: “Hé, használd a kötési funkciómat, hogy megváltoztass!”.

de most már könnyű látni egy mintát, ahol több store_items Minden kezelni a saját állapotát a saját .bind funkció:

// Three store items, each one with a different state.store_item1.bind(addExclamationPoint).bind(capitalize); //Wonderball!store_item2.bind(capitalize);
//Wonderballstore_item3.bind(addExclamationPoint);
//wonderball!

mi lehet, hogy 100 store_item A és kezelni az állam elég könnyen. Csak annyit kell tennünk, hogy írunk egy függvényt, amelynek csak visszatérési értéke van, és használjuk az objektumunkat .bind funkció.

ennek a mintának a varázsa a bind függvényben van, ezért vizsgáljuk meg ezt még egy kicsit.

// 1. First define the function, and have it take as an argument another function. Taking a function as an argument, instead of data is the core change here. bind: function(func) { // 2. This second line is the secret sauce, it will run the function you passed in with 'this.name' as an argument, and then assign whatever value is returned to this.name. Mull this over. this.name = func(this.name);// 3. Finally, return 'this'. You don't have to have this step in here, but returning 'this' is what allows .bind chainging to happen (.e.g. doing .bind().bind() vs .bind(); .bind();) return this;
}

tehát itt van, összetettebbé tettük a kódunkat, de most van néhány új előnyünk:

1. egy objektum most módosítja a saját állapotát, és csak egy sorban képes jelentősen megtenni.
2. az általunk írt függvények tisztábbak, nem módosítják az objektumok tulajdonságait, mint a fenti példában, csak vesznek egy bemenetet és visszaadják a kimenetet.
3. tudjuk, hogy amikor módosítjuk egy objektum állapotát, az általunk használt függvények valószínűleg nem módosítják véletlenül más objektum állapotát

de van néhány hátrányunk is:

1. A kód határozottan kevésbé intuitív egy új jövevény most.
2. egy kis webhely esetében ez a kód túlságosan összetett.

tehát mi a végső ítélet, ez így jobb? Rosszabb? Még zavarosabb? (Eleinte igen.) Mindezek a kérdések nyitottak, de egy dolgot biztosan mondhatok, az ilyen minták megfontolása és megértése része a Javascript tanulásának és a kódolóként való növekedésnek. A kódolás egyszerű módjának folyamatos használata a problémák megoldására egy idő után fenntarthatatlanná válik. Ha időt szánsz arra, hogy több ‘összetett’ módszert tanulj meg, sok nagyszerű dolog történik: megnyílik az oldalirányú gondolkodási képességed, több különböző típusú kódot olvashatsz, és növelheted a problémák megoldására vonatkozó gondolkodási módokat. Talán ez az igazi előnye ennek és más minták megtanulásának.