Vreau sa devin IT-ist

Design pattern-urile sunt solutii pentru problemele de design care se intalnesc zi de zi in diferite aplicatii.

Acestea se impart in 3 mari cetgorii:

• Creational

• Structural

• Behavioral

1. Abstract Factory

Definitie= ofera o interfata pentru crearea famililor de obiecte ( dependente sau care au legatura unul cu celalalt) fara a specifica clasele lor concrete.

Diagrama

Participanti

• AbstractFactory: declara o interfata pentru operatiile care creaza abstract products
• ConcreteFactory: implementeaza operatiile pentru a crea product objects
• AbstractProduct: declara o interfata pt un type of product object
• Product: defineste un product object si implementeaza AbstractProduct interface
• Client: foloseste cele 2 interfete

• Object.create() este o metoda statica care creaza un nou obiect cu prototype-ul setat la un obiect anume

const cat={
 makeSound: function() {
  console.log('miau');
  }
}

cat.makeSound(); //miau

const cat={
 makeSound: function() {
  console.log(this.sound);
  }
}

const mark= Object.create(cat);// creaza un nou obiect si va seta prototipul
 acelui obiect sa fie cat
mark.sound= 'miau';

mark.makeSound(); //miau

console.log('Is mark a cat?', cat.isPrototypeOf(mark)); //true

-Object.create() este de preferat pt prototype model in locul new

const cat={
 init: function(sound){
  this.sound= sound
 }
 makeSound: function() {
  console.log(this.sound);
  }
}

function objectCreate(proto) {
  const obj ={}
  Object.setprototypeOf(obj, proto);
  return obj;
}

const mark= objectCreate(cat);// creaza un nou obiect si va seta prototipul
 acelui obiect sa fie cat
mark.init= 'miau';

mark.makeSound(); //miau

console.log('Is mark a cat?', cat.isPrototypeOf(mark)); //true

Concluzii:

-Object.create() este o metoda statica care creaza un nou obiect cu prototype-ul setat la un obiect anume

let cat = { breed: 'munchkin'}
let myCat ={ name: 'Sisi'}

Object.setPrototype(myCat, cat);

myCat.name(); // Sisi
myCat.breed();// munchkin
myCat.__proto__ // {breeed: 'munchkin'}, o referinta pt acel obiect

cat.tailLength =15;

myCat.__proto__ // {breeed: 'munchkin', tailLength: 15}
myCat.tailLength //15

– delegarea obiectelor catre alte obiecte

-prototype e pt functii

function Dog(){}

Dog.prototype.breed= 'Bulldog';
let myDog= new Dog();

myDog.breed;// 'Bulldog'

myDog.__proto__ ; // {breed: 'Bulldog'}
myDog.prototype; //undefined
Dog.prototype; // {breed:'Bulldog'} , a fost setat mai sus

function Giraffe() {};
Giraffe.prototype;// {}

let koala= {}
koala.prototype; // undefined
koala.__proto__ ; // {}
koala.__proto__== Object.prototype; //true
Object.prototype.sleep ='zzzzzz';
koala.sleep; //zzzzzz

Concluzii:
–__proto__ este proprietatea care pe un obiect, pointeaza catre prototipul care a fost setat

–prototype este proprietatea pe o functie, care este setat ca proprietatea daca se foloseste  new

• “new” aplicat functiilor

function Person(saying){
  this.saying= saying;
}

person.prototype.talk = function(){
  console.log('I say:', this.saying);
}

var pers1= new Person('blablabla');

pers1.talk(); //va afisa 'I say:blablabla'

• creaza un nou obiect,
• seteaza prototype-ul
• executa contructorul cu this
• retuneaza obiectul creat

function Person(saying){
  this.saying= saying;
}

person.prototype.talk = function(){
  console.log('I say:', this.saying);
}

function new1(contructor){
  var obj={};
  Object.setPrototypeOf(obj, contructor.prototype);
  var argsArray= Array.prototype.slice.appaly(arguments);
  constructor.apply(obj, argsArray.slice(1));
  return obj;
}

var pers1= new1(Person,'blablabla');

pers1.talk(); //va afisa 'I say:blablabla'

Daca constructorul retuneaza un obiect:

function Person(saying){
  this.saying= saying;
  return {
   myObj: true
  }
}

person.prototype.talk = function(){
  console.log('I say:', this.saying);
}

function new1(contructor){
  var obj={};
  Object.setPrototypeOf(obj, contructor.prototype);
  var argsArray= Array.prototype.slice.appaly(arguments);
  return constructor.apply(obj, argsArray.slice(1)) || obj;
}

var pers1= new1(Person,'blablabla');
console.log('hello', pers1); //hello {myObj:true}

Concluzii:

new:

• creaza un nou obiect,
• seteaza prototype-ul
• executa contructorul cu this
• retuneaza obiectul creat

1.Ce sunt prototipurile?

De obicei cand auzim despre mostenire ne gandim la clase. In JavaScript obtinem mostenirea cu prototypes.

Prototipurile si clasele sunt diferite.In viata de zi cu zi un prototip ar putea fi asemanat cu un delegat. O persoana pe care o delegi sa voteze in locul tau atunci cand tu nu esti disponibil.

2. De ce trebuie sa invam despre prototipuri?

Primul motiv ar fi pentru ca este usor de invatat si al doilea motiv ar fi pentru ca in JavaScript exista “class” keyword.

Este un concept mai simplu decat clasele.

Exemplu 1:

function talk(sound){
   console.log(sound);
};

talk('ham'); //va afisa 'ham'

Exemplu 2:

function talk(){
   console.log(this);// this va fi global object, care nu are proprietatea sound
   console.log(this.sound);
};

talk(); //va afisa undefined

Exemplu 3:

function talk(){
   console.log(this);
   console.log(this.sound);
};

let animal = {
    talk:talk;
};

animal.talk(); 
// va afisa {talk: [Function: talk] }, pentru this
// undefined pt ca animal nu are proprietatea sound

Cand apelam animal.talk() tot ce este in stanga la talk va fi vazut ca si this.

Cand asignam unei proprietati o variabila cu acelasi nume, punem sa declaram astfel:

let animal = {
    talk
};

Exemplu 4:

function talk(){
   console.log(this);
   console.log(this.sound);
};

let animal = {
    talk:talk;
};

let cat = {
    sound:'meow'
};

cat.talk();// eroare 'it's not a function' pt ca cat nu are functia talk

Exemplu 5:

function talk(){
   console.log(this);
   console.log(this.sound);
};

let animal = {
    talk:talk;
};

let cat = {
    sound:'meow'
};

Object.setProtoTypeOf(cat, animal);

cat.talk(); 
//{sound: 'meow'} = this
//'meow'

Cum functioneaza? Merge intai in cat si se uita dupa functia talk, nu o gaseste si atunci o cauta in prototip. Are cat prototip? Da are si este animal, care are functia talk.

Exemplu 6:

function talk(){
   console.log(this.sound);
};

let animal = {
    talk:talk;
};

let cat = {
    sound:'meow'
};

let dog = {
    sound:'ham'
};

Object.setProtoTypeOf(cat, animal);
Object.setProtoTypeOf(dog, animal);

cat.talk(); //'meow'

dog.talk(); //'ham'

Exemplu 7:

function talk(){
   console.log(this.sound);
};

let animal = {
    talk:talk;
};

let cat = {
    sound:'meow'
};

let dog = {
    sound:'ham'
};

let bigDog = {
  hamham: function(){
       console.log(this.sound.toUpperCase());
  }
};

Object.setProtoTypeOf(cat, animal);
Object.setProtoTypeOf(dog, animal);

cat.talk(); //'meow'

dog.talk(); //'ham'

bigDog.hamham(); // cannot read property toUpperCase of undefined pt ca
// sound este undefined

Object.setProtoTypeOf(bigDog, dog);
bogDog.hamham();// 'HAM'

Un lucru important este ca prototipurile sunt delegates, ele nu creaza o copie a obiectului original, in acest caz animal. De fapt se delega accesul prototipului la obiectul original. Nu functioneaza ca si clasele care creaza copii.

Exemplu 8:

function talk(){
   console.log(this.sound);
};

let animal = {
    talk:talk;
};
let dog = {
    sound:'ham'
};

let bigDog = {
  hamham: function(){
       console.log(this.sound.toUpperCase());
  }
};

Object.setProtoTypeOf(dog, animal);

animal.talk = function() {
console.log('lalala');
};

Object.setProtoTypeOf(bigDog, dog);

dog.talk(); // va afisa lalala
bigDog.hamham();// va afisa 'HAM'

Desi am setat prototipul pt dog inainte se a asigna alta valoare functie talk, dog.talk() va afisa ‘lalala‘.

Cum functioneaza? Cand se apeleaza dog.talk() se cauta prima data functia talk in dog, nu se gaseste si merge cautarea mai departe in prototip (animal). Acolo gaseste functia talk, dar care a fost schimbata.

Concluzii:

-foloseste pentru acest obiect un alt obiect ca si back-up, ca si prototype;

– daca se apeleaza un obiect cu o proprietate pe care nu o are, cauta proprietatea in celalalt obiect care este prototipul;

-setProtoTypeOf(obj, prototypeObj);

Nu exista o modalitate corecta (sau cea mai corecta) de a crea obiecte in JavaScript.

let dog = {
sound:"ham",
talk: function(){
   console.log(this.sound)
  }
};

dog.talk(); // va afisa "ham"

Avem un obiect “dog”, care are o proprietate “sound”, care are atribuit un string “ham” si metoda “talk”, metoda ce va printa proprietatea. Dupa ce se apeleaza metoda dog.talk() se va afisa “ham”.

let talkFunction= dog.talk;
talkFunction(); // va fi undefined

Am luat metoda “dog.talk” si am reasignat-o unei variabile si apoi am apelat accea variabila.

In JavaScript putem asigna o functie unei variabile, iar acest lucru este posibil pentru ca JavaScript nu este doar un limbaj orientat pe obiecte, este si un limbaj de programare functionala. Functiile sunt values ca si string-urile sau numere, deci pot fi stocate in variabile.

In exemplu, se va afisa “undefined” pt ca de aceasta data “this” nu va mai fi “dog”. Intr-o functie cuvantul “this” nu se refera la contextul unde a fost definita functia, ci se refera la contextul unde functia a fost apelata.

let talkFunction= dog.talk;
let boundFunction=
   talkFunctionn.bind(dog);
boundFunction(); // va afisa "ham"

“Bind” ia functia “talk” si va returna o noua functie care va face bind(dog). In acest caz “bind” forteaza “this” sa fie “dog”.

let button = document.getElementBy('myNiceButton');

button.addEventListener(
'click',
dog.talk
);

Ne folosim de aceasta data de un buton, la care i-am asignat pe eventul de click, metoda “talk”. Cand se va face click pe buton, “this” nu va fi “dog” ci va fi “window object”.

Acest lucru se poate rezolva adaugand “bind”.

button.addEventListener(
'click',
dog.talk.bind(dog)
);

THIS AND BIND

Avem functia talk cu un parametru sound, care va afisa acel parametru. Astfel, cand functia va fi apelata, se va afisa “lalala”.

function talk(sound){
   console.log(sound);
};

talk('lalala'); //va afisa lalala

Acum vom sterge parametrul functiei si in console.log vom incerca sa accesam proprietatea sound cu this:

function talk(){
   console.log(this.sound);
};

talk(); //undefined

Ce este this? In JavaScript cuvantul this inseamna acelasi lucru ca in engleza =>nu inseamna nimic fara a avea un context.(I dont’t like this. This what? => avem nevoie de context).
Daca vom apela functia talk(), se va afisa undefined.

Cand folosim this, trebuie sa cunoastem contextul. In acest caz this= global object, window object, depinde de compilator.

function talk(){
   console.log(this.sound);
};
 let boromir= {
  sound: 'my new sound'
}

let talkBoundToBoromir = talk.bind(boromir);
talkBoundToBoromir(); // va afisa "my new sound"
talk(); //undefined

Cu bind se spune in mod explicit la ce anume ne referim cand spunem this. 

talkBoundToBoromir() va functiona pentru ca este o copie a functiei talk() unde am binduit this la o valoare specifica.

O alta modalitate este sa punem o referinta la functie ca o proprietate. Un lucru foarte important este ca functile in JavaScript sunt doar niste valori, care pot fi atribuite unor proprietati.

let talk = function() {
  console.log(this.sound);
 }; 

let boromir= {
  speak: talk, // o referinta a functie talk a fost asignata la proprietatea speak
  sound: 'my new sound'
};

boromir.speak(); // am apelat proprietatea unui obiect
talk(); // undefined

// asignam unei variabile
let bla = boromir.speak;
bla();// undefined pentru ca bla se refera la acceasi functie

Folosind bind lucrurile se schimba putin:

let talk = function() {
  console.log(this.sound);
 }; 

let boromir= {
    sound: 'my new sound'
};

boromir.speak= talk.bind(boromir);

let bla = boromir.speak;
bla();// va afisa "my new sound" pentru ca a fost bind-uit
talk();// undefined

Un alt exemplu:

let talk = function() {
  console.log(this.sound);
 }; 

let boromir= {
    blabla: talk,
    sound: 'my new sound'
};

let gollum = {
    jabber: boromir.blabla,
    sound: "Happiness....."
};

gollum.jabber();// va afisa "Happiness....."

Concluzii:

-this reprezinta contextul in momentul apelului;

-o functie este doar o valoare;

-o functie poate fi asignata unei proprietati a unui obiect;

-o functie poate fi asignata unei variabile;

-o functie poate fi argumentul unei functii;

-un functie poate fi apelata in contexte multiple;

–this are sens cand se cunoaste contextul, altfel se foloseste bind (se creaza o noua functie).

• data:

myDate: new Date()

• un Url

myUrl: “http://myTestURL”

• un boolean

myBoolean: true

myBoolean: false

• un string:

myString: “” , daca vrem sa fie gol sau

myString:”test”

• un array:

myArray: []

• un obiect:

myObject: {}

• un array de obiecte:

myArrayOfObjects: [{},{},{}]

• un observable:

myObservable: ko.observable()

myObservable: ko.observable(true)

myObservable: ko.observable(false)

myObservable: ko.observable(“myString”)

• un observableArray:

myObservable: ko.observableArray()

• o functie care nu retuneaza nimic:

myFunction: function () { }

• o functie care retuneaza un obiect:

myFunction: function () { return {}; }

• o functie care retuneaza un promise:

myFunction: function() { return $.Deferred().promise(); }

• un promise:

putPromise: function() {
return $.Deferred().resolve(‘Test’, ‘success’, { status: 200 }).promise();
}

myPromise: $.Deferred().resolve({Items: [], Links: []})

myPromise: function (param) {
var dfr = $.Deferred();
dfr.resolve(param);
return dfr.promise();
}

myPromise: function (param) {
var dfr = $.Deferred();
dfr.resolve(null, [[]]);
return dfr.promise();
}

• un event

myEvent: ko.event()

• un spy:

myFunction: jasmine.createSpy()

myFunction: jasmine.createSpy(‘myFunction’)

myFunction: jasmine.createSpy(‘myFunction’).and.callFake(function () {
return $.Deferred().resolve({}, 200, {status: ‘OK’}).promise();
})

myObservable: jasmine.createSpy(‘myObservableSpy’,myObservable).and.callThroug()

• un ViewModel

myViewModel= new myViewModel()

myViewModel= new myViewModel(param)

• fake server

myFakeserver: sinon.fakeServer.create();

myFakeServer.respondWith(“GET”, myUrl, JSON.stringify(response));

• functie ce returneaza un promise

sinon.stub().returns($.Deferred().resolve([]).promise())

sinon.spy(function () { var dfr = $.Deferred(); dfr.resolve(); return dfr.promise(); });

jasmine.createSpy().and.callFake(function() {
return smth;
})

myMethod: sinon.stub().returns(cachedProductListingMock)

myMethod: sinon.stub().returns({})

sinon.spy()

1. Ce este o “promise“?

“Promise” reprezinta eventualul rezultat in urma unui operatii asincrone.

2. De ce sa folosim “Promises”?

Reprezinta de fapt o alternativa pentru executarea si manevrarea operatiilor asincrone si care in acelasi timp ajuta sa “prindem” erorile folosind moduri aproximativ similare cu cele sincrone (try/catch).

3. Starile unei “Promise“

Poate avea trei stari:

• Pending ( in asteptare)- rezultatul promise-ului nu a fost inca determinat din cauza operatiilor asincrone deci este incomplet;
• Fulfilled (completa)-  operatia asincrona este completa si promise-ul are valoare;
• Rejected ( respinsa)- operatia asincrona a esuat, iar promise-ul nu va fi niciodata completa, asceasta avand un motiv care indica de ce operatia a esuat.

1. Ce este Grunt?

Atunci cand se face development exista numeroase task-uri care sunt repetitive cum ar fi: incarcarea codului JavaScript si CSS, verificarea pentru erori, compilarea CSS (SASS) si multe altele.

Grunt este un task runner, asta inseamna ca toate aceste procese repetitive vor fi facute automat.

3. Erori in fisierele JavaScript

Pentru a verifica daca avem erori in fisierele JavaScript se foloseste urmatoarea comanda:

$ grunt jshint

4.Este tot codul JavaScript testat?

Pentru a verica cat anume din cod este testat se executa comanda:

grunt test:coverage

Toate detaliile in ceea ce priveste procentul din cod testat pot fi gasit accesand folderul Content al proiectului. (Content\coverage\index).

5. Incarcarea unei singure teme

In cazul in care proiectul se poate rula pe mai multe teme, exista posibilitatea de a a incarca fisirele doar de la tema respectiva (unde XXXXX este codul temei).

grunt watch –theme=XXXXX

6. Grunt si Chrome

Daca se doreste o investigare mai amanuntita a testelor ( debug in browser) se poate face acest lucru cu comanda:

grunt test:chrome