require.js学习笔记1

最新推荐文章于 2020-12-17 16:37:49 发布

一只二枫

最新推荐文章于 2020-12-17 16:37:49 发布

阅读量586

点赞数

分类专栏： js 文章标签： require.js

本文链接：https://blog.csdn.net/a332708815/article/details/50774235

版权

js 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一、require.js的下载

版本：require.js 2.1.11

地址：http://requirejs.org/docs/release/2.1.11/minified/require.js （右键另存为）

二、require.js的加载

新建一个文件夹，如requireTest，内部再创建一个名为js的文件夹，放置require.js文件。

在requireTest中创建一个test.html文件。内容如下

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <script src="js/require.js" data-main="js/main"></script>
  </body>
</html>

其中，src指向的是文件夹js下的require.js文件，data-main指向的是文件夹js下的main.js文件。这里会先加载require.js，后加载main.js。

然后我们在文件夹js下创建main.js。内容如下

alert("加载成功！");

打开test.html效果如下

这时，对require.js和main.js的加载已经成功了。

三、主模块的写法

刚才讲到的main.js，称为"主模块"，意思是整个网页的入口代码。它有点像C语言的main()函数，所有代码都从这儿开始运行。

刚才直接在main.js中加入alert("加载成功！") ，网页能直接输出结果，说明是可以直接写入javascript。但是，如果只是这样使用的话，就不需要require.js了。

真正常见的情况是，主模块依赖于其他模块，这时就要使用AMD规范定义的的require()函数。

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

　　　　// some code here

　　});

require() 函数接受两个参数，第一个参数是一个数组，表示所依赖的模块，上例就是['moduleA', 'moduleB', 'moduleC']，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

require(['math', 'jquery','underscore','handlebars','backbone'], function (math, $,underscore,handlebars,backbone) {
    <pre code_snippet_id="1593584" snippet_file_name="blog_20160301_3_6182762" name="code" class="html">// some code here

});

require.js会先加载jQuery、underscore和backbone，然后再运行回调函数。主模块的代码就写在回调函数中。

四、模块的加载

上示例中，主模块的依赖模块是['math', 'jquery','underscore','handlebars','backbone']。默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为 jquery.js，underscore.js，handlebars.js和backbone.js，然后自动加载。

使用require.config()方法，可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

require.config({
    paths: {
        "jquery": "jquery",
        "underscore": "underscore",
        "handlebars": "handlebars",
        "backbone": "backbone"
    }
});

如果其中，underscore.js，handlebars.js和backbone.js位于和jquery.js同目录下的lib文件中，则require.config()方法改为：

require.config({
    paths: {
        "jquery": "jquery",
        "underscore": "lib/underscore",
        "handlebars": "lib/handlebars",
        "backbone": "lib/backbone"
    }
});

如果所有js文件都在lib文件目录下，

require.config({
    baseUrl: "js/lib",
    paths: {
        "jquery": "jquery",
        "underscore": "underscore",
        "handlebars": "handlebars",
        "backbone": "backbone"
    }
});

五、AMD模块的写法

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。

具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

define(function () {

    var add = function (x, y) {

        return x + y;

    };

    return {

        add: add
    };

});

加载方法如下：

require(['math'], function (math){

　　alert(math.add(1,1));

});

一只二枫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
require.js学习笔记1

版本：require.js 2.1.11
复制链接

扫一扫

专栏目录