新技術分享：在瀏覽器中使用ES6的import和export

阿新 • • 發佈：2020-12-14

技術標籤：javascript

前言

之前一直通過node使用ES6的import和export，但是沒想到現在瀏覽器也支援了。迫不及特地寫了一個小示例體驗了一把，覺得還可以。詳細可以見這篇博文： https://segmentfault.com/a/1190000014342718 。’

像傳統js的載入方式一樣，模組化的js也可以有2種使用方式，如下所示。但注意這裡的 type=“module”，這是傳統載入方式和按模組方式載入的區別。
（1）第一種：引入外部js

        <script src="xxx.js" type="module"> 
</script>

（2）第二種：在html中直接書寫

<script type="module">
    import xxx from "xxx.js";
    // your code ...
</script>

注意事項

使用此方式引用的js會有跨域的問題

示例

math.js

export function add(a, b){
    return a + b;
}

export function sub(a, b){
    return a - b;
}

export function mul(a, 
 b){
    return a * b;
}

export function div(a, b){
    return a / b;
}

export function mod(a, b){
    return a % b;
}

export default {
    add,
    sub,
    mul,
    div,
    mod
}

index.js

import math, {add, div} from './math.js';


export function sum(nums){
    let s = 0;
    for(let num of nums) 
{
        s = add(s, num);
    }
    return s;
}

export function avg(nums){
    const s = sum(nums);
    return  div(s, nums.length > 0 ? nums.length : 1);
}

export default {
    sum,
    avg
}

index.html

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <!--script src="./index.js" type="module"></script-->
        <script type="module" async>
            import R from "./index.js";
            import math, {sub, mul, mod} from "./math.js";
            console.log(R.sum([1, 2, 3, 4, 5, 6, 7, 8, 9 ,10]))
            console.log(R.avg([1, 2, 3, 4, 5, 6, 7, 8, 9 ,10]))
            console.log(R.avg([]))
            console.log(sub(100, 33));
            console.log(mul(100, 33));
            console.log(mod(100, 33));
        </script>
    </body>
</html>

執行結果

在這裡插入圖片描述

新技術分享：在瀏覽器中使用ES6的import和export

技術標籤：javascript 前言之前一直通過node使用ES6的import和export，但是沒想到現在瀏覽器也支援了。迫不及特地寫了一個小示例體驗了一把，覺得還可以。詳細可以見這篇博文： https://segmentfault.com/a/119

cc分享java：php中PC 和移動端 flex 通用佈局解決方案

1.flex 佈局常用屬性宣告flexBox容器display: flex; 主軸方向：預設行方向flex-direction: row;

新華社：元宇宙是整合區塊鏈等多種新技術產生的新型網際網路應用和社會形態

11 月 4 日訊息，今年以來，元宇宙成為科技圈和資本圈大熱的話題。騰訊、位元組跳動、網易、莉莉絲、米哈遊等大廠紛紛進入相關領域，國外微軟、英偉達等科技公司也均已佈局。隨著國外著名社交網站 FaceBook（臉書）

【MySQL】MySQL技術內幕：深入理解 InnoDB 和 MyISAM 儲存引擎

文章目錄引言1. InnoDB2. MyISAM3. InnoDB和MyISAM儲存引擎的區別3.1兩種儲存引擎的區別小結3.2聚簇索引和非聚簇索引原理4. 小結

新能源汽車：歐洲銷量爆發和在國內流行或將不遠

受 2020 年上半年疫情影響，全球消費萎靡不振，車市也長期處於低迷狀態，而近期歐洲新能源汽車銷量卻異軍突起，一舉成為全球第一大新能源汽車市場。

chrome ssl證書_如何在Google Chrome瀏覽器中檢視和列出SSL證書和詳細資訊？

chrome ssl證書 SSL certificates are the most important part of web security. SSL is used to encrypt the web traffic between the server and the client. HTTPS protocol simply implements the