requireJs使用初探及模块定义define函数的用法

来源：互联网发布：中交二公院知乎编辑：程序博客网时间：2024/06/05 22:54

requireJs下载

requireJS文件下载，选择自己需要的版本即可

requireJs使用实例

step1 定义一个html文件

我们需要定义一个Html文件，文件命名为requireHtml.html
文件内容下

<!DOCTYPE html><html lang=""><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title></title></head><body>    <!--    引入require文件，../指的是当前requireHtml.html文件所在目录的上级目录。在这里也就是引用requireHtml.html文件所在目录的上级目录的lib文件夹下的require.js文件。data-main属性必须存在，它指定了主模块文件。data-main属性的值默认的后缀为.js。在这里也就是和requireHtml.html同一目录等级下的main.js文件    -->    <script src="../lib/require.js" data-main="main"></script></body></html>

step2 定义main.js文件的内容

main.js文件的内容：

/*可以接受一个数组对象，里边以字符串的形式指定了模块的路径，一个模块就是一个Js文件，像当前这样指定，意味着showA.js文件和showB.js文件和main.js文件位于同一个目录，如果showB.js文件位于和main.js文件一个目录的js文件下边这里的"showB"就要换成"lib/showB"。接下来require函数会按照这个数组的顺序，异步加载对应的模块。这个顺序也是传入回调函数的参数顺序。*/require(["showA","showB"],function(showA,showB){    showA.sA();    showB.sB();});

模块的定义–define函数的用法

showA模块的定义

define(function(){    return ({        sA:function(){        console.log("showA");    }    });});

showB模块的定义

define(function(){    return {        sB:function(){            console.log("showB");        }    }});

按照AMD(asynchronous module define)异步模块加载的规范我们应使用define函数定义一个模块。
define函数只接受一个函数的时候应返回一个对象，作为模块导出的对象。传入的函数对象因为返回对象的属性中会含有函数对象内的对象引用等而形成闭包。

如果我们定义的模块引用其他模块的要这样写

//传入的数组的每个成员为依赖的模块的路径define([moduleA,moduleB,...],function(moduleA,moduleB){});

注意：使用exports导出模块会报错。

使用requireJS的好处

1.解决页面加载时，因加载脚本而导致页面挂起的问题。
这个问题的产生是因为页面加载脚本会暂停当前页面的渲染去加载脚本，当脚本加载完之后，才会继续渲染页面。当脚本比较大时就会造成因为加载脚本使页面挂起导致页面无响应的问题。
requireJS因为异步加载模块从而避免了这个问题。
2.当页面中多个js文件相互依赖时，使用script标签引用时要注意文件的先后顺序，即被依赖的文件应在前边。require函数和define函数通过指定依赖的模块和保证模块加载完之后才调用回调函数解决了这个问题。

require.config的使用

我们可以在定义的main.js头部调用require.config函数，接受一个选项对象配置引用模块的路径。
demo：

require.config({    paths:{        baseUrl:""      //指定基准url下边引用模块的url都相对与此url，可省略此键        //传入require函数数组参数的值作为键值        moduleA:""      //路径。可以使用本地的（../上一级目录等用法都是可以的），或另一台主机上的文件（cdn都是可以的）    }});

阅读全文

0 0