初学习require.js

requireJs是一个非常小巧的javascript模块载入框架,是AMD(异步模块加载机制)规范最好的实现之一.

1、为什么使用require.js

    (1):实现js文件的异步加载,避免网页失去响应。

    (2):管理模块之间的依赖性,便于代码的编写和维护。

2、requireJS的基本API:

     config--配置requirejs依赖。

     define--创建模块、全局函数。

     require--读取依赖、全局函数。

3、require.js加载

  a、引入require.js  <script src="js/require.js"></script>

    但是加载这个文件时也可能造成网页失去响应,解决方法有两个:1、把它放到网页底部加载2、如下:

   <script src="js/require.js" defer async="true"></script>

   b、加载完require.js,要加载我们的主模块main.js

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

4、主模板:main.js

  

require.config({
    baseUrl:'js',//改变基目录
    paths:{
        "jquery":"jquery.min",
        "bootstrap":"bootstrap.min"
    },
    shim:{ //专门来配置不兼容的模块(不符合amd规范的)
        "bootstrap":{
             exports:"bootstrap"
         },
          "jquery.scroll":{
               deps:['jquery'],
               exports:'jQuery.fn.scroll'
           }
    }
})
require(["jquery","bootstrap"],function($,bootstrap){
     console.log('1111')
}

require.config({
    baseUrl:'js',//改变基目录
    paths:{
        "jquery":"jquery.min",
        "bootstrap":"bootstrap.min"
    },
    shim:{ //专门来配置不兼容的模块(不符合amd规范的)
        "bootstrap":{
             exports:"bootstrap"
         }
    }
})
require(["jquery","bootstrap"],function($,bootstrap){
     console.log('1111')
}

五、amd模块的写法

index.js :

define(["jquery"],function($){
    function func(){
        this.fun=function(){
            console.log('1234')
        }
    }
    return func;
})

define()函数的第一个参数必须是一个数组

在index.html中可以引入index.js

<script>
    require(['js/index'],function(){
        console.log('34455')
    });
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值