码迷,mamicode.com
首页 > Web开发 > 详细

require.js 基础使用方法记录

时间:2017-04-09 11:30:03      阅读:315      评论:0      收藏:0      [点我收藏+]

标签:使用   html   .config   pat   tps   特定   export   efi   结构   

require.js作为javsscript的一种模块化编程规范,异步加载模块,主要应用于浏览器端,异步加载js文件,让浏览器不会因为在加载js文件而失去响应。

一、开始

目录结构:

技术分享

首先要加载require.js

<!-- ***.html-->

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

app.js即是入口文件,我们在里面加载math.js

//app.js
require([‘app/math‘],function(math){ console.log(‘1 + 3 = ‘,math.add(1,3)); })

math.js的编写要符合AMD规范

// math.js
define(function(){
    var add = function(a,b){
        return a+b;
    }
    return {
        add:add
    }
})

这时候运行就可以打印相应的结果

技术分享

二、加载不符合AMD规范的js文件

require.js为我们提供了一个shim方法,帮助我们加载一些不符合AMD规范的js文件

首先我们随便在People.js里面写点内容:

//People.js
var People = function(name){
    this.name = name;
    this.sayName = function(){
        console.log(`my name is ${this.name}`);
    };
};

改写app.js

//app.js
require.config({
    shim:{
        ‘app/People‘:{
            deps:[], // 这里声明依赖文件
            exports:‘People‘ // 输出方法
       } 
    }
});
require([‘app/math‘,‘app/People‘],function(math,People){
    console.log(‘1 + 3 = ‘,math.add(1,3));
    var jack = new People(‘jack‘);
    jack.sayName();
})

运行,正确输出:

技术分享

 

三、baseUrl和paths

require提供一些帮助我们定位文件的方法

在app.js中添加baseUrl:

// app.js
require.config({
    baseUrl:‘js/app‘, //相对于html目录定位
    shim:{
        People:{
            deps:[], // 这里声明依赖文件
            exports:‘People‘ // 输出方法
       } 
    }
});
require([‘math‘,‘People‘],function(math,People){
    console.log(‘1 + 3 = ‘,math.add(1,3));
    var jack = new People(‘jack‘);
    jack.sayName();
})

同样可以输出相应的结果:

技术分享

我们还可以为特定的文件指定paths,比如我们要引入jquery:

require.config({
    baseUrl:‘js/app‘, //相对于html目录定位
    paths:{
        jquery:‘../lib/jquery‘ // 相对于baseUrl定位
    },
    shim:{
        People:{
            deps:[], // 这里声明依赖文件
            exports:‘People‘ // 输出方法
        } 
    }
});
require([‘math‘,‘People‘,‘jquery‘],function(math,People,$){
    $(function(){
        console.log(‘1 + 3 = ‘,math.add(1,3));
        var jack = new People(‘jack‘);
        jack.sayName();
    })
})

同样输出了一样的结果:

技术分享

 

require.js 基础使用方法记录

标签:使用   html   .config   pat   tps   特定   export   efi   结构   

原文地址:http://www.cnblogs.com/lastnigtic/p/requirejs.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!