requirejs基础

最新推荐文章于 2018-04-21 10:27:35 发布

qianyi168

最新推荐文章于 2018-04-21 10:27:35 发布

阅读量512

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qianyiyiding/article/details/78034763

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

requirejs基础

随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，有时候js文件过多会导致加载慢等一系列的问题。

常用的方法：

requirejs.config
requirejs
define

requirejs.config

这里写图片描述
requirejs.config主要是指定模块的别名，这里jquery-1.9.1.js比较长，为了方便别的模块进行引入，所以我们将jquery-1.9.1.js修改为别名jquery

//配置别名，将jquery-1.9.1配置为别名jquery
//require.config方法用来指定模块的别名,方便模块的引入
requirejs.config({
    paths:{
        jquery:'jquery-1.9.1',
    }
});

有时候可以直接引入网络资源：

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
        "a" : "js/a"   
    }
})

requirejs

//引入对应的模块，编写我们的主代码,$和validate相当于对象的概念,
requirejs(['jquery','validate'],function($,validate){
    $('body').css('background-color','red');
    console.log(validate.isEqual(2222,2));
});

可以看到我们引入了jquery这个模块，实际上就是jquery-1.9.1.js这个文件。
另外require===requirejs

//引入对应的模块，编写我们的主代码,$和validate相当于对象的概念,
require(['jquery','validate'],function($,validate){
    $('body').css('background-color','red');
    console.log(validate.isEqual(2222,2));
});

require和requirejs里面接受一个数组参数，表示要引入的模块，然后回到一个函数，加载完成执行的代码。

define

编写一个模块

//编写模块
define(['validate'], function($) {
    return{
        isEmpty:function(){},
        checkLength:function(){},
        isEqual:function(str1,str2){
            debugger
            return str1==str2;
        }
    }
});

将编写的函数功能放入到return中。

引用

<!DOCTYPE html>
<html>
<head>
    <title>My Sample Project</title>
    <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
    <script data-main="js/main" src="js/require.js"></script>
</head>
<body>
    <h1>My Sample Project</h1>
</body>
</html>

这里有一个data-main,作用是引入require.js之后。接下来调用的js文件。

扩展

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？
回答是可以的。
这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

requirejs.config({
    baseUrl : "/"+contextName+"/static/js/yfq",
    urlArgs: "v=2016061604",
    paths : {
        "underscore" : "./libs/underscore-min",
        "zepto" : "./libs/zepto.min",
        "touch" : "./libs/touch",
        "fx" : "./libs/fx",
        "fx_methods" : "./libs/fx_methods",
        "class" : "./libs/class",
        "utils" : "./utils",
        "IScroll" : "./libs/iscroll-lite",
        "doT" : "./libs/doT.min"
    },
    shim : {
        "zepto" : {exports : "$"},
        "touch" : {deps : ["zepto"]},
        "fx" : {deps : ["zepto"]},
        "fx_methods" : {deps : ["zepto"]},
        "underscore" : {exports : "_"},
        "doT" : {exports : "doT"},
        "IScroll" : {exports : "IScroll"},
        "utils" : {
            exports : "utils",
            init : function() {
                return(Utils)
            }
        },
    }
});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

qianyi168

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
requirejs基础

requirejs基础随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，有时候js文件过多会导致加载慢等一系列的问题。常用的方法：requirejs.config requirejs definerequirejs.config requirejs.config主要是指定模块的别名，这里jquery-
复制链接

扫一扫

专栏目录