Construye automáticamente un requirejs

Modular

Mantenibilidad y reutilización

¿Qué es AMD / CMD y la diferencia?

CommonJS es una especificación Nodejs es la implementación de esta especificación
AMD / CMD nace de
commonjs seajs Siga la especificación de CMD
requirejs Siga la especificación de
AMD Definición de módulo asíncrono de AMD dependencia de ejecución avanzada pre
CMD Definición de módulo general dependencia de ejecución retardada cercana (de acuerdo con Need to load ) Ventajas: sin desperdicio de recursos Desventajas: tiempo de espera prolongado

Uso de AMD

<!---->
<h1></h1>
<script src="require.js" data-main="js/main"></script>
//定义模块 /test/a.js(公共)
define(function(){
    
    
var str_a = 'hello wrold';
return str_a;
})
//定义模块 /demo.js(公共)
define(function(reqire,exports,module){
    
    
    /*
	var demo = function(){
		return 123
	};
	return {
		demo:demo
	};
	*/
	//字面量
	var web = {
    
    
		add:function(v){
    
    
			return v
		}
	};
	//return web;
	//模块导出 与return web结果一样,只是写法不一样;
	module.exports = web;
})

//AMD / CMD 规范
//AMD 依赖前置
define(['todo'],function(){
    
    
	var t = todo.dotosomething();
	var web = function(){
    
    
		add:function(v,t){
    
    
			return v+t
		}	
	}
	return web;
})
//CMD 依赖就近
/*
define(function(require,exports,module){
	var todo = requuire("todo");
	var t = todo.dotosomething();
	var web = {
		add:function(v){
			return v
		}
	};
	return web;
})
*/
//todo.js
define(function(){
    
    
	var dotosomething = function(){
    
    
		return 100
	};
	return {
    
    
		dotosomething:dotosomething
	}
})
//main.js a:别名
require.config({
    
    
	// baseUrl:"node_modules",//全局定义
	shim:{
    
     //非AMD模块输出,继承AMD的规范
		"bootstrap":{
    
    
			deps:["jquery"],//表示有依赖关系
			exports:"bootstrap"//名称
		}
	},
	paths:{
    
    
		"jquery":"../node_modules/jquery",
		//"jquery":"/jquery",//使用baseUrl
		"bootstrap":"../node_modules/bootstrap",
		"a":"test/a",
		"demo":"demo"
	}
})
//require(['../jquery','../bootstrap','test/a'],function($,bootstrap,a){//路径太长 不推荐
require(['jquery','bootstrap','a','demo'],function($,bootstrap,a){
    
     //别名要一一对应
	console.log(a)//hello wrold
	// document.querySelector("h1").innerHTML = a;
	$("h1").text(a);
	console.log(demo.demo(1000))
})

Varias solicitudes: escritura en cadena de promesas

Supongo que te gusta

Origin blog.csdn.net/weixin_42549581/article/details/101314613
Recomendado
Clasificación