jsインポート順序のエラーについて覚書

test.html

<html>
    <head>
        <meta charset="UTF-8">

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/before.js"></script>
        <script type="text/javascript" src="js/after.js"></script>

    </head>
    <body>

    </body>
</html>

before.js

var test = new Array();

function myDate(){
    var date = new Date();
    test[0] = date.getFullYear();
    test[1] = date.getMonth();
    test[2] = date.getDay();
}

function testStr(){
    myDate();
    return test[0]+test[1]+test[2];
}

function testAlert(){
    alert(testStr());
}

after.js

$(function(){
    testAlert();
    alert(test[0]);
});

jquery-3.2.1.min.js ・before.js ・after.js の並びで正常動作

・before.js ・after.js ・jquery-3.2.1.min.js の並びにすると

ReferenceError: $ is not defined

jqueryないです。エラー

jquery-3.2.1.min.js ・after.js ・before.js の並びでも正常動作