免費(fèi)AI編程助手
Sea.js 是什么？
Sea.js是什么？
起初被看作是一門玩具語言的JavaScript，最近已經(jīng)發(fā)生了很大的變化。變化之一就是從HTML中的<script>標(biāo)簽轉(zhuǎn)向了模塊化。
模塊化
模塊就是一團(tuán)黑乎乎的東西，有份文檔會(huì)教你如何使用這團(tuán)東西，你只知道它的接口，但不知道它內(nèi)部是如何運(yùn)作的，但這個(gè)模塊能滿足你的需求。
過程、函數(shù)、類都可以稱作為模塊，它們有一個(gè)共同的特點(diǎn)就是封裝了功能，供外界調(diào)用。對(duì)于特定的語言，模塊所指的東西各有不同。
在Python中，
模塊基本上就是一個(gè)包含了所有你定義的函數(shù)和變量的文件。
我們來定義一個(gè)Python的模塊：
#!/usr/bin/env python
# Filename: greet.py
def hello_python():
print "Hello,Python"
def hello_javascript():
print "Hello,JavaScript"真的，就是這么簡單，我們可以這樣使用：
#!/usr/bin/env python
# Filename: use_greet.py
import greet
# call greet module's func
# print "Hello,Python"
greet.hello_python()greet.py的模塊中有兩個(gè)方法，把它們import到use_greet.py中，我們就可以使用了。Python還提供了另外一種引入模塊的方法：
#!/usr/bin/env python
# Filename: use_greet.py
from greet import hello_python
# call greet module's func
# print "Hello,Python"
hello_python()可以引入模塊特定的API。
JavaScript的模塊化
那JavaScript有模塊化嗎？我想說有，而且是與它一樣的，看下面的例子：
<!DOCTYPE html>
<!--index.html-->
<script src="http://atts.w3cschool.cn/attachments/image/wk/helloseajs/greet.js"></script>
<script src="http://atts.w3cschool.cn/attachments/image/wk/helloseajs/usegreet.js"></script>在瀏覽器中打開index.html：
Hello,JavaScript
可以看到，JavaScript這種通過全局共享的方式確實(shí)可以實(shí)現(xiàn)模塊化，你只需要在HTML中引入需要使用的模塊腳本即可。
但這樣的模塊化有兩個(gè)很實(shí)在的問題：
- 必須通過全局變量共享模塊，有可能會(huì)出現(xiàn)命名沖突的問題；
- 依賴的文件必須手動(dòng)地使用標(biāo)簽引入到頁面中。
Node.js的模塊化
這些問題如何解決呢？我們要不再來看一下Node.js的模塊。你應(yīng)該知道Node.js，現(xiàn)在它是火得不行！
// File:greet.js
exports.helloPython = function() {
console.log("Hello,Python");
}
exports.helloJavaScript = function() {
console.log("Hello,JavaScript");
}
// File: usegreet.js
var greet = require("./greet");
greet.helloJavaScript();運(yùn)行node usegreet.js，控制臺(tái)會(huì)打印：
Hello,JavaScript
Node.js 把 JavaScript 移植到了 Server 端的開發(fā)中，Node.js 通過 exports 和 require 來實(shí)現(xiàn)了代碼的模塊化組織。在一個(gè) Node.js 的模塊文件中，我們可以使用 exports 把對(duì)外的接口暴露出來，其他模塊可以使用require函數(shù)加載其他文件，獲得這些接口，從而使用模塊提供出來的功能，而不關(guān)心其實(shí)現(xiàn)。在npmjs.org上已經(jīng)有上萬的Node.js開源模塊了！
ECMA 標(biāo)準(zhǔn)草案
Node.js 模塊化的組織方案是 Server 端的實(shí)現(xiàn)，并不能直接在瀏覽器中使用。JavaScript 原生并沒有支持exports和require關(guān)鍵字。ECMAScript6 標(biāo)準(zhǔn)草案 harmony 已經(jīng)考慮到了這種模塊化的需求。舉個(gè)例子：
// Define a module
module 'greet' {
export function helloPython() {
console.log("Hello,Python")
}
export function helloJavaScript() {
console.log("Hello,JavaScript")
}
}
// Use module
import {helloPython, helloJavaScript} from 'greet'
helloJavaScript()
// Or
module Greet from 'greet'
Greet.helloJavaScript()
// Or remote module
module Greet from 'http://bodule.org/greet.js'
Greet.helloJavaScript()可以到這里查看更多的例子。
參考es6-module-loader這個(gè)項(xiàng)目。
不過該標(biāo)準(zhǔn)還處于草案階段，沒有主流的瀏覽器所支持，那我們該怎么辦？恩，已經(jīng)有一些先行者了。
LABjs
LABjs是一個(gè)動(dòng)態(tài)的腳本加載類庫，替代難看的，低性能的<script>標(biāo)簽。該類庫可以并行地加載多個(gè)腳本，可按照需求順序執(zhí)行依賴的代碼，這樣在保證依賴的同時(shí)大大提高的腳本的加載速度。
LABjs 已經(jīng)三歲了，其作者 getify 聲稱，由于社區(qū)里大家更喜歡使用 AMD 模式，隨在 2012 年 7 月 25 號(hào)停止對(duì)該類庫的更新。但 LABjs 絕對(duì)是 JavaScript 在瀏覽器端模塊化的鼻祖，在腳本加載方面做了大量的工作。
requirejs
與 LABjs 不同的地方在于，RequireJS 是一個(gè)動(dòng)態(tài)的模塊加載器。其作者 James Burke 曾是 Dojo 核心庫 loader 和 build system 的開發(fā)者。2009 年隨著 JavaScript 代碼加載之需要，在 Dojo XDloader 的開發(fā)經(jīng)驗(yàn)基礎(chǔ)之上，它開始了新項(xiàng)目RunJS。后更名為RequireJS，在AMD模塊提案指定方面，他起到了重要的作用。James從XDloader到RunJS 再到RequireJS一直在思考著該如何實(shí)現(xiàn)一個(gè)module wrapper，讓更多的js、更多的node模塊等等可以在瀏覽器環(huán)境中無痛使用。
seajs
seajs 相對(duì)于前兩者就比較年輕，2010 年玉伯發(fā)起了這個(gè)開源項(xiàng)目，SeaJS 遵循 CMD 規(guī)范，與 RequireJS 類似，同樣做為模塊加載器。那我們?nèi)绾问褂?seajs 來封裝剛才的示例呢？
// File:greet.js
define(function (require, exports) {
function helloPython() {
document.write("Hello,Python");
}
function helloJavaScript() {
document.write("Hello,JavaScript");
}
exports.helloPython = helloPython;
exports.helloJavaScript = helloJavaScript;
});
// File:usegreet.js
sea.use("greet", function (Greet) {
greet.helloJavaScript();
});
更多建議：