Import Javascript - KennyBlog

Import Javascript

Si vous avez déjà utilisé des frameworks javascript tel que scriptaculous, mootools ou autre jquery et qu’en plus vous leur greffez des plugins, vous avez remarqué que ça implique pas mal d’imports de fichiers .js et .css supplémentaires dans vos pages.

Et cela n’est pas forcement pratique si vos pages ne sont pas générées dynamiquement. De plus ça nuit à la lisibilité du code source.

Il faut aussi se poser cette question:

Est-il vraiment nécessaire d’inclure la totalité des mes fichiers (js et css) dans l’intégralité du site, où selon tel ou tel type de navigateur ?

Alors voici une solution parmi d’autres pour vous aider à mieux gérer vos inclusions de fichiers !

Au programme

Preface
Ma méthode
Exemples
Download
En savoir plus

Preface

Imaginez que vous vouliez implémenter le framework jquery ainsi que son plugin thickbox. Cela implique qu’il vous faudra inclure au minimum 3 fichiers.

jquery.js (c’est donc le framework complet)
thickbox.js (qui est le plugin pour jquery)
thickbox.css (qui est le fichier css qui gère le contenu généré par thickbox.js)
perso.js (vos propres fonctions javascript)
hack_ie.js (certaine de vos fonctions réécrites pour ie)

Comment allez vous gérez ça ?

1/ La solution la plus simple c’est d’inclure tout ce petit monde tel quel dans vos pages, en espérant qu’elles soient générées dynamiquement où via un template pour ne pas devoir ré-écrire toutes vos inclusions dans chaque page.

2/ Même chose que pour le 1er cas, mais en vous servant d’un commentaire conditionnel pour n’inclure le fichier hack_ie.js que pour le navigateur de microsoft.

3/ Utiliser la solution que je vais vous soumettre dans ce tuto. Qui vous donnera les avantages suivants:

Tapez une seul ligne de code dans votre page pour inclure tous vos fichiers
Pouvoir choisir d’inclure certains fichier selon le navigateur, selon la résolution d’écran, selon le type de page, selon l’heure, etc ....

Vous comprenez alors que les possibilités offertes peuvent vous aider à réduire (dans certains cas) considérablement le poids de votre page (et donc de permettre un affichage plus rapide)

Ma methode

Le script

/*****************************************************
#Objet d'import de javascript .js
******************************************************/
function ImportJS() {
	var nbr_att = arguments.length;
	var js_effets=document.createElement("script");
	js_effets.setAttribute("type", "text/javascript");
	js_effets.setAttribute("src", arguments[0]);
	if(nbr_att>1){
		for (var i = 1; i<nbr_att; i++){
			js_effets.setAttribute(arguments[i][0], arguments[i][1]);
		}
	}
	document.getElementsByTagName("head")[0].appendChild(js_effets);
}
/*****************************************************
#Objet d'import de css .css
******************************************************/
function ImportCSS() {
	var nbr_att = arguments.length;
	var css_style=document.createElement("link");
	css_style.setAttribute("rel", "stylesheet");
	css_style.setAttribute("type", "text/css");
	css_style.setAttribute("href", arguments[0]);
	css_style.setAttribute("media", "screen");
	if(nbr_att>1){
		for (var i = 1; i<nbr_att; i++){
			css_style.setAttribute(arguments[i][0], arguments[i][1]);
		}
	}
	document.getElementsByTagName("head")[0].appendChild(css_style);
}

Explications

Alors rien de vraiment compliqué, mes 2 fonctions utilisent l’objet dom. On crée un nouveau noeud, on lui fourni les attributs et on le rajoute à la fin du noeud “head” de la page.

Utilisation

/*****************************************************
#Utilisation
******************************************************/
//Import simple
var js1 = new ImportJS("test.js");
//Import avec attributs suplementaires
var js2 = new ImportJS("test.js", ["media","print"]);
//Import simple
var css1 = new ImportCSS("test.css");
//Import avec attributs suplementaires
var css2 = new ImportCSS("test.css", ["media","print"]);

Explications

Voilà, on cré autant d’ojets js et css que necessaire. On peut ajouter/ecraser des attributs.

Veuillez evidement faire attention à l’ordre de creation des objets, les js declarés en 1er seront les 1ers interpretés

Exemples

Exemple

Download

Telecharger l'exemple

(inclus la version compressée)

En savoir plus

Après recherche approfondie, il apparait que sous Safari les choses soient plus compliquée. En fait pour commencer à pouvoir utiliser le contenu des fichiers chargés, il faut d’abord verifier qu’ils sont bien chargé.

Voici l’alternative pour du javascript par exemple:

function include_js(file) {
    var html_doc = document.getElementsByTagName('head')[0];
    js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', file);
    html_doc.appendChild(js);
    // This will load the javascript for Safari, but it won't
    // let us know when it's been loaded.  The following will.
    if(/WebKit|Khtml/i.test(navigator.userAgent)) {
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.setAttribute('src',file);
        document.getElementsByTagName('body').item(0).appendChild(iframe);
        // Fires in Saf
        iframe.onload = function() {
            alert('JS iframe fired');
        }
    }    
    return false;
}

Par contre il faudra placer le code à executer dans l’evenement “iframe.onload”. Plus d’infos sur ce blog

astuces

, framework

, javascript

, optimisation

:: #43 :: rss :: Haut

Commentaires

1. Par Palleas

Bien vu, mais je ne suis pas convaincu qu'il faille une fonction pour ca, apres tout dans un code bien indenté on aura quoi ? quelques lignes de <script ... etc. De plus, ca ne me gène pas vraiment d'avoir à faire un petit copier/coller dans le cas ou c'est un site majoritairement statique, mais ca ne m'arrive pas souvent puisque vive le php (header de page communs)

Mais sinon bien la fonction

Le lundi 28 mai 2007 à 00:36

2. Par k-ny

Oui bon, c'est clair que cette fonction reste très ciblée.
Le principal avantage est de pouvoir décomposer son code et de charger tel ou tel portions selon des conditions.

Evidement il faut déjà du code javascript en conséquence ^^

Le lundi 28 mai 2007 à 00:44

3. Par Palleas

Par contre j'aime bien ton code, je commencais à être blasé de voir du js codé à la Wallegain (comme dirait l'autre, private Joke ^^) :]

Le lundi 28 mai 2007 à 10:20

4. Par k-ny

Bah merci ^^

Effectivement, depuis peu, j'essaie de garder une certaine rigueur dans la rédaction du code (idem pour l'actionscript). Et au final on s'y retrouve mieux et on a moins de problèmes pour debugger

thanks !

Le lundi 28 mai 2007 à 10:58

5. Par alfanger

pour le livre d'or
je pe pas sa bug je suis chez free, et ya pas de chmod .... comment je pe faire ?

Le lundi 28 mai 2007 à 13:26

6. Par Kezox

Salut kenny,

Je fais un petit HS mais, je voulais juste savoir, compte-tu mettre à disposition en telechargement ton portfolio ?

see ya

Le mercredi 6 juin 2007 à 23:32

7. Par k-ny

Hello Kezox.

Si tu parle du .fla de mon portfolio, sache que je ne l'ai plus, suite à un beau petit crash windows la semaine dernière, j'ai d'ailleurs aussi perdu le fla de mes 1ères applications (flax, module de news, la partie admin de kastbook, ....)

J'suis pas près de m'en remettre, vivement que j'ai les moyens de passer sous mac !

Le jeudi 7 juin 2007 à 08:12

8. Par Kezox

arf, désoler kenny

En tout cas, si un jour tu refais une gallerie dans le même genre, tien nous au courant

Le jeudi 7 juin 2007 à 15:36

9. Par xarald

Trés sympa le script, même si je suis pas encore super familiariser avec le JS.

Petit HS au passage :
Pour ton soucis de crash, Mac ou PC on est jamais a l'abris d'un crash, donc il faut toujours sauvegardé

Pour récupéré tes donné en cas de soucis, stellar phoenix, marche trés bien et récupère généralement la totalité des Fichier quand windows marche plus (seulement il faut 2 DD )

Sinon tu prend un disque NAS que tu branche sur ton réseaux qui te fais un sauvegarde tout les jours, et c valable pour mac ET pc

Le mardi 17 juillet 2007 à 10:51

10. Par k-ny

@xarald

Je sauvegardais tout avant, mais après 3 ans sans crash windows, j'ai fini par avoir trop confiance ^^

J'ai testé 4 logiciels de récupération différant ... mais a part des fichiers poubelle, rien retrouvé ...

Un nas oui, mais j'en voudrais un en raid1, mais c'est pas donné

Vive windows !

Le lundi 30 juillet 2007 à 10:16

11. Par Blogobulle

Bonjour,

Je pense que votre blog aurait sa place dans www.blogobulle.com

bonne journée

Le lundi 12 novembre 2007 à 15:19

12. Par Mat

Je trouve cette approche intérésante et la code bien écrit.

Par contre, je ne suis pas pour cette solution. Spécialement pour les fichiers CSS, avoir besoin de JS pour que le site s'affiche correctement ce n'est pas une bonne solution.

Un site bien fais doit pouvoir offrir les fonctions de base et un design correct sans javascript.

Pour optimisé le téléchargement des fichiers JS et/ou CSS du site le mieux est d'utiliser des compresseurs, dont voici 2-3 solutions:

blog.webinventif.fr/index... (online)
www.crockford.com/javascr...
fmarcia.info/jsmin/test.h... (online)

et l'incontournable:
code.google.com/p/minify/

Le mercredi 12 décembre 2007 à 12:23

13. Par ikeni

C'est vrai que ton code est très propre et cela fait vraiment plaisir.

Merci pour cet article et merci pour ton blog de manière générale

Le vendredi 11 avril 2008 à 15:57

14. Par yoxinsky

t'es mort k-ny ou quoi? on te voit plus sur MB

Le mardi 22 avril 2008 à 13:13

15. Par regime

@k-ny: Je te conseille + un raid5 pour protéger tes données (3DD minimum) Car en + de protéger tes données ca augmente grandement les performances.

Pour ton problème de flash j'ai eu droit à la même chose. Il existe des décompilateurs flash. Le résultat n'est pas toujours convaincant pour ce qui est de l'aspect graphique mais par contre tu retrouves ton code intact

Concernant ton article, c'est plutôt bien expliqué mais utilisant un header commun à toutes mes pages php je me demande quelle pourrait en être l'utilité pour moi :|

Le mardi 8 juillet 2008 à 14:24

16. Par Helaymems

How i may contact admin this site? I have a question.
iijiivei

Le jeudi 2 octobre 2008 à 19:25

17. Par rencontre

Très étonné par la qualité graphique de ce blog, bravo

Le mercredi 29 octobre 2008 à 17:35

18. Par Typsuttip

to: Admin - If You want to delete your site from my spam list, please visit this site for instructions: stopspam.idoo.com

Le vendredi 21 novembre 2008 à 02:25

19. Par Typsuttip

to: Admin - If You want to delete your site from my spam list, please visit this site for instructions: stopspam.idoo.com