require.js的介绍与使用

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

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

二、快速使用require.js

废话不多讲,我希望我能将每一个细节展现出来,能解决各位朋友的疑惑
1、引入require.js
<script type="text/javascript" src="require.js"></script>
和其他js一样,不过require.js的优点是异步加载,防止页面出现未响应,所这种情况也可能出现未响应,所以需要把js放到页尾执行
这样就完了?当然没有,更多时候,我们需要一个js的入口文件,我们不可能把所有的js代码和HTML写一起,这时候我们需要使用require.js的一个属性data-main,从字面上来看是主要的数据,所以这个属性的作用就相当于js是从这个属性所对应的js开始的:
<script src="js/require.js"  data-main="js/main" ></script>
就是这样,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规范。







猜你喜欢

转载自blog.csdn.net/qq_35616850/article/details/77619016