2025-03-14-Leaflet 的L在那裡被宣告

---

✅ L 是在哪裡被宣告的？

L 是在你用的這一行裡被「宣告並定義為全域變數」的：

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

---

🔍 解釋：「這行 script 裡面做了什麼？」

你看不到它的原始碼，但其實這支 CDN 的 leaflet.js 做了類似這樣的事：

// leaflet.js 裡的開頭（簡化示意）
(function(global) {
  var L = {}; // 🟢 宣告變數 L

  // 加入很多功能：
  L.map = function (...) { ... }
  L.marker = function (...) { ... }
  L.tileLayer = function (...) { ... }
  L.icon = function (...) { ... }
  // 等等...

  // 最後把 L 掛到全域變數上（在瀏覽器就是 window）
  global.L = L;
})(this); // this 指的是 window

所以當這個 <script> 被執行之後，就會自動讓你在程式碼裡用 L：

console.log(L.map) // ✅ 成功顯示 Leaflet 的函式

---

🔵 小結：

問題	答案
L 是誰宣告的？	Leaflet 的原始碼自己宣告的。
哪一行讓它出現的？	<script src="...leaflet.js">
為什麼我們可以直接用 L？	因為 Leaflet 把它掛在了全域變數 window 上（即 window.L = L）
這是不是 Vue 提供的？	❌ 不是。Vue 完全不知道 L 是什麼，這是 Leaflet 自己註冊的變數。

---

💡 額外補充：怎麼知道一個變數是不是全域的？

你可以這樣試：

console.log(window.L);  // ✅ 有的話就是全域變數
console.log(typeof L);  // 應該會印出 'object'

---

如果你日後改用 npm 安裝 Leaflet，而不是用 CDN，就不能直接用 L，而要這樣寫：

import L from 'leaflet'

這是模組化（module）的寫法。

---

如果你有興趣，我也可以：

• 解釋 Leaflet 整個架構是怎麼設計的（plugin, layer, pane, control）
• 教你怎麼把 L 包裝成 Vue plugin 用法

是否想深入哪個方向？🌱

這個問題問得超關鍵，代表你正在從「使用者」變成「開發者」思維了 💪
來，我會教你三種方法去確認某個 CDN 或第三方庫到底定義了哪些全域變數，而不是「只靠記憶」或「去看文件」。

---

✅ 方法 1：開發者工具 → Sources → 搜尋全域註冊

步驟：

1. 打開你的網頁（已載入 Leaflet CDN）

2. 開啟瀏覽器 DevTools（Chrome: F12 / 右鍵檢查）

3. 點選 Sources

4. 找到 Leaflet 來源檔（通常是：
   https://unpkg.com/leaflet@.../leaflet.js）

5. 按下 Ctrl+F 搜尋：

   window.

   或

   global.

6. 你會看到類似這段：

   global.L = L;

✅ 結論：這支 library **自己註冊了全域變數 L**。

---

✅ 方法 2：載入前後比較 window 上多了什麼變數

這是黑科技觀察法（超好用）！

操作方式：

打開瀏覽器 Console，貼入下面這段程式碼：

// 載入 Leaflet 前：
const before = Object.keys(window);

// 人工或程式加載 Leaflet
await new Promise((resolve) => {
  const script = document.createElement('script');
  script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
  script.onload = resolve;
  document.body.appendChild(script);
});

// 載入 Leaflet 後：
const after = Object.keys(window);

// 比較差異
const diff = after.filter(k => !before.includes(k));
console.log('新增的全域變數：', diff);

👉 執行完會印出：

新增的全域變數：['L']

✅ 結論：Leaflet 載入後確實在 window 上增加了 L。

---

✅ 方法 3：看官方文件或 CDN 網站說明

Leaflet 官方網站也會寫清楚：「用法是 L.map(...)」：

• Leaflet 官網：https://leafletjs.com

• Quick Start 教學會出現：

  var map = L.map('map')

這也是一種印證，但比起實際驗證更偏向參考。

---

🧠 延伸思考：為什麼很多 JS library 都用單字母當全域變數？

因為：

• 不想污染太多變數
• 容易記（像：L for Leaflet，$ for jQuery, _ for Lodash）
• 舊時代的習慣（模組化還沒普及）

---

✅ 小結

方法	說明
🔍 Sources 搜尋	最直接看原始碼是否有 window.L = ...
🔬 載入前後比對 window	超準！可以找出所有新增的變數
📚 官方文件	快速查閱用法，但不能保證真實載入成功

---