Développement modulaire RequireJS

Cet article présente le développement modulaire RequireJS. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Il existe de nombreuses façons de modulariser le développement, telles que AMD, CMD,

Pour utiliser require pour la modularisation, importez simplement un js

La première étape pour utiliser require.js consiste à télécharger la dernière version depuis le site officiel.

Après le téléchargement, on suppose qu'il est placé dans le sous-répertoire js et qu'il peut être chargé.

　<script src="js/require.js"></script>

Certaines personnes peuvent penser que le chargement de ce fichier peut également empêcher la page Web de répondre. Il existe deux solutions. L'une consiste à le charger en bas de la page Web et l'autre consiste à l'écrire comme suit :

　<script src="js/require.js" defer async="true" ></script>

L'attribut async indique que ce fichier doit être chargé de manière asynchrone pour évitez que la page Web ne réponde plus. IE ne prend pas en charge cet attribut et ne prend en charge que defer, donc defer est également écrit.

Après avoir chargé require.js, l'étape suivante consiste à charger notre propre code. Supposons que notre propre fichier de code soit main.js et soit également placé dans le répertoire js. Ensuite, écrivez-le simplement comme suit :

　<script src="js/require.js" data-main="js/main"></script>

L'attribut data-main est utilisé pour spécifier le module principal du programme de la page Web. Dans l'exemple ci-dessus, il s'agit de main.js sous le répertoire js. Ce fichier sera d'abord chargé par require.js. Étant donné que l'extension de fichier par défaut de require.js est js, main.js peut être abrégé en main.

Modularisation :

define(["aa"], function(){//["aa"] est le js sur lequel vous souhaitez vous appuyer. S'il y en a plusieurs, séparez-les par Sinon, ne l'écrivez pas

 function fn(){
        //你要写的js代码
    }    return {
        fn:fn;//必须要有返回，用来在main中调用
    }
})

main.js

require.config({
 paths:{//路径起的名字 "jquery":"jquery-1.8.3.min", "cookie":"jquery.cookie"

 }
})require(['jquery','cookie','details'], function ($,cookie,Backbone){
    //数组中的是模块，模块都是一部加载的，function为每个模块的回调函数 cookie.fn();
 });

S'il y a un plug-in téléchargé dans le tableau, modularisez le plug-in et ajoutez-y définir (function(). {})

Il existe de nombreuses façons de développement modulaire, telles que AMD, CMD,

Utilisez require pour la modularisation, importez simplement un js,

utilisez require. La première étape pour js est de télécharger la dernière version depuis le site officiel

Après le téléchargement, si vous la placez dans le sous-répertoire js, vous penserez à ce chargement. ce fichier peut également empêcher la page Web de répondre. Il existe deux solutions : l'une consiste à le charger en bas de la page Web et l'autre consiste à l'écrire comme suit :

　<script src="js/require.js"></script>

Le fichier. L'attribut async l'indique. Le fichier doit être chargé de manière asynchrone pour éviter que la page Web ne réponde. IE ne prend pas en charge cet attribut et ne prend en charge que le defer, donc après le chargement de require.js, l'étape suivante consiste à charger notre propre code. notre propre fichier de code est main.js et est également placé dans le répertoire js. Ensuite, il suffit de l'écrire comme suit :

　<script src="js/require.js" defer async="true" ></script>

La fonction de l'attribut data-main est de spécifier la page principale. du programme Web. Dans l'exemple ci-dessus, il s'agit de main.js dans le répertoire js. Ce fichier sera chargé en premier par require.js. Puisque le suffixe de fichier par défaut de require.js est js, main.js peut être. abrégé en main.

Modularisation :

　<script src="js/require.js" data-main="js/main"></script>

define(["aa"], function(){//["aa"] est le js sur lequel vous souhaitez vous appuyer. S'il y en a plusieurs. , séparez-les par des virgules. Sinon, ne l'écrivez pas

main.js

S'il y a un plug-in téléchargé dans le tableau, modularisez-le. plug-in et ajoutez-y Define(function(). {})

 function fn(){
        //你要写的js代码
    }    return {
        fn:fn;//必须要有返回，用来在main中调用
    }
})

Recommandations associées :

require.config({
 paths:{//路径起的名字 "jquery":"jquery-1.8.3.min", "cookie":"jquery.cookie"

 }
})require(['jquery','cookie','details'], function ($,cookie,Backbone){
    //数组中的是模块，模块都是一部加载的，function为每个模块的回调函数 cookie.fn();
 });

Modularisation JS-RequireJS

requireJS implémente un simple partage d'exemple de chargeur de module

L'analyse du code source de RequireJs introduit le principe de fonctionnement du chargement de script

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!