require.js的基本用法详解

目录:

    1.require.js是什么

    2.使用方法

        2.1定义模块

        2.2引用模块

        2.3配置requirejs

        2.4requirejs加载第三方库

        2.5实例

require.js 中文官网http://www.requirejs.cn/

1.require.js是什么

    RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用，但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

2.使用方法

    2.1定义模块

define([], function(){
	//define函数的第一个参数，数组中放的是当前模块的所有的依赖项,参数可以是地址
	//第二个参数的function中的内容，就是当前模块的所有的内容
	//如果当前模块要引用依赖项的内容，则需要通过给这个function添加形参来接收前面的依赖的返回值
	//注意，形参和依赖项是一一对应的，不能够省略
	//如果当前模块要返回内容给使用该模块的地方调用
	//应该使用return关键字，将要返回的内容进行返回
})

    2.2引用模块

require([], function(){
	//require函数的第一个参数数组是需要引用的所有的模块的路径
	//第二个参数funciton是在所有的模块加载完成之后，执行的回调函数
	//再回调函数中可以接收前面引用的模块的返回值，通过形参
})
//举个例子：
define(["js/jquery.js"],function($){
    //在这里使用jquery写代码
})

    2.3配置requirejs

requirejs.config({
	baseUrl: "路径（一般都是绝对路径，并且是所有的模块能够共享的路径）",
	paths: {
		别名: "路径",
		jquery: "js/assets/jquery/jquery.min"
	}
})
经过配置后 依赖项就可以写成别名了 例如上面的栗子可以直接写成
requirejs.config({
	baseUrl:// "路径（一般都是绝对路径，并且是所有的模块能够共享的路径）",
	paths: {
		//别名: "路径",
		jquery: "js/jquery.js"
	}
})
define(["jquery"],function($){
    //在这里使用jquery写代码
})

2.4require.js加载第三方库

1. 首先判断第三方库是否实现了模块化
2. 如果这个第三方库实现了模块化，那么就直接使用requirejs的方式来使用它
3. 如果这个第三方库没有实现模块化，那么要做如下的判断
	3.1 判断该模块是否有依赖项，如果有依赖项，则需要通过shim设置为其新增依赖项（deps），如果没有依赖项则需要进行3.2的判断
		requirejs.config({
			paths: {
				bootstrap: "/bootstrap/js/bootstrap"
			},
			shim: {
				"bootstrap": {
					deps: ["jquery"]
				}
			}
		})
	3.2 判断该模块是否有返回值（需要对外界暴露的内容，jquery需要暴露$, artTemplate需要暴露template），如果有，则需要通过shim设置中的exports为其设置返回值
		requirejs.config({
			paths: {
				bootstrap: "/bootstrap/js/bootstrap",
				sing: "js/sing"
			},
			shim: {
				"bootstrap": {
					deps: ["jquery"]
				},
				"sing": {
					deps: [],
					exports: "sing"
				}
			}
		})

2.5实例

//例如现在某个网页需要引入多个js文件
//为了方便我就直接将引入的JS内容写在标签中了
<script src="/views/public/js/require.js">
//引入require.js文件
</script>
<script src="/views/public/js/config.js">
require.config({
    paths:{
        jquery:"/views/public/assets/jquery/jquery.min",
        cookie:"/views/public/assets/jquery-cookie/jquery.cookie",
        bootstrap:"/views/public/assets/bootstrap/js/bootstrap.min",
        nprogress:"/views/public/assets/nprogress/nprogress",
        echarts:"/views/public/assets/echarts/echarts.min",
        template:"/views/public/assets/artTemplate/template",
        form:"/views/public/assets/jquery-form/jquery.form",
        common:"/views/public/js/common",
        name:"/views/public/js/name"
    },
    shim:{
        template:{
            deps:["jquery"]
        }
    }
})
//配置需要导入的文件 我导入了很多 jQ,jQ-cookie 等等很多 
//其中bootstrap没有实现模块化，手动添加依赖
</script>
<script>
require(["name","common"])
//这段js是功能的实现，运行name.js和common.js的代码
//name.js和common.js中的代码需要依赖其他js文件
//页面中只需要这三个js就可以了
</script>

 

转载于:https://my.oschina.net/u/3281152/blog/874402