Comment bien organiser ses fichiers JS

[php_addict]

Bonjour

voici donc un topic pour discuter autour du "comment bien organiser ses fichiers Javascript"

Je ne parle pas de comment regrouper plusieurs fichier JS en 1 ou de les mettre en cache, l'on va supposer que les fichiers JS sont regroupés par fonctionnalités, expl:

- map.js
- light_box.js
- chrono.js
- etc...

juste pour info j'ai 25 fichiers JS et à peu prés 119 Ko de code si l'on ne compte pas jquery et jquery_ui (je sais ca veut rien dire les Ko mais c'est pour donner une idée de l'ampleur du désastre...)

il apparait que j'ai beaucoup de

	$('.class_de_la_div').click(function()

	{

	// do something nice ;-)

    });

et de

function ma_function()

{

	// do something nice ;-)

}

il y a t il des concepts que j'ignore pour programmer en JS au niveau architectural, ou des modèles de programmations qui fera de tout ce fatra quelque chose de plus clair?

Merci de m'avoir lu

[Maks]

regarde du coté de require.js peut etre

[Xenos]

Perso, je décompose selon le schéma suivant:
- Un dossier "JS" qui regroupe tous les fichiers JS (pas de JS en dehors)
- Un sous-dossier par "classe" ou par "thème"
- Un fichier JS par fonction / méthode dans ces sous-dossiers

Par exemple:
JS/carte/__constructor.js
JS/carte/charger.js
JS/carte/afficher/case.js
JS/carte/afficher/toutafficher.js
JS/batiment/__constructor.js
...

Ensuite, j'ai un fichier php qui est capable de browser JS/* et de collaber tous ces fichiers en un seul fichier JS. Ce fichier JS peut alors être allégé (en supprimant les commentaires, les lignes vides, les espaces, etc). C'est ce fichier JS qui sera utilisé dans les pages webs.

Ainsi:
- les clients webs n'ont qu'un seul fichier JS de visible, ce fichier est également léger et peut être mis en cache
- les développeurs peuvent manipuler les JS séparément avec une structure assez claire et des fichiers légers, mais nombreux
- les développeurs peuvent modifier ces fichiers JS sans impacter directement le serveur de prod
- il est possible d'archiver les JS ainsi "compilés" (fusionnés) pour un versioning

Mais je suis pas certain d'avoir compris la question :p

[Sephi-Chan]

Sur Seelies j'organise tout en modules. Plus de détails ce soir !!

[Maks]

Le problème avec JS c'est qu'il manque (pour le moment) un système d'import/espaces de nom

Avec coffeescript (et le bon module) ou typescript on peut organiser le code par package (style java/c#)

[Astarion]

Perso, je décompose selon le schéma suivant:
- Un dossier "JS" qui regroupe tous les fichiers JS (pas de JS en dehors)
- Un sous-dossier par "classe" ou par "thème"
- Un fichier JS par fonction / méthode dans ces sous-dossiers

Par exemple:
JS/carte/__constructor.js
JS/carte/charger.js
JS/carte/afficher/case.js
JS/carte/afficher/toutafficher.js
JS/batiment/__constructor.js
...

Ensuite, j'ai un fichier php qui est capable de browser JS/* et de collaber tous ces fichiers en un seul fichier JS. Ce fichier JS peut alors être allégé (en supprimant les commentaires, les lignes vides, les espaces, etc). C'est ce fichier JS qui sera utilisé dans les pages webs.

Ainsi:
- les clients webs n'ont qu'un seul fichier JS de visible, ce fichier est également léger et peut être mis en cache
- les développeurs peuvent manipuler les JS séparément avec une structure assez claire et des fichiers légers, mais nombreux
- les développeurs peuvent modifier ces fichiers JS sans impacter directement le serveur de prod
- il est possible d'archiver les JS ainsi "compilés" (fusionnés) pour un versioning

Mais je suis pas certain d'avoir compris la question :p

Qu'est ce que tu utilises comme fichier PHP pour faire ça ? C'est typiquement le genre de script que je recherche !

[niahoo]

Le problème avec JS c'est qu'il manque (pour le moment) un système d'import/espaces de nom

Avec coffeescript (et le bon module) ou typescript on peut organiser le code par package (style java/c#)

ben :

var monespacedenoms = {};



(function(window, $, undefined) {

    window.monespacedenoms.kikoo = function() {

        return 'kikoo world';

    }

    

    // ....



}(window,jQuery));

et pis voilà pour l'espace de noms.

[Xenos]

Code PHP :

<?php

    /**

    *    @file

    *    Fichier de concaténation de scripts javascripts.

    *    Composante de l'API Reinom (http://www.reinom.com)

    *    Version pré-beta.

    *

    *    @licence        CeCILL (GNU GPL)

    *    @version        0.000.00

    *    @author            Xenos

    *    @date            19:34 08/03/2013

    */

    

    /**

    *    Analyse un dossier pour en récupérer la liste des noms des fichiers javascript.

    *    Ces fichiers doivent utiliser l'extension '*.js'.

    *

    *    @param        string        $path

    *        Chemin du dossier à scanner

    *    @param        array        &$files

    *        Tableau dans lequel injecter les noms trouvés

    *

    *    @note

    *        Le scan est récursif: on analyse les fichiers du dossier spécifié par $path,

    *        mais on applique également la fonction Scan() aux dossiers de $path.

    *

    *    @version        1.000.00

    *    @author            Xenos

    *    @date            19:39 08/03/2013

    */

    function Scan($path, &$files)

    {

        $content = scandir($path);

        foreach ($content as $name)

        {

            if ($name != '.' and $name != '..')

            {

                $fullname = $path . '/' . $name;

                if (is_dir($fullname))

                    Scan($fullname, $files);

                else if (substr($fullname, -3) == '.js')

                    $files[] = $fullname;

            }

        }

    }

    

    /**

    *    Analyse un dossier pour en récupérer tous les fichiers javascript, puis les concatène.

    *    Le fichier javascript concaténé porte le même nom que le dossier dans lequel les

    *    javascript ont été piochés, avec l'extension '.js' en plus

    *

    *    Exemple:

    *    Browse("/home/www/JS")

    *    Concatènera l'intégralité des fichiers du dossier '/home/www/JS' et de l'ensemble de ses sous-dossiers

    *    dans le fichier de sortie '/home/www/JS.js'.

    *

    *    @warn

    *        Si vous utilisez des commandes 'libres', c'est à dire des commandes qui ne sont

    *        pas encapsulées dans des fonctions, alors ces commandes apparaitront n'import où dans le

    *        code javascript concaténé. Par exemple, si vous avez des fichiers javascript qui définissent

    *        un ensemble de fonction, que vous utilisez dans un autre fichier javascript, alors

    *        RIEN ne vous garantis que les fichiers définissant les fonctions seront assemblés

    *        AVANT le fichier utilisant ces fonctions. En d'autres mots, cette fonction de concaténation

    *        perd l'ordre (l'ordonnacement) des fichiers javascript.

    *        Pour contrer ce problème, rassemblez toutes vos commandes dans des fonctions,

    *        ne laisse rien "trainer" en dehors des fonctions. 

    *    @note

    *        Il est conseillé de vous créer une fonction 'init' ou 'main', dans l'un des fichiers javascript,

    *        et de l'appeler dans la page HTML, après avoir chargé le fichier javascript concaténé.

    *

    *    @param        string        $foldname

    *        Nom du dossier contenant l'ensemble de vos codes javascript.

    *    @param        bool        $zippy

    *        Indique s'il faut (true) comprimer le fichier concaténé en évinçant les lignes vides et les commentaires

    *        ou s'il faut juste faire une concaténation (false) en conservant les caractères qui sont inutiles pour l'exécution.

    *

    *    @version        1.000.00

    *    @author            Xenos

    *    @date            19:43 08/03/2013

    */

    function Browse($foldname, $zippy=false)

    {

//        $foldname = "D:\\EasyPHP-12.1\\www\\Globals\\JVS";

//        $zippy = false;

        

        $files = Array();

        Scan($foldname, $files);

    //    var_dump($files);



        $outname = $foldname.'.js';

        $outfile = fopen($outname, 'w');

        $replacements = Array("}", "{", ";", "=");

        foreach ($files as $f)

        {

            $content = file_get_contents($f);

            if ($zippy)

            {

                $content = preg_replace('#/\*[^*]*\*+([^/][^*]*\*+)*/#', '', $content);

                $content = preg_replace("#//([^\n]*)\n#im", "\n", $content);

                $content = str_replace(Array("\r", "\n", "\t"), " ", $content);

                for ($i=0;$i<10;$i++)

                    $content = str_replace("  ", " ", $content);

                foreach ($replacements as $r)

                    $content = str_replace(Array($r." ", " ".$r), $r, $content);

            }

            fwrite($outfile, $content);

            if ($zippy)

                fwrite($outfile, "\r\n");

        }

        fclose($outfile);

    }

?>

[Sephi-Chan]

[Astarion]

Code PHP :

<?php

    /**

    *    @file

    *    Fichier de concaténation de scripts javascripts.

    *    Composante de l'API Reinom (http://www.reinom.com)

    *    Version pré-beta.

    *

    *    @licence        CeCILL (GNU GPL)

    *    @version        0.000.00

    *    @author            Xenos

    *    @date            19:34 08/03/2013

    */

    

    /**

    *    Analyse un dossier pour en récupérer la liste des noms des fichiers javascript.

    *    Ces fichiers doivent utiliser l'extension '*.js'.

    *

    *    @param        string        $path

    *        Chemin du dossier à scanner

    *    @param        array        &$files

    *        Tableau dans lequel injecter les noms trouvés

    *

    *    @note

    *        Le scan est récursif: on analyse les fichiers du dossier spécifié par $path,

    *        mais on applique également la fonction Scan() aux dossiers de $path.

    *

    *    @version        1.000.00

    *    @author            Xenos

    *    @date            19:39 08/03/2013

    */

    function Scan($path, &$files)

    {

        $content = scandir($path);

        foreach ($content as $name)

        {

            if ($name != '.' and $name != '..')

            {

                $fullname = $path . '/' . $name;

                if (is_dir($fullname))

                    Scan($fullname, $files);

                else if (substr($fullname, -3) == '.js')

                    $files[] = $fullname;

            }

        }

    }

    

    /**

    *    Analyse un dossier pour en récupérer tous les fichiers javascript, puis les concatène.

    *    Le fichier javascript concaténé porte le même nom que le dossier dans lequel les

    *    javascript ont été piochés, avec l'extension '.js' en plus

    *

    *    Exemple:

    *    Browse("/home/www/JS")

    *    Concatènera l'intégralité des fichiers du dossier '/home/www/JS' et de l'ensemble de ses sous-dossiers

    *    dans le fichier de sortie '/home/www/JS.js'.

    *

    *    @warn

    *        Si vous utilisez des commandes 'libres', c'est à dire des commandes qui ne sont

    *        pas encapsulées dans des fonctions, alors ces commandes apparaitront n'import où dans le

    *        code javascript concaténé. Par exemple, si vous avez des fichiers javascript qui définissent

    *        un ensemble de fonction, que vous utilisez dans un autre fichier javascript, alors

    *        RIEN ne vous garantis que les fichiers définissant les fonctions seront assemblés

    *        AVANT le fichier utilisant ces fonctions. En d'autres mots, cette fonction de concaténation

    *        perd l'ordre (l'ordonnacement) des fichiers javascript.

    *        Pour contrer ce problème, rassemblez toutes vos commandes dans des fonctions,

    *        ne laisse rien "trainer" en dehors des fonctions. 

    *    @note

    *        Il est conseillé de vous créer une fonction 'init' ou 'main', dans l'un des fichiers javascript,

    *        et de l'appeler dans la page HTML, après avoir chargé le fichier javascript concaténé.

    *

    *    @param        string        $foldname

    *        Nom du dossier contenant l'ensemble de vos codes javascript.

    *    @param        bool        $zippy

    *        Indique s'il faut (true) comprimer le fichier concaténé en évinçant les lignes vides et les commentaires

    *        ou s'il faut juste faire une concaténation (false) en conservant les caractères qui sont inutiles pour l'exécution.

    *

    *    @version        1.000.00

    *    @author            Xenos

    *    @date            19:43 08/03/2013

    */

    function Browse($foldname, $zippy=false)

    {

//        $foldname = "D:\\EasyPHP-12.1\\www\\Globals\\JVS";

//        $zippy = false;

        

        $files = Array();

        Scan($foldname, $files);

    //    var_dump($files);



        $outname = $foldname.'.js';

        $outfile = fopen($outname, 'w');

        $replacements = Array("}", "{", ";", "=");

        foreach ($files as $f)

        {

            $content = file_get_contents($f);

            if ($zippy)

            {

                $content = preg_replace('#/\*[^*]*\*+([^/][^*]*\*+)*/#', '', $content);

                $content = preg_replace("#//([^\n]*)\n#im", "\n", $content);

                $content = str_replace(Array("\r", "\n", "\t"), " ", $content);

                for ($i=0;$i<10;$i++)

                    $content = str_replace("  ", " ", $content);

                foreach ($replacements as $r)

                    $content = str_replace(Array($r." ", " ".$r), $r, $content);

            }

            fwrite($outfile, $content);

            if ($zippy)

                fwrite($outfile, "\r\n");

        }

        fclose($outfile);

    }

?>