背景
Chrome 61 支持了在瀏覽器中使用 ES6 模塊。Safari 10.1 上半年也已經(jīng)支持了。
用法
<script type="module" src="module-entry.js"></script>
<script nomodule type="text/javascript" src="nomodule.js"></script>
支持 ES6 模塊的瀏覽器會根據(jù) <script>
標(biāo)簽上的 type="module"
來加載 ES6 模塊;而忽略帶有 nomodule
的 <script>
標(biāo)簽。不支持的瀏覽器則會忽略 type="module"
的 <script>
標(biāo)簽,忽略 <script>
標(biāo)簽上的 nomodule
的屬性。
使用瀏覽器原生對 ES6 模塊的支持特性,可以享受模塊級別的緩存這一優(yōu)勢。
在模塊中引入其他模塊時(shí),需要添加 .js
后綴。模塊中可以使用 export
和 import
關(guān)鍵字。
// module-entry.js
// `.js` is required.
import name from './base.js';
console.log(name);
// base.js
export default 'base';
export const count = 1;
查看例子。
可見規(guī)范的落實(shí)對前端發(fā)展有這舉足輕重的作用。在前端現(xiàn)有能力范疇內(nèi),我們做了再多的優(yōu)化,能做到的比起在瀏覽器和操作系統(tǒng)的改動(dòng)帶來的優(yōu)化也要小很多。因此,作為前端開發(fā)只關(guān)注現(xiàn)有 API 和框架的話,能做的就很少了。
前端主要關(guān)注兩點(diǎn):用戶體驗(yàn)和研發(fā)效率。其他所有問題都可以被歸到以上兩個(gè)問題的范疇內(nèi)。兼容性是由不同的客戶端導(dǎo)致的,客戶端的升級是為了提升用戶體驗(yàn)。真正能夠提升用戶體驗(yàn)和研發(fā)效率的是增加新的特性。