May 31, 2017

Frontend Intermediate Course - 作業七直播筆記

交作業時就有備註自己知道的兩個 bug,跑版問題跟語言按鈕在第一次切換時 CSS 無法轉換。

跑版問題因為胡立老師在我交作業前有提示過,所以他就沒有再解答,要我靠自己 XD

第二個語言按鈕切換問題,胡立老師給這樣的提示:
這是因為你第一次按按鈕之後執行 selectButton,這個 function 會幫 div.menu button 加上 click 事件所以你第一次按鈕之後,只是加上這個事件,並不會被執行到第二次按的時候因為已經有加上 click 事件了,所以才會有作用。
後來解決方法是在 selectButton 函式中拿掉 click 事件,改成每次清空兩個語言按鈕的 selected class,然後再加上 selected class 到點選的按紐。

完成的程式碼:
function selectButton(lang) {
    $('#zh-tw').removeClass('selected');
    $('#en').removeClass('selected');
    $('#' + lang).addClass('selected');
}

跑版的問題嘗試了好幾種方法,後來還是暴力解法比較適合我,在 changeLang 函式中,清空 $('.container') 之後再塞入兩個佔位空的 div 維持版面。所以 Ajax 的部分可以維持原本的
$(getViewbox(streams[i])).insertBefore($('#first_viewbox'));

雖然解法不是很優雅,不過是我目前能夠想到的方法。

完成的程式碼:
function changeLang(lang) {
    $('h1.title').text(window.I18N[lang].TITLE);

    selectButton(lang);

    currentLang = lang;
    offset = 0;
    $container.empty();
    $container.append('<div id="first_viewbox" class="viewbox"></div>');
    $container.append('<div class="viewbox"></div>');
    getStreams();
}


胡立老師的直播:
7. 走向國際:i18n

這次看完直播沒有什麼筆記,基本的重點在做作業時都知道了,最重要的是在前幾個作業要把架構都寫好,這樣這次作業其實不用修改很多。

唯一一個自己需要再加強的是關於 JavaScript 中函數的參數。胡立老師講解時有用到語言參數代入函式,雖然說基礎參數概念我大致上了解,但更進階的用法跟觀念我就搞不太清楚。

下一次的作業難度比較高,而且要學 Node.js。我覺得應該又是持續崩潰的一個作業。話說從作業四之後每次都很崩潰 QAQ


附上修改後的 CodePen:
See the Pen HW_7 Modified by Peggy (@pychiang) on CodePen.




No comments:

Post a Comment