Présentation js vs fonctionnel js: les séparer? Architecture générale?

Question

Ceci est une sorte de question générale.

Très souvent, j'ai besoin d'écrire du JavaScript pour les pages web. En gardant à l'esprit les meilleures pratiques, js discret, etc. J'ai mon JavaScript dans des fichiers * .js séparés. Chaque page reçoit son propre fichier js. Ce qui m'a un peu dérangé ces derniers temps, c'est le mélange de code de présentation avec le code fonctionnel que je finis toujours par trouver. Ainsi, par exemple, j'attribuerais un gestionnaire .click à un élément. Sur ce clic, l'élément doit changer d'apparence et un appel AJAX doit être effectué sur le serveur. Donc, en ce moment, je ferais ces deux choses à l'intérieur de ce gestionnaire .click. Il pourrait devenir encombrant en fonction de ce qui doit être accompli. Quand je reviens à ces blocs de code après ne pas les avoir touché pendant une semaine, j'ai souvent l'impression que cela prend trop de temps pour tracer toutes les lignes de code alors que je n'ai besoin que de réparer quelque chose avec l'apparence.

Quoi qu'il en soit, une idée sur l'architecture/design pour js vs présentation js fonctionnels? Gardez-les dans un fichier, mais cassez dans des fonctions séparées? Brisez-les en deux fichiers distincts? Laisse les tranquille?

Merci!

Answer 1

J'aurais tendance à garder tous ensemble ce qui est lié à l'événement qui les a déclenchés, mais parfois mettre une fonction à appeler pour faire un groupe spécifique de choses. Exemple:

function domyUIstuff(myevent, myselector) 
{ 
// stuff here 
}; 
function domyBehaviorStuff(myevent, myselector) 
{ 
//dostuffhere 
}; 
$(selector).click(function(e) 
{ 
    domyUIstuff(e,$(this)); 
    domyBehaviorStuff(e,$(this)); 
}; 

Side note: Je fais des choses garder séparés (je fais beaucoup de choses de asp.net) de différents contrôles utilisateur - créer un fichier myusercontrol.js pour mon myusercontrol.ascx ainsi qu'un mypage.js fichier pour mon mypage.aspx qui tend à réduire le «bruit» lorsque je débogue - je mets mes fonctions "génériques" dans le fichier de page que je pourrais appeler de mes contrôles tels que les gestionnaires de messages ajax génériques ou génériques " fonctions "utilitaires".

Answer 2

Je trouve utile d'avoir trois fichiers JS dans chaque page générée dynamiquement. Les fonctions générales qui sont réutilisées partout, les fonctions spécifiques au projet utilisées dans tout le projet et le fichier js spécifique à la page. De cette façon, vous avez une idée de ce qui est "réutilisable" et de ce qui ne l'est pas. Cela vous encourage également à «promouvoir» votre code. Au fur et à mesure que vous le «promouvoir», vous vous retrouverez à le séparer de plus en plus en UI ou Comportement. Au fur et à mesure que d'autres choses se séparent, vous pouvez vous retrouver avec 6 fichiers ou simplement casser chaque fichier avec une structure de paquets comme vous l'avez suggéré précédemment UIFunctions(). DoStuff() ... Cependant, si vous devez préfixer votre nom avec PageName vous n'avez pas promu votre code et peut-être il est temps que vous le fassiez :-)

Voilà comment je l'ai fait. J'espère que cela aide.