Je veux partager une découverte intéressante -
Bridge.net . En bref, il s'agit d'un framework qui vous permet de traduire du code C # en JavaScript. L'idée qui anime l'équipe de développement est très simple et directe - traduire la logique de manière aussi identique que possible. Ce qui plaît, si vous vous rappelez toutes les différences et les spécificités de ces langues.
Peut-être que chacun peut trouver son usage personnel, mais je voudrais noter les moments qui m'ont personnellement attiré:
- Possibilité d'application pour le développement mobile. JavaScript fonctionne sur toutes les plateformes
- Fitment pour le Web. Surtout si vous devez réécrire un projet obsolète, par exemple, en tant qu'application SPA
- Possibilité de réutiliser du code C # simultanément côté serveur et côté client
- Traduction effectuée lors de la construction du projet
- Le projet est en développement actif, les développeurs bénéficient d'un soutien adéquat
- Bridge.net est un projet OpenSource avec une licence pour un usage commercial ( licence Apache 2.0 )
À titre de démonstration de l'utilisation de Bridge, je souhaite partager une solution à la tâche de validation de champ dans une application Web. J'espère que l'exemple sera illustratif, car un problème similaire peut se produire assez souvent. Pour plus de simplicité, j'utiliserai des formulaires Web ASP.NET.
Nous avons donc un champ dans lequel l'utilisateur doit entrer le numéro d'immatriculation de la voiture et cliquer sur le bouton. Dans notre cas, le bouton vérifiera l'exactitude de l'entrée (dans la vie réelle, nous pourrions retourner, par exemple, des amendes enregistrées).
Logique du serveur de validation d'entréeprotected 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, maintenant nous voulons réduire la charge sur le serveur et effectuer la validation sur le terrain côté client. Il existe plusieurs options:
1) Réécrire la validation du client , qui vérifiera les scénarios les plus simples, pour ainsi dire, "protection contre le fou". Les vérifications de base seront toujours effectuées côté serveur.
Validation client simple . ( 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) Validation du serveur de portage autant que possible, répétant ainsi le code. Les avantages sont évidents - l'écart minimum entre les résultats de la validation sur le serveur et sur le client. Il y a aussi des inconvénients - en répétant la logique du serveur, je voudrais également la maintenir dans un état actif, ce qui peut ajouter un mal de tête. Je ne réécrirai pas le code manuellement, c'est tout à fait compréhensible. Voyons mieux comment Bridge pourrait nous aider. Pour ce faire, utilisez l'
éditeur en ligne . Le code traduit ressemblera à ceci:
Validation complète du client (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);
Il nous reste à
inclure le fichier Bridge.js (pour simplifier, j'ai pris le fichier script de l'éditeur en ligne), ainsi qu'à
modifier légèrement notre fonction de validation initiale:
function validatePlate() { var value = document.getElementById('<%=plateTextBox.ClientID%>').value; if (Demo.ServerLogic.isCorrectPlateNumber(value)) { return true; } alert(" . !"); return false; }
3) Réutiliser la logique. Si nous voulons le maintenir à jour, nous pouvons configurer la traduction de la validation de C # en JavaScript à effectuer à chaque construction du projet. Ainsi, la logique devient vraiment réutilisable, les programmeurs ne perdent pas leur temps, l'application devient plus stable, et les utilisateurs sont encore plus heureux! Pour ce faire, vous devez effectuer plusieurs étapes:
Incorporation de Bridge dans un projet1. Créez un projet
WebApplication1.Bridge dans une solution existante
2. Installez-y le
package Nuget . Installez ce package dans un projet distinct, comme Pendant l'installation, les références en conflit sont supprimées.
3. Dans le projet
WebApplication1 , nous
placerons la logique dans un fichier / classe séparé. Par conséquent, cette classe sera désormais utilisée dans le gestionnaire d'événements de clic de bouton (les modifications sont claires, je ne fournis pas le code).
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. Ajoutez le fichier créé au projet
WebApplication1.Bridge en tant que lien5. Modifiez le répertoire de sortie du projet
WebApplication1.Bridge . Pour ce faire, configurez le fichier
bridge.json :
"output": "../WebApplication1/Scripts/Bridge"
6. Après l'assemblage dans l'Explorateur de solutions, cliquez sur Afficher tous les fichiers et nous pouvons voir le script généré
webApplication1.js7. Ajoutez les liens nécessaires et mettez à jour les scripts sur la page
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. C'est tout. Vous pouvez créer un projet et l'exécuter. Désormais, toute modification de la logique de validation fonctionnera automatiquement pour les vérifications côté serveur et côté client.
Ainsi, avec un exemple simple, nous avons vu comment vous pouvez facilement réutiliser du code C #, même lorsque vous devez le faire en utilisant JavaScript. Et ce qui peut être d'une grande valeur - comment cette approche est intégrée dans le processus de développement et de construction d'une application Web. Cependant, ce n'est pas le seul avantage de Bridge.net. Je le vois comme un assistant incontestable dans le développement mobile multiplateforme, en particulier pour ceux qui ne peuvent pas imaginer leur vie sans .NET, mais plus à ce sujet la prochaine fois!