LimeJS : 「箭頭函式」無法編譯

 JavaScript 中可以使用所謂的「箭頭函式」(arrow function expression) 來簡化語法，不過，之前就曾遇過在 LimeJS 中，使用「箭頭函式」的部份，在 build 時會出現錯誤。當時是想，會不會是 Google Closure Compiler 不支援的關係？就直接放棄不用了。這幾天為了解決在沒有楷體字可用的行動載具上，注音符號的調號會太小，試了可以載入字型檔解決字型的問題。不過，找到的範例使用的是「箭頭函式」的語法，類似這樣：

isMyFontLoaded = false;
var myFont = new FontFace("注音符號", "url(myfont.woff)";

myFont.load().then(
font => {
document.fonts.add(font);
ismyFontLoaded = true;
},
error => {
console.log(error);
}
)

這樣的語法，如果不放在 LimeJS ，並經過編譯，可以正常運作。反之則會出現語法錯誤的訊息。

想到應該是 Google Closure Compiler 不認得「=>」的關係。好吧！那我用比較傳統的語法來寫，總可以了吧？於是將函數改成這樣：

myFont.load().then(function(font) {
document.fonts.add(font);
ismyFontLoaded = true;
}).catch(function(error) {
console.log(error);
});

不過，編譯時，又出現這樣的錯誤訊息：

ERROR - Parse error. missing name after . operator
        }).catch(function(error) {

什麼！那個 catch 不是通通可以用的，好吧！那我再改成這樣：

myFont['load']()['then'](function(font) {
document.fonts.add(font);
ismyFontLoaded = true;
})['catch'](function(error) {
console.log(error);
});

哈！果然是天不從人願，編譯是過關了，沒有任何錯誤訊息；不過，執行到載入要將字型加到 fonts 中時，會出現這樣的訊息：

TypeError: Cannot read properties of undefined (reading 'add')

將編譯過的截取出來比對看看：

a.load().then(function(a){
document.Me.add(a);
isMyFontLoaded=l
})["catch"](function(a){
console.log(a)
})

錯誤訊息在「add」，由這個關鍵字往前找，執行「add」的是「document.Me」，原來應該是要「document.fonts」，所以還是點「.」在作怪。如果改用 document['fonts'] ，fonts 就不會被編碼了。所以，底下這個版本就沒問題了：

myFont['load']()['then'](function(font) {
document['fonts']['add'](font);
ismyFontLoaded = true;
})['catch'](function(error) {
console.log(error);
});

實在太棒了！又累積一點經驗，下回再遇到「箭頭函式」，知道怎麼轉換了！是說，那個愛作怪的點「.」，已經出來搗蛋很多次了。

相關文章

• 雄 : LimeJS : 存取物件的屬性