Backbone.js es una biblioteca JavaScript liviana que permite desarrollar y estructurar las aplicaciones del lado del cliente en la web. Brinda estructura a la aplicación al brindarle al modelo vinculación de clave-valor y eventos personalizados, colecciones con una rica API de funciones de enumeración, vistas con manejo de eventos declarativo y conéctelo todo a su API existente a través de una interfaz RESTful JSON. Está diseñado para desarrollar una aplicación web de una sola página y para mantener sincronizadas varias partes de las aplicaciones web. Backbone fue creado por Jeremy Ashkenas.
Requisito previo: Backbone.js depende de algunas bibliotecas de JavaScript. Algunos requisitos previos para usar Backbone.js son la siguiente biblioteca:
- Underscore.js : Backbone.js tiene una fuerte dependencia de Underscore.js. Puede usar este enlace para obtener Underscore.js.
- jQuery : incluya esta biblioteca para la persistencia RESTful y la manipulación DOM con la vista Backbone.
Backbone.js se puede usar de 2 maneras:
- Uso del enlace CDN de Backbone.
- Al descargar el archivo Backbone.
Exploraremos ambas formas de instalación y, en consecuencia, veremos sus ilustraciones a través de los ejemplos.
Mediante el uso de enlaces CDN: en este método, implementaremos los enlaces CDN, que requieren conexión a Internet para la instalación, porque estamos instalando los archivos Backbone desde un enlace externo. Se recomienda que siga este método.
Acercarse:
Paso 1: Vaya a este enlace y allí encontrará los enlaces CDN.
Paso 2: Copie el enlace y péguelo en la etiqueta principal.
Paso 3: Después de completar los pasos anteriores, el código será como el siguiente:
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Backbone.js Installation</title> <!-- Libraries --> <script src= "https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js" type="text/javascript"> </script> </head> <body> <div id="app"> </div> </body> </html>
En esta etapa, hemos completado el proceso de instalación y ahora podemos comenzar a implementar la lógica.
Ejemplo: este ejemplo ilustrará el uso de backbone, donde inicializa una función cuando un elemento se representa en una página y agrega algunos valores en la página.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Backbone.js</title>
<!-- Libraries -->
<script src=
"https://code.jquery.com/jquery-2.1.3.min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
type="text/javascript">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
let geek = Backbone.View.extend({
initialize: function() {
document.write(
'Hello geeks this is written by Backbone.js');
},
});
let N_geek = new geek({
el: $('app')
});
</script>
</body>
</html>
Producción:
Al descargar el archivo Backbone: este método es fácil, ya que solo requerimos conexión a la red en el momento de la descarga del archivo y luego podemos ejecutar nuestro programa backbone sin conexión.
Acercarse:
Paso 1: vaya a este enlace y descargue cualquier versión de la que usaremos la versión de producción. Además, descargue los archivos jQuery y UnderscoreJS .
Paso 2: El archivo se descargará y colocará el archivo Bockbone.js en el mismo directorio de trabajo donde residen todos los requisitos previos del archivo backbone. Debajo de la etiqueta principal del archivo HTML, el archivo Backbone, el archivo jQuery y el archivo de subrayado deben estar vinculados. Asegúrese de que la página HTML y el archivo de descarga residan en el mismo directorio de trabajo.
Paso 3: después de completar los pasos anteriores, el código final se verá como el siguiente ejemplo de código. El código final después de guardar archivos en la misma carpeta y agregar un enlace a la etiqueta principal.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Backbone.js Installation</title> <!-- Libraries --> <script src="jquery.js" type="text/javascript"> </script> <script src="underscore.js" type="text/javascript"> </script> <script src="backbone-min.js" type="text/javascript"> </script> </head> <body></body> </html>
Ejemplo: en este ejemplo, se puede observar que los archivos de descarga de Backbone y sus requisitos previos se incluyen en la sección de encabezado del código. Ahora Backbone se puede usar directamente. A medida que se descarga, no se necesita una conexión a Internet para cargar la página de Backbone.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Backbone.js</title>
<script src="jquery-min.js"
type="text/javascript">
</script>
<script src="underscore-umd-min.js"
type="text/javascript">
</script>
<script src="backbone-min.js"
type="text/javascript">
</script>
</head>
<body>
<div id="geeks">Hello GeeksforGeeks</div>
<script type="text/javascript">
var GFG = Backbone.View.extend({
el: '#geeks',
initialize: function() {
this.render();
},
render: function() {
console.log("GeeksforGeeks! Learning Together!!!");
}
});
var gfg = new GFG();
</script>
</body>
</html>
Producción:
Referencia: https://backbonejs.org/
Publicación traducida automáticamente
Artículo escrito por satyam00so y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA