iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0
自我挑戰組

I don't know JS yet系列 第 4

[ Day 4 ] I don't know JS yet - Get Started

  • 分享至 

  • xImage
  •  

稍微回想昨天的部分,提到 JS specification 以及不同環境會有各自的 APIs ;
Dev tool 只是提供開發者一個友善的空間去做開發,在 console 看到的結果可能不等同真正的 JS 運作結果;
程式語言 paradigm 分三種:procedural, object-oriented, functional;

接著今天份的學習

JavaScript is backwards compatibility

Backwards compatibility

backward compatibility 是一種特性,不僅限於程式語言,像作業系統、產品等都有這種特性,相對的特性是 forward compatibility。
JS 屬於 backward compatibility 是什麼意思?
就是 2000 年寫的 JS program 在現在的瀏覽器上還是可以執行。

Backwards compatibility means that once something is accepted as valid JS, there will not be a future change to the language that causes that code to become invalid JS. Code written in 1995—however primitive or limited it may have been!—should still work today. As TC39 members often proclaim, "we don't break the web!"

Jumping the Gaps

考量到使用者的瀏覽器版本不一樣,有的較新,有的較舊,較舊版的如果跑了新的 JS program,可能會有 syntax error 或者 api error

針對新的、不相容的 syntax 通常會用 transpiling (轉譯) 工具,JS 常見的 transpiler 如 Babel 就是來解決新的 syntax 這種 forwards-compatibility 的問題。

譬如這段 JS

const obj = {
  'Country': 'UK',
};

let country = obj?.country;

經過轉譯後

const obj = {
  'Country': 'UK',
};

let country = obj == null ? void 0 : obj.country;

轉譯後的 JS 在任何瀏覽器上都可以跑;

Filling the Gaps

如果 forwards-compatibility 問題不是 syntax,而是 apis,通常解法會是 polyfill (aka "shim")

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it. __ https://developer.mozilla.org/en-US/docs/Glossary/Polyfill

JS polyfill 例子(現在有許多工具,這只是舉例,通常不用自己手寫,轉譯器會幫助你)

if (!Promise.prototype.finally) {
    Promise.prototype.finally = function f(fn){
        return this.then(
            function t(v){
                return Promise.resolve( fn() )
                    .then(function t(){
                        return v;
                    });
            },
            function c(e){
                return Promise.resolve( fn() )
                    .then(function t(){
                        throw e;
                    });
            }
        );
    };
}

今天份的學習到這邊告個段落


上一篇
[ Day 3 ] I don't know JS yet - Get Started
下一篇
[ Day 5 ] I don't know JS yet - 直譯還編譯 ?
系列文
I don't know JS yet30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言