亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

關(guān)于export和export default你不知道的事

CarlBenjamin / 1535人閱讀

摘要：網(wǎng)上有很多關(guān)于和的文章，他們大部門都是只講了用法，但是沒(méi)有提到性能，打包等關(guān)鍵的東西。比如某個(gè)業(yè)務(wù)文件夾下的，用的時(shí)候用方便識(shí)別，不用重復(fù)在的中添加，也可以用方法提示。如果一個(gè)文件兼有以上需求可以同時(shí)和

網(wǎng)上有很多關(guān)于export和export default的文章，他們大部門都是只講了用法，但是沒(méi)有提到性能，打包等關(guān)鍵的東西。
大家應(yīng)該應(yīng)該能理解import * from "xxx"會(huì)把文件中export default的內(nèi)容都打包到文件中，而import {func} from "xxx" 只會(huì)把文件中的func導(dǎo)入，這樣勢(shì)必export會(huì)比export default打包的少。看例子

utils.js

const func1 = () => {
    console.log("func1");
}

const func2 = () => {
    console.log("func2");
}

export default {
    func1,
    func2
}

index.js

import { render } from "react-dom";
import common from "./common";

class Index extends Component {
  render() {
    common.func1();
    return (
      123456
    );
  }
}

render(, document.getElementById("app"));

用這種export default的方法那么打包的文件會(huì)是怎么樣的呢？我們看看

我們發(fā)現(xiàn)整個(gè)文件被打包了

用另一種方式
utils.js

const func1 = () => {
    console.log("func1");
}

const func2 = () => {
    console.log("func2");
}

export {
    func1,
    func2
}

index.js

import { render } from "react-dom";
import {func1} from "./common";

class Index extends Component {
  render() {
    func1();
    return (
      123456
    );
  }
}

render(, document.getElementById("app"));

結(jié)果：

只打包了func1

綜上export default確實(shí)可能會(huì)打包更多不需要的內(nèi)容，但是在某些場(chǎng)景用export default更好。
所以總結(jié)如下：

1.當(dāng)文件存放著很多方法，變量不同場(chǎng)景需要引用不同方法，請(qǐng)用export
2.當(dāng)類只有某幾個(gè)方法，并且每次引用都需要用到里面的大部分方法，請(qǐng)用export default，
  畢竟還有方法提示
3.當(dāng)值導(dǎo)出一個(gè)方法，類請(qǐng)用export default
4.如果一個(gè)文件只會(huì)被某一個(gè)其他文件的子文件，不會(huì)被其他文件引用，并且其中的方法都會(huì)被用到，
  考慮用export default。比如某個(gè)業(yè)務(wù)文件夾下的action.js，用的時(shí)候用import api from "./action";
  方便識(shí)別，不用重復(fù)在import的{}中添加，也可以用方法提示。
4.如果一個(gè)文件兼有以上需求 可以同時(shí)export和export default

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/102688.html

相關(guān)文章

  • 簡(jiǎn)述vue-router實(shí)現(xiàn)原理

    摘要：源碼解讀閱讀請(qǐng)關(guān)注下代碼注釋打個(gè)廣告哪位大佬教我下怎么排版啊，不會(huì)弄菜單二級(jí)導(dǎo)航撲通是什么首先，你會(huì)從源碼里面引入，然后再傳入?yún)?shù)實(shí)例化一個(gè)路由對(duì)象源碼基礎(chǔ)類源碼不選擇模式會(huì)默認(rèn)使用模式非瀏覽器環(huán)境默認(rèn)環(huán)境根據(jù)參數(shù)選擇三種模式的一種根據(jù)版 router源碼解讀 閱讀請(qǐng)關(guān)注下代碼注釋 打個(gè)廣告：哪位大佬教我下sf怎么排版啊，不會(huì)弄菜單二級(jí)導(dǎo)航（撲通.gif） showImg(https:...

    Cristalven 評(píng)論0 收藏0

  • 簡(jiǎn)述vue-router實(shí)現(xiàn)原理

    摘要：源碼解讀閱讀請(qǐng)關(guān)注下代碼注釋打個(gè)廣告哪位大佬教我下怎么排版啊，不會(huì)弄菜單二級(jí)導(dǎo)航撲通是什么首先，你會(huì)從源碼里面引入，然后再傳入?yún)?shù)實(shí)例化一個(gè)路由對(duì)象源碼基礎(chǔ)類源碼不選擇模式會(huì)默認(rèn)使用模式非瀏覽器環(huán)境默認(rèn)環(huán)境根據(jù)參數(shù)選擇三種模式的一種根據(jù)版 router源碼解讀 閱讀請(qǐng)關(guān)注下代碼注釋 打個(gè)廣告：哪位大佬教我下sf怎么排版啊，不會(huì)弄菜單二級(jí)導(dǎo)航（撲通.gif） showImg(https:...

    Ajian 評(píng)論0 收藏0

  • [譯]你并不知道Node

    摘要：?jiǎn)栴}什么是調(diào)用棧并且它是的一部分么調(diào)用棧當(dāng)然是的一部分。為什么理解是重要的因?yàn)槟阍诿總€(gè)進(jìn)程中只能獲取一個(gè)調(diào)用棧。它是一個(gè)從事件隊(duì)列中跳去事件的循環(huán)并且將它們的回調(diào)壓入到調(diào)用棧中。當(dāng)調(diào)用棧為空的時(shí)候，事件循環(huán)可以決定下一步執(zhí)行哪一個(gè)。 你并不知道Node 原文：You don’t know Node 譯者：neal1991 welcome to star my articles-tra...

    miqt 評(píng)論0 收藏0

  • ES6-7

    摘要：的翻譯文檔由的維護(hù)很多人說(shuō)，阮老師已經(jīng)有一本關(guān)于的書了入門，覺(jué)得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過(guò)程中，顯得越來(lái)越重要。為了讓編程更美好，我們就需要引入來(lái)降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書（中文版） 超詳細(xì)介紹promise的gitbook，看完再不會(huì)promise...... 本書的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<