JavaScript 模組化簡析
- 高洛峰原創
- 2017-02-04 16:24:581115瀏覽
前言
關於模組化，最直接的表現就是我們寫的 require 和 import 關鍵字，如果查閱相關資料，就一定會遇到 CommonJS 、CMD AMD 這些名詞，以及 RequireJS、SeaJS 等陌生框架。例如SeaJS 的官網這樣描述自己: 「簡單友善的模組定義規範，Sea.js 遵循CMD 規範。自然直覺的程式碼組織方式，依賴的自動載入…」
作為前端新手，我表示實在是一臉懵逼，理解不能。按照我一貫的風格，介紹一個東西之前總得解釋為什麼需要這個東西。
JavaScript 基礎
做客戶端的同學對 OC 的 #import "classname"、Swift 的 Module 以及檔案修飾符 和 Java 的 import package+class 模式應該都不陌生。我們習慣了引用一個檔案就是引用一個類別的模式。然而在JavaScript 這種動態語言中，事情又有一些變化，舉個例子說明:
Hello Wrold
// index.js
function onPress() {
var p = document.getElementById('hello');
p.innerHTML = 'Hello bestswifter';
]中的<script> 標籤可以理解為import，這樣按鈕的onclick 事件就可以呼叫定義在index.js 中的onPress 函數了。 <br/> 假設隨著專案的發展，我們發現點擊後的文字需要動態生成，並且由別的 JS 檔案生成，那麼簡單的 index.js 就無法勝任了。我們假設產生的內容定義在math.js 檔案中:<p>// math.js<p>function add(a, b) {return a + b;<p>}<br/><br/><br/> 依照客戶端的思維，此時的index. js 檔案應該這樣寫:<br/>// index.js<p>import "math.js" <p>function onPress() {<br/>var p = document.getElementById('hello');<br/>p.ininvar p = document.getElementById('hello');<br/>p.ininnerHTML = add(11, HTner );<br/>}<br/><br/><br/> 很不幸，JavaScript 並不支援import 這種寫法，也就是說在一個JS 檔案中根本無法引用別的JS 檔案中的方法。正確的解決方案是在index.js 中直接呼叫add 方法，同時在index.html 中引用math.js:<p><html><head><p><script type="text/javascript" src="index. js"></script>
Hello Wrold
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn