Quiero compartir un hallazgo interesante:
Bridge.net . En pocas palabras, este es un marco que le permite traducir el c贸digo C # en JavaScript. La idea que impulsa al equipo de desarrollo es muy simple y directa: traduzca la l贸gica de la forma m谩s id茅ntica posible. Lo que agrada, si recuerdas todas las diferencias y los detalles de estos idiomas.
Quiz谩s todos puedan encontrar su uso personal, pero me gustar铆a se帽alar esos momentos que me atrajeron personalmente:
- Posibilidad de aplicaci贸n para desarrollo m贸vil. JavaScript funciona en todas las plataformas
- Mobiliario para web. Especialmente si necesita reescribir un proyecto desactualizado, por ejemplo, como una aplicaci贸n SPA
- Posibilidad de reutilizar c贸digo C # simult谩neamente en el lado del servidor y del cliente
- Traducci贸n realizada durante la construcci贸n del proyecto
- El proyecto est谩 en desarrollo activo, hay un apoyo adecuado de los desarrolladores.
- Bridge.net es un proyecto OpenSource con una licencia para uso comercial ( licencia Apache 2.0 )
Como demostraci贸n del uso de Bridge, quiero compartir una soluci贸n para la tarea de validaci贸n de campo en una aplicaci贸n web. Espero que el ejemplo sea ilustrativo, porque un problema similar puede ocurrir con bastante frecuencia. Para simplificar, usar茅 ASP.NET Web Forms.
Entonces, tenemos un campo en el que el usuario debe ingresar el n煤mero de registro del autom贸vil y hacer clic en el bot贸n. En nuestro caso, el bot贸n verificar谩 la exactitud de la entrada (en la vida real, podr铆amos devolver, por ejemplo, multas registradas).
L贸gica del servidor de validaci贸n de entradaprotected void submitButton_OnClick(object sender, EventArgs e) { var isCorrect = IsCorrectPlateNumber(plateTextBox.Text); plateTextBox.BackColor = isCorrect ? Color.LightGreen : Color.Coral; } private static bool IsCorrectPlateNumber(string plateNumber) { var success = false; if (!string.IsNullOrWhiteSpace(plateNumber)) { plateNumber = plateNumber.Trim(); if (plateNumber.Length >= 8 || plateNumber.Length <= 9) { var rgx = new Regex(@"^[]\d{3}[]{2}\d{2,3}$"); success = rgx.IsMatch(plateNumber); } } return success; }
Ok, ahora queremos reducir la carga en el servidor y realizar la validaci贸n de campo en el lado del cliente. Hay varias opciones:
1) Vuelva a escribir la validaci贸n del cliente , que verificar谩 los escenarios m谩s simples, por as铆 decirlo, "protecci贸n contra el tonto". Las comprobaciones b谩sicas a煤n se realizar谩n en el lado del servidor.
Validaci贸n simple del cliente . ( X 000 XX 000):<br/> <asp:TextBox ID="plateTextBox" runat="server"/> <asp:Button ID="submitButton" runat="server" Text="" OnClientClick="return validatePlate();" OnClick="submitButton_OnClick"/>
function validatePlate() { var value = document.getElementById('<%=plateTextBox.ClientID%>').value; if (value && value.length) { return true; } alert(" . !"); return false; }
2) Portar la validaci贸n del servidor tanto como sea posible, repitiendo as铆 el c贸digo. Las ventajas son obvias: la discrepancia m铆nima entre los resultados de la validaci贸n en el servidor y en el cliente. Tambi茅n hay desventajas: al repetir la l贸gica del servidor, tambi茅n me gustar铆a mantenerla en un estado activo, lo que puede agregar un dolor de cabeza. No volver茅 a escribir el c贸digo manualmente, es bastante comprensible. Veamos mejor c贸mo nos ayudar铆a Bridge. Para hacer esto, use el
editor en l铆nea . El c贸digo traducido se ver谩 as铆:
Validaci贸n completa del cliente (function (globals) { "use strict"; Bridge.define('Demo.ServerLogic', { statics: { isCorrectPlateNumber: function (plateNumber) { var success = false; if (!Bridge.String.isNullOrWhiteSpace(plateNumber)) { plateNumber = plateNumber.trim(); if (plateNumber.length >= 8 || plateNumber.length <= 9) { var rgx = new Bridge.Text.RegularExpressions.Regex("constructor", "^[]\\d{3}[]{2}\\d{2,3}$"); success = rgx.isMatch(plateNumber); } } return success; } } }); Bridge.init(); })(this);
Nos queda por
incluir el archivo Bridge.js (para simplificar, tom茅 el archivo de script del editor en l铆nea), as铆 como
modificar ligeramente nuestra funci贸n de validaci贸n inicial:
function validatePlate() { var value = document.getElementById('<%=plateTextBox.ClientID%>').value; if (Demo.ServerLogic.isCorrectPlateNumber(value)) { return true; } alert(" . !"); return false; }
3) Reutilizar la l贸gica. Si queremos mantenerlo actualizado, podemos configurar la traducci贸n de validaci贸n de C # a JavaScript para que se realice cada vez que se construya el proyecto. Por lo tanto, la l贸gica realmente se vuelve reutilizable, los programadores no pierden su tiempo, la aplicaci贸n se vuelve m谩s estable y los usuarios est谩n a煤n m谩s felices. Para hacer esto, debe realizar varios pasos:
Embedded Bridge en un proyecto1. Cree un proyecto
WebApplication1.Bridge en una soluci贸n existente
2. Instale el
paquete Nuget en 茅l. Instale este paquete en un proyecto separado, como Durante la instalaci贸n, se eliminan las referencias en conflicto.
3. En el proyecto
WebApplication1 ,
colocaremos la l贸gica en un archivo / clase separado. En consecuencia, ahora esta clase se utilizar谩 en el controlador de eventos de clic de bot贸n (los cambios son claros, no proporciono el c贸digo).
ServerLogic.cs using System.Text.RegularExpressions; namespace WebApplication1 { public class ServerLogic { public static bool IsCorrectPlateNumber(string plateNumber) { var success = false; if (!string.IsNullOrWhiteSpace(plateNumber)) { plateNumber = plateNumber.Trim(); if (plateNumber.Length >= 8 || plateNumber.Length <= 9) { var rgx = new Regex(@"^[]\d{3}[]{2}\d{2,3}$"); success = rgx.IsMatch(plateNumber); } } return success; } } }
4. Agregue el archivo creado al proyecto
WebApplication1.Bridge como un enlace5. Cambie el directorio de salida para el proyecto
WebApplication1.Bridge . Para hacer esto, configure el archivo
bridge.json :
"output": "../WebApplication1/Scripts/Bridge"
6. Despu茅s del ensamblaje en el Explorador de soluciones, haga clic en Mostrar todos los archivos y podemos ver el script generado
webApplication1.js7. Agregue los enlaces necesarios y actualice los scripts en la p谩gina
Demo.aspx :
Scripts demo.aspx <script src="Scripts/Bridge/bridge.js" type="text/javascript"></script> <script src="Scripts/Bridge/webApplication1.js" type="text/javascript"></script> <script type="text/javascript"> function validatePlate() { var value = document.getElementById('<%=plateTextBox.ClientID%>').value; if (WebApplication1.ServerLogic.isCorrectPlateNumber(value)) { return true; } alert(" . !"); return false; } </script>
8. Eso es todo. Puedes construir un proyecto y ejecutarlo. Ahora, cualquier cambio en la l贸gica de validaci贸n funcionar谩 autom谩ticamente tanto para las comprobaciones del lado del servidor como del lado del cliente.
Entonces, con un ejemplo simple, vimos c贸mo puede reutilizar f谩cilmente el c贸digo C #, incluso cuando necesita hacerlo usando JavaScript. Y qu茅 puede ser de gran valor: c贸mo este enfoque est谩 integrado en el proceso de desarrollo y creaci贸n de una aplicaci贸n web. Sin embargo, esta no es la 煤nica ventaja de Bridge.net. Lo veo como un asistente indiscutible en el desarrollo m贸vil multiplataforma, especialmente para aquellos que no pueden imaginar su vida sin .NET, 隆pero m谩s sobre eso la pr贸xima vez!