Com’è fatto un framework javascript come Bootstrap

Beh se stai parlando di Bootstrap allora sei interessato a framework progettati in javascript. Per quanto possa sembrarti strano creare un framework o una libreria di questo tipo non è particolarmente complesso. Bootstrap è formato da un file javascript, la libreria, e da alcuni file con estensione css, la parte più interessante di bootstrap, che dà vita e forma ai vari tag html.

Di seguito ti mostro il contenuto di un file javascript, denominato nomelibreria.js, contenente la struttura della nostra prima libreria. Come puoi notare alla riga 1 ho riportato un commento che mostra il nome del file js, la data di creazione, utile per tenere traccia della versione della libreria, e del nome del suo creatore. alla riga 4 è stato definito un oggetto contenente il nome della libreria ed alla riga 6 troviamo un primo metodo di esempio, il classico helloworld.

/* 
   nomelibreria.js 
   creato in data dd/mm/yyyy 
   autore: tuo nome.cognome 
*/ 

"use strict";
var TuoNomeLibreria = {}; 
TuoNomeLibreria.helloWorld = function () {
                                            document.write('Hello World');
                                         };

questa libreria di esempio la devi includere nel tuo file html, supponiamo di lavorare in un ipotetico file index.html, in questo modo:

<html>   
   <head>      
      <!-- includi nomelibreria.js -->
      <script type="text/javascript" src="nomelibreria.js"></script>
   </head>
   <body>
      <!-- richiamo metodo TuoNomeLibreria.helloWorld -->
      <button onclick="TuoNomeLibreria.helloWorld()">Saluto</button>
   </body>
</html> 

Adesso copia e incolla il contenuto nei due file, nomelibreria.js e index.html, e dai sfogo alla tua fantasia creando metodi nella tua prima libreria. Logicamente ogni metodo verrà invocato con TuoNomeLibreria.nomeMetodo().

Spero di esserti stato utile, ad ogni modo dai anche uno sguardo a questo video e buon divertimento…!

Seguimi su

Antonio Lamorgese

Amministratore di rete e programmatore. Dopo anni di esperienza nel settore, ho ideato un generatore di codice PHP Scopri di più su https://www.phpcodewizard.it.

x