CategoriaHacks

Proprietà e metodi privati in JavaScript: una soluzione per tutti i browser

Una delle più apprezzate novità della versione 6 di EcmaScript (la più recente versione di JavaScript supportata da tutti browser) è il pieno supporto della programmazione ad oggetti tramite la possibilità di definire vere e proprie classi.

Una feature che non ha ancora pieno supporto da parte di tutti i browser (mancano all’appello Safari e Samsung Internet) è però quella relativa a proprietà e metodi privati, a mio avviso indispensabili nell’ambito di una compiuta organizzazione della logica applicativa.

Ebbene, esiste un hack, tutt’altro che complesso, che consente di rendere operativa questa funzionalità su tutte le più recenti versioni dei browser.

Esempio:

<script>
class MyClass {

    constructor() {

        let privateProperty;
        let publicProperty;
       
        let privateMethod = function() {
	     // ...
        }
       
        let publicMethod = function() {
	     // ...
        }
     
        Object.assign(this, {publicProperty});
        Object.assign(this, {publicMethod});

    }

}

let c = new MyClass();

c.publicProperty = true; // OK
c.privateProperty = true; // ERRORE
c.publicMethod(); // OK 
c.privateMethod(); // ERRORE
</script>

L’espediente consiste nello spostare tutte le proprietà e i metodi della classe all’interno del costruttore, trasformandoli in variabili interne: nel caso dei metodi, questi diventano variabili definite da funzioni anonime (il modo di invocare tali metodi rimane però esattamente lo stesso).

Una volta fatto questo, occorre richiamare, sulle sole proprietà e metodi che si desidera rendere pubblici, il metodo Object.assign: questo “promuove” tali elementi rendendoli accessibili al di fuori del costruttore e di conseguenza nell’ambito di ogni istanza della classe.

CSS: come creare un elemento responsive con proporzioni costanti

Qualche tempo fa mi sono imbattuto in un problema: avevo necessità di definire un elemento HTML che mantenesse, a qualsiasi risoluzione schermo, le medesime proporzioni, ovvero lo stesso rapporto tra larghezza e altezza. Dovendo essere responsive non potevo definirlo attribuendo esplicitamente misure in pixel ai rispettivi lati.

In apparenza, sembra che il CSS non possa venire in aiuto in un caso del genere: beh, ciò non è del tutto vero.

Le proprietà padding, infatti, quando espresse in percentuale, calcolano il proprio valore in rapporto alla larghezza dell’elemento contenitore. Ciò vale anche, sorprendentemente, per padding-top e padding-bottom.

Mettiamo assieme i pezzi. Per semplicità userò CSS inline (pratica in genere non consigliata):

<div style="width: ...">
    <div style="width: 100%; padding-top: 50%; position: relative;">
         <img src="..." style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" />
    </div>
</div>

Il primo <div>, quello più esterno, è il contenitore, che avrà qualsivoglia larghezza non fissa. Il secondo <div>, quello più interno, ha le proprietà width: 100% e padding-top: 50%: misurerà dunque in larghezza il 100% della larghezza del proprio contenitore e in altezza il 50% di tale valore, mantenendo tali proporzioni a qualsiasi risoluzione schermo.

Si tratta però di un <div> interamente “riempito” dal proprio padding, incapace quindi di contenere altri oggetti al proprio interno. A meno che questi non abbiano la proprietà position: absolute che consente di “sovrapporre” un oggetto al proprio immediato contenitore.

Questa proprietà, insieme a width: 100% e height: 100%, fa sì che l’elemento più interno – in questo caso una immagine, ma vale virtualmente per qualsiasi tipo di oggetto – copra l’esatto spazio occupato dal proprio contenitore. Mantenendo quindi, a qualsiasi risoluzione schermo, le stesse proporzioni che sono state attribuite a quest’ultimo.

Come seguire le pagine Facebook senza essere registrati

Come far a meno di Facebook (aspirazione, questa, sempre più condivisa) senza rinunciare al lato informativo offerto dagli aggiornamenti delle “pagine”? Una soluzione c’è: ho pensato di condividerla non perché sia un hack di particolare ingegno, ma in ragione del fatto che non è scontato, per l’utente comune, trovare gli strumenti necessari.

Le pagine pubbliche di Facebook, a onor del vero, sono individualmente visibili anche agli utenti non registrati: basta cercare su Google l’indirizzo di ciascuna. Ciò che manca è la funzione di aggregazione dei nuovi post, propria della “home” di Facebook.

Alla parola “aggregazione” qualcuno tra i più “tecnologicamente smaliziati” avrà pensato: e se le pagine Facebook avessero dei feed pubblici? In tal caso basterebbe un aggregatore per ottenere la funzionalità desiderata.

La risposta è no, le pagine di Facebook non hanno feed. E al contempo è sì, perché con gli opportuni strumenti è possibile generarli ad hoc.

Il servizio FetchRSS (gratuito nella versione base) è infatti in grado di leggere il codice HTML di una pagina Facebook per ricavarne un feed pubblico:

In corrispondenza di ciascun feed, basta far click su “Get ATOM” per ricavare l’indirizzo da inserire sul proprio aggregatore (è possibile anche esportare tutti i feed in una sola volta tramite file OPML).

Mi permetto anche un piccolo consiglio: su piattaforma Android Flym è un ottimo aggregatore e – cosa ormai più unica che rara – è del tutto privo di annunci pubblicitari.

© 2021 Fabio Vento

Theme by Anders NorénPrivacyTorna su ↑