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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。