笔记关于require.js 的用法

Posted 2020-09-11 Stitch晨

最近忙于学校的一个新网站建设，对于以前的前端程序编写方式的不正规特意上网学习了require.js 的用法，使此次的工程更加有条理同时符合当前前端的开发模式——前端模块化。

网上有不少很好的学习文章这里推荐阮一峰老师的：http://www.ruanyifeng.com/blog/2012/11/require_js.html

下面是本人归纳的一些要点：

1、使用require.js 必须从官网下载 require.js 文件 http://www.requirejs.cn/ 打开官网便可以下载，下载完之后就好像导入jquery 文件一样用script 标签导入

<script type="text/javascript" src="js/require.js" defer async="true" data-main="js/loginMain"></script>

这里的script 标签不再像以前导入js 文件那样简单，这里有几个重要属性：

①：defer 和 async="true"：这两个属性是规定浏览器异步加载requier.js 这个文件的，防止在网络环境较差的时候 网页处于假死状态

②：data-main: 这个属性是指定此页面js 脚本的main 文件，就像java 以及 c 语言中的main 函数一样，所有通过require.js 整理的模块都将在这个文件里面执行

而src 自然就是导入我们的 require.js 文件了

 

2、main 函数的实现：

导入完 require.js 文件，指定好了页面的main 文件了我们就要编写我们的main 文件了

require(["jquery.min","math"],function($,math){
    var body = $("body");
    console.log(body);
    var result = math.add(1,2);
    console.log(result);
})

main 文件里面的不是main 函数而是由 require.js 提供的require 函数，这个函数接收两个参数：

第一个参数：数组，保存着需要加载的模块文件名字，例如jquery.min.js 这个模块文件它的名字当然就是 “jquery.min” 啦，而那个math 就是我自己定义的js 文件 math.js

第二个参数：回调函数。这个函数同样接收参数，第一个参数保存着多少个模块的名字，这个函数可写的参数就有多少个，而函数的参数只是这一个模块的一个代名词，主要使用参数的名字去调用模块的某一个方法或值，例如，jquery的参数可以写成这样：

require(["jquery.min","math"],function(q,math){
    var body = q("body");
    console.log(body);
    var result = math.add(1,2);
    console.log(result);
})

那么，调用jquery 模块的的方法时就只能通过 “q” 这个参数名去引用了

*注意每一个模块都必须有一个出口（返回值）

在回调函数之内我们就可以使用加载了的模块中的方法了！

 

3、require.js 接受模块的形式是 AMD 形式

当我们使用 require.js 加载我们的模块时我们不可以用以前编写javascript 的方式写了 必须按照AMD 规范，即像如下这样写：

define(function(){
    function add(num1,num2){
        return num1 + num2;
    }

    return {
        add: add
    };
})

 

如果某一模块需要依赖其他一些模块，则define 方法中的第一个参数可以传进一个数组，数组里面保存的是要调用的模块名字，函数的参数依然是调用前面依赖模块的代名词而已

例：

define(["M1"],function(m1){
    function add(num1,num2){
        return num1 + num2;
    }


    return {
        add: add
        m1.foo();
    };
})

 

所有模块的代码都要写在 define 这个方法的回调函数中

但是这种形式在我们编写自己的模块的时候显然是没什么大问题的，反正都是要自己写。但是在导入一些流行的前端库例如：jquery这些的时候就有问题了，jquery的某些旧版本（这里我没有详细研究反正我用的 1.9.1 版本是不符合 AMD 规范的）就不符合AMD 规范了

那怎么办？没关系 require.js 又提供了一些方法可以兼容这些不符合 AMD形式的模块

只要我们在页面的main 文件中 require方法的前面加上这个方法就好：

require.config({
    shim:{
        ‘jquery.min‘:{
            exports: ‘$‘
        }
    }

})

这个方法是require.config 方法，它接收一个对象作为参数，对象的内部有一个 shim属性，用来规定加载文件的依赖性以及输出的对象

上面的例子我将jquery 自定义规范，语法是首先在 shim属性里面 定义一个不符合AMD 规范模块的属性名（这里就是jquery啦），然后这个属性的值是一个对象，对象里面又有两个属性：

第一个是：exports 属性：值为此模块的输出值 也就是return的值，jquery的主函数就是 “$” 所以这里填 $

第二个是：deps 属性：值为此模块依赖的其他模块名字以数组的形式保存，例如：

require.config({
    shim:{
        ‘math‘:{
            deps: [‘m1‘,‘m2‘],
            exports: ‘math‘
        }
    }

})

这里的 math 模块依赖 m1,m2 模块，输出为 math这个对象

 

 

本篇文章纯是个人觉得的要点归纳，不足的地方敬请原谅