:: Stay Weird :: 我是Ter

這篇完全是要寫給自己看的 😫

為了完成第一次做中學的程式，有很多土法煉鋼、很多笨拙的行為，最後也許功能都做好了，但是我的 code 非常地亂！

要好好紀錄大神男友告誡我的好幾個重點！

以下是整理過的 code

(function(){
    var vocaData,
        shuffleData,
        quesNum = 1,
        vocaPos = 0;

    $(document).ready(function() {
        // 取得JSON檔
        $.getJSON("js/test.json", function(result){
            vocaData = result;
            init();
        });
        
        // 按下按鈕確認正確與否
        $("#add").on('click', function() {
            checkOut();
        });

        // 按下enter也可確認
        $("#chinese").keydown(function(event) {
            if(event.keyCode == 13){
                checkOut();
            };
        });
    });

    // 抓到 JSON 馬上啟用這個function做初始化
    function init() {

        // 隨機排列 array
        shuffleData = vocaData.sort(shuffle);

        // 顯示題目
        $("#abc").text(quesNum + ".");
        $("#english").text(Object.keys(shuffleData[vocaPos]));
    };

    // 確認正確與否的 function
    function checkOut() {
        var correct = Object.values(shuffleData[vocaPos]),
            answer = $("#chinese").val();

        if (answer == correct) {
            alert ("ok!")
            quesNum += 1;
            vocaPos += 1;
            correct = Object.values(shuffleData[vocaPos]);
            $("#abc").text(quesNum + ".");
            $("#english").text(Object.keys(shuffleData[vocaPos]));
        } else {
            alert ("try again.")
        };

        $("#chinese").trigger("select");
    };

    // 隨機排序的 function
    function shuffle(a, b) {
        var num = Math.random() > 0.5 ? -1:1;
        return num;
    };
})();

1. $("document").ready(function(){}) 到～底～要怎麼放？

拿去餵狗的時候會看到 document ready 常會與 window.onload 的比較，大概是讀入的順序（以目前理解而言）

但是在這裡，我只有發現「我需要在 document ready 裡面呼叫 checkOut()，該 function 才會動作」，所以一開始我把 checkOut() 直接放在 document ready 裡面（羞）。

後來修正成將 function 寫在 document ready 之外，需要等 document ready 之後才能執行的部分便寫在裡面。

2. 為什麼許多人寫 code 會用 (function(){}) 全部包住 （並在此 function 結束之後直接以()方式直接使用「一次」）？

目前理解是為了保護 code，因為「js 是用 function 區別 scope 」！若我用匿名函式包起來，那外部便不能自由調用裡面的變數等。

希望未來的自己若有變強的話，能夠好好寫清楚這段...

除了這兩個重要的問題之外，還有幾個重點要注意

1. 排版重要性：不要亂空格，以及格式要統一

2. 變數的使用範圍：若為常調用的全域變數，那就好好在前面一一標示出來；一次性的那就包在 function 裡憋～ ヽ(✿ﾟ▽ﾟ)ノ