requireJs | 在html中使用AMD规范

最新推荐文章于 2024-06-20 15:56:44 发布

Prpr_Saber

最新推荐文章于 2024-06-20 15:56:44 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： requireJS AMD

本文链接：https://blog.csdn.net/u011607490/article/details/81743484

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

requireJs规范就是：在项目配置文件中配置好“js的路径”和“js文档中的函数模块的引用”，然后加载Html过程中就会根据配置好的路径和对应模块名称去加载代码，这样实现了js和HTML的分离，在另外的配置文档中管理js模块之间的依赖关系，这样有利于维护。

例如：

我们以d3.js和c3.js为例，c3是一个基于d3的图表绘图库，只要依次引入d3.js和c3.js即可使用它的api，现在我们使用AMD规范来配置。

首先在HTML头部声明配置文件

<script src="../lib/require.js"></script>
<script src="./main.js"></script>

配置文档是main.js
结构如下：

main.js

//格式require.config({})

require.config({
    //根路径
    baseUrl:"../lib",
    paths:{
        //根路径下的各个模块
        d3:"d3-5.4.0.min",
        c3:"c3.min"
    },
    //由于d3.js和c3.js不是AMD规范,需要shim配置
    shim:{
        c3:{
            //依赖于d3.js
            deps:["d3"],
            //导出文件
            exports:"c3.min"
        }
    }
})

然后在html中使用c3模块


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
    <title>test1</title>
    <head>
        <link href="../lib/c3.min.css" rel="stylesheet">
        <!--引入require.js和main.js-->
        <script src="../lib/require.js"></script>
        <script src="./main.js"></script>
    </head>
    <body>
        <!--声明id-->
        <div id="chart"></div>
    </body>
    <script>
        //现在只需要require模块c3了，因为main里已经配置了依赖
        require(["c3"], function(c3){
            c3.generate({
                //绑定id
                bindto: "#chart",
                data:{
                    columns:[
                        ['data1', 30, 200, 100, 400, 150, 250],
                        ['data2', 50, 20, 10, 40, 15, 25]
                    ]
                }
            })
        })
    </script>
</html>

require模块方法的格式：

//格式require([module], (object)=>{})
require(["c3"], (c3)=>{
    //c3就是一个实例对象
    //c3.foo()               
})

定义符合AMD规范模块的格式

define([], function(){
    /**    codes    **/
})

Prpr_Saber

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录