requireJS 简单上手

时间 2019-11-17

原文原文链接

昨天简单学习了下requireJS和seaJS，两个都是解决模块化开发的问题的工具，使用也有不少类似之处，只是requireJS是AMD规范，seaJS使用的是CMD规范。javascript

目录结构：html

index.htmljava

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script data-main="./js/base.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js" ></script>
    <script type="text/javascript">
        require(['index'], function (index) {
            index.foo();
            console.log('Load complete！');
        });
    </script>
</head>
<body>
    <h2>requireJS</h2>
</body>
</html>

第一行script导入requireJS，而后有个data-main属性，这个文件里制定了引用文件相对目录，也有不少能够配置的东西。app

base.js模块化

requirejs.config({
    baseUrl: './',
    paths: {
        index: 'index'
    }
});

这样配置了之后，在家在模块的时候就能够按照baseUrl+paths的路径去加载文件了。工具

这样咱们在index.html就能够直接加载index模块了。requirejs

index.js学习

define(function(){
    function foo() {
        console.log(1);
    }
    return {
        foo: foo
    };
});

反悔了一个对象，而后在index.html就能够使用这个对象了，简单上手就是这样！ui