JavaScript Weird Part（21） - 框架裡運用 || 避免全域命名空間的衝突

2019-05-04 PV:

有時候我們會同時在專案匯入好幾個框架，這樣的一行程式碼，檢查的是全域命名空間（globe namespace) 看是否有重複的東西，所以它不會造成衝突，或覆蓋它。

舉例來說在 lib1.js 設定一個變數，接著在 lib2.js 設定一個同樣名稱的變數

<body>
  <script src="lib1.js"></script>
  <script src="lib2.js"></script>
  <script src="lib3.js"></script>
</body>

1 2	//lib1.js var libraryName = "lib1";

1 2	//lib2.js var libraryName = "lib1";

當我們回到控制台查詢的的時候，這時三個 script 標籤並不會創造新的執行環境，而是直接把程式碼堆在對方上面，然後執行所有的 JavaScript 檔案，好像它們是在同一個檔案裡，在產生檔案的時候，會結合和最小化 JavaScript 程式成為一個檔案，所以讓這三個檔案不互相衝突很重要。

lib1 和 lib2 都被當成是全域執行環境裡的全域變數，所以宣告 libraryName 在瀏覽器裡會連結到 window 物件，第二個變數則會取代它。可能我們因此不小心讓框架相互衝突了。
所以我們可以回到 lib2 檢查 libraryName` 是否已經在全域執行環境、全域變數裡面。

1	window.libraryName = window.libraryName \|\| "lib2";

如果在框架的原始碼裡看到這樣一行程式碼，這是在定義框架的物件或函數，此處在檢查是否已經有一個框架已經在全域執行環境裡有一個在 window 上的全域變數，如果有，就不做任何事情。如果沒有就用 || 運算子設定預設值，因為如果沒有被任何人設值，就會變成 undefined。這樣如果那個名稱已經存在，也不會影響到其它東西。