requirejs 使用

秒速五厘米 2021-07-24 14:37 383阅读 0赞

requirejs使用:
    	
    	**定义的模块要想其他文件能访问,需要最后添加return {键名:键值}的形式**
    	**define()中的函数自动执行**
    	
    	1、定义模块(一个js文件一个模块):
    		(1)函数式定义
    			define(function(){...})
    		(2)对象定义
    			define({
    				name:...,
    				age:...
    			})
    		(3)存在依赖注入的函数式定义
    			1、[]中的注入文件,如果是main.js设置的文件,直接写映射名,其他文件,
    			要写基于main.js中baseUrl写的路径上添加具体路径和文件名
    
    			2、define(['main.js中的映射文件名'],function(前面文件的形参){
    				console.log($);//main.js文件中function对应的文件对象名
    			})

**代码示例:**

**main.js:**

//配置文件
    requirejs.config({ 
    	//基础路径
    	baseUrl:'js/', //表示js文件夹路径,也可以写具体路径
    	//映射,.js省略,选择要加载的js文件
    	paths:{ 
    		'index':'apps/index',  //使用index就代表后面的文件
    		'getname':'apps/getname',
    		'jquery':'libs/jquery-3.4.1'
    	}
    })
    //引入映射文件,function的形参是映射文件对象,对内部进行操作
    requirejs(['index','getname','jquery'],function(index,getname,$){ 
    //对指定文件中的函数进行调用,文件定义的模块必须有return才能被访问
    	index.ori();
    })

**getname.js:**

define(function(){ 
    // var userInfo={ 
    // name:'jeff',
    // age:18
    // }
    // //使得外部能够访问
    // return{ 
    // userInfo:userInfo
    // }
    
    	function create()
    	{ 
    		return '文本'
    	}
    
    	return { 
    		create:create
    	}
    })

**index.js:**

define(['getname','jquery'],function(getname,$){ 
    	//访问其他文件内容
    	 console.log(getname.userInfo.name+getname.userInfo.age);
    
    	// 用法一:当前文件调用其他文件function
    	 $('#root').html(getname.create());
    	
    	//用法二,由main.js中的function调用
    	function ori()
    	{ 
    		$('#root').html(getname.create());
    	}
    
    	return{ 
    		ori:ori
    	}
    })

**html文件:**

<html>
    <head>
    	<meta charset="utf-8">
    	<title ></title>
    
    	<script data-main='js/main.js' src='js/libs/require.js'></script>	
    
    	<style>
    
    	</style>
    </head>
    <body >
    
    //通过requirejs增加元素
    <div id='root'></div>
    
    <script>
    
    </script>
    
    </body>
    </html>