require.js的介绍与使用

布满荆棘的人生 2022-06-09 04:10 134阅读 0赞

# 一、什么是require.js，快速理解require.js #

很多人都误以为require.js是类似于组件的东西，需要在项目中频繁的去使用，而且还要熟悉它的写法。其实不是这样的，官方的介绍是require.js是一个模块加载器，这样说对于一个初学js的朋友来说就有些难以理解，所以这个东西通俗的来讲就是在你使用js库的时候给你定义一个规则，而这个规则不需要你去使用，只需要你去遵守。结合实例来说就是，在你写js代码时需要用到什么控件就加载什么控件，这样就对网站的压力减轻了许多，而对于我们传统的将所有js库全部加载出来来说，这样不会产生冲突，代码维护起来容易多了。

# 二、快速使用require.js #

废话不多讲，我希望我能将每一个细节展现出来，能解决各位朋友的疑惑

1、引入require.js

和其他js一样，不过require.js的优点是异步加载，防止页面出现未响应，所这种情况也可能出现未响应，所以需要把js放到页尾执行

这样就完了？当然没有，更多时候，我们需要一个js的入口文件，我们不可能把所有的js代码和HTML写一起，这时候我们需要使用require.js的一个属性data-main，从字面上来看是主要的数据，所以这个属性的作用就相当于js是从这个属性所对应的js开始的：

就是这样,data-main对应的js/main表示的是js目录下main.js文件（默认省略后缀名），接下来，我们的js代码就可以放到main.js里面了

2、使用require.js来引导js

requirejs.config(\{  
    baseUrl: "js",//表示js默认文件夹  
    waitSeconds:20,//等待时间  
    paths: \{//配置js路径  
        'jquery':'./lib/jquery',//对应的意思为‘输出名’：'js路径'  ，这里表示的意思是，你之后要使用这个js的时候，请求输出名就行了，简单讲就是，用一个简单的名字来表示一个js

\})

上面是配置你要用的js路径，方便你来使用，下面就来讲如何写自己的代码

假如你写的代码要依赖jQuery.js这个代码库，你可以这样写

require(\['jquery'\],function($)\{

alert('我在使用require.js');

\})

require.js的第一个参数为你依赖的js，名字为配置里面的输出名，function里面的$为jQuery这个js库输出的变量名

以上是require.js最快速最简单的使用方法，当然还有些特殊情况在使用的时候需要注意一下，比如说我们在加载非AMD规范的js时，应该这样写了

shim: \{  
        'address':\{//上面配置写的输出名  
            deps: \['jquery'\], //依赖的js  
            exports: 'address'//重新的输出名  
        \}

实际在项目中我们也不可能将所有的js放在main.js里面，这样不好维护，所以我们通常将每个页面对应的js作为一个模块单独写，

那么我们在每一个模块中也要按照AMD规范来写代码。具体搜索AMD规范。