RequireJS manual

Introducción

RequireJS es un cargador de archivos y módulos JS. Es una optimización para ejecutarse en un navegador y también se puede utilizar en otros entornos JS, como Rhino y Node.


compatibilidad

IE6, Firefox 2, Safari 3.2, Chrome 3, Opera 10


Por qué utilizar RequireJS

Sin usar el cargador de módulos, todos los archivos js se escriben en archivos HTML. A medida que el proyecto se vuelve más complejo, los archivos JS se modularán. Cada módulo corresponde a un archivo JS y debe cargarse a su vez. Cuanto más fuerte es la dependencia, más tardía es la carga. Cuando las dependencias son complejas, el tema del orden de carga del código se vuelve complicado. RequireJS nació. Su propósito:

(1) Es la carga asincrónica del archivo JS primero para evitar que la página pierda respuesta.

(2) Gestione las dependencias entre módulos para facilitar la escritura y el mantenimiento del código.


utilizar

Predeterminado: la extensión del archivo es.
(1) Descargue el archivo js.

(2) Cargue el archivo en el documento HTML. (El atributo data-main le dice a requireJS que cargue main.js después de que se cargue requireJS . Carga asincrónica. Main.js es el archivo de entrada de JS, lo que garantiza el principio de entrada única )

      <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>RequireJS的引用</title>
		/*官方推荐所有JS文件使用RequireJS加载器进行加载,以达到最大优化*/
		<script data-main="script/main" src="script/require.js"></script>
	</head>
	<body>
		<button οnclick="javascript:say_hello();">Hello RunJS!</button>
		/*若有JS代码不需要加载器加载,则将其写在body后面,保证HTML,css的正常加载*/
		<script src="script/index.js"></script>
	</body>

(3) main.js de configuración . Se usa para cargar otros módulos JS o archivos que necesita cargar.

requirejs.config({
    //如是基本路径一致,可以配置基础路径baseUrl
    baseUrl: 'js/lib',
    //提前配置好每个模块的路径,方便下面的加载使用。下面app.js就是js/app.js文件。默认文件后缀是JS
    paths: {
        app: '../app'
    },
 shim: {//这里可以配置不符合AMD规范的JS文件    angular:{export:['angular']}}
});

 //requirejs接收两个参数。第一个参数接收一个数组,插入模块。第二个参数,是一个函数,调用模块
//app代码入口
requirejs(['jquery', 'canvas', 'app/sub'],function ($, canvas,sub) { //jQuery, canvas and the app/sub 模块已经加载可以正常使用});


(4)定义一个模块,如app.js 更多模块定义

//define函数接受两个参数,依赖模块以及自身模块函数
	define(['jquery'],function($){ 
	//自身模块代码
	})


(5)RequireJS插件的使用。如domReady同上。



Supongo que te gusta

Origin blog.csdn.net/u010682774/article/details/74178215
Recomendado
Clasificación