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

时间 2019-11-08

标签 requirejs 使用初探模块定义 define 函数用法栏目 JavaScript 繁體版

原文原文链接

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函数只接受一个函数的时候应返回一个对象，做为模块导出的对象。传入的函数对象由于返回对象的属性中会含有函数对象内的对象引用等而造成闭包。异步

若是咱们定义的模块引用其余模块的要这样写async

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

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

使用requireJS的好处

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

require.config的使用

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

require.config({
    paths:{

        baseUrl:""      //指定基准url下边引用模块的url都相对与此url，可省略此键

        //传入require函数数组参数的值做为键值
        moduleA:""      //路径。可使用本地的（../上一级目录等用法都是能够的），或另外一台主机上的文件（cdn都是能够的）
    }
});

//index.html文件里引进来了index.js。index.js文件里写上以下的代码。


       require.config({
    　　　　paths: {
    　　　　　　"Module": "module/complexModule"
    　　　　}
    　　});
       require(['Module'], function (Module){});

转载: https://blog.csdn.net/dbTbest/article/details/78324275url