require.js基本使用

用这个插件目的:

这个插件的体积非常小14k左右,主要是解决目前我们js文件引入臃肿的问题,它可以将我们需要的js文件定义成一个模块的方式,只要我们想引入某个模块,我们声明引入就可以了。而且是异步加载的模式,对浏览器体验也非常好,不会阻塞渲染。

基本API
require定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短
define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块,并执行加载完后的回调函数

第一步:a.js定义

    define(function(){
        function fun1(){
          alert("it works");
        }
        fun1();
    })

第二步:引入这个模块

require(["js/a"],function(){
    alert("load finished");
})

注意:a.js引入在js文件下,同时a.js中后缀不要了。

加载文件
加载本地是上面的那个样子,如果我们要加载其他网站要用到require.config这个方法

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})
require(["jquery","a"],function($){
    $(function(){
        alert("load finished");  
    })
})

这样配置后,当百度的jquery没有加载成功后,会加载本地js目录下的jquery
在使用requirejs时,加载模块时不用写.js后缀的,当然也是不能写后缀
上面例子中的callback函数中发现有$参数,这个就是依赖的jquery模块的输出变量,如果你依赖多个模块,可以依次写入多个参数来使用:

讲讲data-main这个属性:

<script data-main="js/main" src="js/require.js"></script>

其实就是引入require.js后,再引入js文件夹下的main.js文件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值