1. 程式人生 > >深入理解ES6--用模組封裝程式碼

深入理解ES6--用模組封裝程式碼

用模組封裝程式碼

在模組頂部建立的變數不會自動被新增到全域性共享作用域(模組頂部this的值為undefined),必須匯出後,外部程式碼才可訪問。

瀏覽器中使用模組

<script>的type屬性缺失或者包含一個javascript內容型別(如,text/javascript)時作為指令碼載入;type屬性值為“module”時支援模組載入(如果瀏覽器不支援,會自動向後相容)。

<script type="text/javascript">
  var a = 'a';
</script>
<script type="module"
>
var b = 'b'; </script> <script> console.log(window.a); // a console.log(window.b); // undefined </script>

注意:type="module"會自動應用defer屬性。
也可將模組作為Worker載入,let worker = new Worker("module.js", {type: "module"})。Worker指令碼只能從引用的網頁相同的源載入;Worker模組不會完全受限(可以載入並訪問具有適當的跨域資源共享頭的檔案)

匯出

  • 匯出的函式和類宣告需要有一個名稱,除非用default關鍵詞,否則不能匯出匿名函式或類。同時需要注意匯出變數名或者函式名稱需要增加{}
const foo = 'bar';
export foo;   // Error Unexpected token, expected { 
export {foo}; // Correct
  • 匯入、匯出時可以進行重新命名
export { sum as add }
import { add as sum }
  • 一個模組只能設定一個預設匯出值

匯入

  • import必須包含匯入的識別符號和從哪個模組匯入。注意,匯入繫結的列表看起來與解構物件很相似,但其作用不一樣,其更像是使用const定義一樣。
import { identifier1, identifier2} from './example.js'
identifier1 = 1; // Error

為了相容更多瀏覽器和Node環境,匯入模組路徑之前要包含/、./、../來表示匯入的檔案

  • 匯入整個模組,然後所有匯出都可以作為物件(名稱空間)的屬性使用
import * as example from './example.js'
example.identifier1;
  • 不管在import語句中把一個模組寫了多少次,該模組只執行一次。匯入模組的程式碼執行後,例項化過的模組被儲存在記憶體中,其他import語句可以重複使用它。如果一個應用程式中的其他模組也對同一模組匯入,那麼這些模組使用相同的匯入例項,這就是util.js中new Vue()全域性通用的原因(在Vue專案中文名經常會藉助此實現兄弟元件傳值)!
import { identifier1 } from './example.js'
import { identifier2 } from './example.js'

上述example只被載入一次!

/*person.js*/
var name = 'ligang'
function setName(newName) {
  name = newName;
}
export {setName, name};
<!--person1.vue-->
<template>
  <div>
    <p>{{name}}</p>
    <button @click="setName">設定名稱</button>
  </div>
</template>
<script>
  import {name, setName} from './person.js'
  export default {
    data() {
      return {
        name: name
      }
    },
    methods: {
      setName() {
        // name = 'lg';
        setName('lg')
      }
    }
  }
</script>
<!--person2.vue-->
<template>
  <div>
    <p>{{name}}</p>
  </div>
</template>
<script>
  import {name} from './person.js'
  export default {
    data() {
      return {
        name: name
      }
    }
  }
</script>

person1.vue中點選“設定名稱”按鈕,切換到person2.vue,name名稱會變為‘lg’!注意,不能在person1.vue中直接修改name,因為import語句為變數、函式和類建立的是隻讀繫結,而不是像正常變數一樣簡單地引用原始繫結!

  • import語句中預設值必須放到非預設值前面
import sum, {color} from './example.js'

上述,sum為預設值,color為非預設值

  • 無繫結匯入,只執行程式碼,常用於建立polyfill和shim
import './example.js'