美文网首页
JS模块化(amd)

JS模块化(amd)

作者: 原来哥哥是万家灯火 | 来源:发表于2019-02-09 18:27 被阅读0次

    amd规范,用difine和require两个方法声明和加载模块,然后指定回调函数执行加载之后的业务。RequireJs是一个实现了amd规范的插件。以下是一个使用的小例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--需要指定一个baseUrl-->
    <script data-main="js/app.js" src="js/require.js"></script>
    </body>
    </html>
    

    define() 方法

    定义独立模块(不加载其他模块)
    提供简单加法、乘法的独立模块:add、multipart

    // add.js 
    // 定义一个不需要依赖任何其他模块的独立模块,第一种写法,在函数中返回一个对象
    
    define(function () {
        function add(a, b) {
            return a + b;
        }
    
        return { addFn: add }
    });
    
    
    // multipart.js
    // 定义一个不需要依赖任何其他模块的独立模块,第二种写法,直接给defiene方法传入一个对象作为参数
    define({
        mulFn: function (a, b) {
            return a * b;
        }
    });
    

    定义非独立模块
    app模块,引用add、multipart模块

    // app.js
    
    define('app', ['add', 'multipart'], function (add, mul) {
        let addResult = add.addFn(5,9);
        let mulResult = mul.mulFn(5,9);
        document.write(`5 + 9 = ${addResult};<br> 5 × 9 = ${mulResult};`);
    
        // define方法的回调函数需返回一个对象
        return {
            text: 'this is export from app module'
        }
    });
    

    require() 方法

    使用方法与define基本类似,只是没有再定义一个 "app" 模块而已

    // app.js
    
    require(['add', 'multipart'], function (add, mul) {
        let addResult = add.addFn(5,9);
        let mulResult = mul.mulFn(5,9);
        document.write(`5 + 9 = ${addResult};<br> 5 × 9 = ${mulResult};`);
    });
    

    require.config()

    最上面的HTML中有个<script data-main="js/app.js" src="js/require.js"></script>,其中的data-main是在干什么呢,它实际是在告诉RequireJs本项目的某些基本配置。

    插件

    除了上面自己写的add模块外,还可以加载一些官方或第三方提供的插件,如官方提供的domReady插件,
    下载之后直接引用即可:

    require(['domReady'], function (domReady) {
      domReady(function () {
        //This function is called once the DOM is ready.
        //It will be safe to query the DOM and manipulate
        //DOM nodes in this function.
      });
    });
    

    优化器

    官方提供了一个压缩、合并模块的工具,名字叫r.js,是个基于node的命令行工具。

    下一篇,cmd

    相关文章

      网友评论

          本文标题:JS模块化(amd)

          本文链接:https://www.haomeiwen.com/subject/syrzsqtx.html