最近我打算把之前做項(xiàng)目寫的一些工具集成到一個(gè)js庫中，但是庫既要在普通環(huán)境正常運(yùn)行，又要在AMD環(huán)境下不暴露全局變量。一時(shí)間挺頭疼的。隨即我參考了一些現(xiàn)在流行的庫的源碼。學(xué)著寫了一下，感覺還不錯(cuò)。

既然要支持AMD，那么我們需要選擇一款A(yù)MD的模塊加載器，這里我使用requireJS。

至于庫我使用的是我最近寫的一個(gè)小工具庫 mTools， gitHub地址： ?https://github.com/grARM/mTools ?。那我們開始吧。

一、判斷環(huán)境

我要實(shí)現(xiàn)的效果是在一般環(huán)境暴露一個(gè)全局變量，在AMD下可作為模塊加載。既然要區(qū)別對待，就要先判斷出不同的環(huán)境。那么AMD環(huán)境有什么特點(diǎn)呢？

使用過requireJS的盆友，一定很熟悉define()，我們就是用define（）來定義一個(gè)模塊的,所以我們有了第一個(gè)條件：

typeof define === "function"

但是僅僅因?yàn)閐efine是個(gè)函數(shù)，是不是不夠嚴(yán)密呢，萬一我也定義了一個(gè)同名的全局函數(shù)怎么辦。我們創(chuàng)建一個(gè)requireJS的項(xiàng)目，在控制臺(tái)輸入 define.amd ?，控制臺(tái)會(huì)返回一個(gè)對象，其實(shí)他是define方法的一個(gè)屬性,查了一下requireJS的官網(wǎng)，發(fā)現(xiàn)這個(gè)屬性就是用來說明當(dāng)前的模塊加載器是AMD協(xié)議的，比如在我們的require工程中控制臺(tái)輸入define.cmd就會(huì)返回 ?undefined 也就是說我們得到了第二個(gè)判斷條件：

if ( typeof define === "function" && define.amd ){ }

?二、分別處理

我的工具模塊，可以理解為一個(gè)函數(shù)，這個(gè)函數(shù)的最后會(huì)把需要被外界訪問的部分屬性return 出去。那么被return的這個(gè)對象，就是普通模塊中暴露在全局的變量，同時(shí)他也是AMD中的模塊返回值。換句話說，我只要根據(jù)上面的條件處理返回值（或模塊函數(shù)）就實(shí)現(xiàn)了我們的目的。那么怎么處理呢？

對于一般環(huán)境，我們直接將模塊函數(shù)運(yùn)行后端的返回值賦值給一個(gè)window下的變量就可以了。

對于AMD環(huán)境下，剛才我們說過要用define來定義函數(shù)。所以對于這兩種情況我們可以這樣處理：

1 ;(function (factory){ 2 if ( typeof define === "function" && define.amd ) { 3 4 // AMD. Register as an anonymous module. 5 define(factory); 6 } else { 7 8 // Browser globals 9 // 以我的庫為例 返回mTools 10 window.mTools = factory(); 11 } 12 })(function(){ 13 我們的js庫 14 return { 15 //模塊返回值 16 } 17 18 });

注意，我們將js庫函數(shù)作為立即執(zhí)行函數(shù)的參數(shù)傳入我們的分析函數(shù)，即為factory（未執(zhí)行），如果AMD環(huán)境，就定義為AMD模塊；如果是一般環(huán)境，就直接運(yùn)行將返回值賦值給 ??window.mTools

隨即我測試了一下，確實(shí)在一般環(huán)境暴露一個(gè)全局變量，在AMD下可作為模塊加載（沒有暴露全局）。

?

轉(zhuǎn)載于:https://www.cnblogs.com/webARM/p/4795589.html

總結(jié)

以上是生活随笔為你收集整理的自己写js库，怎么支持AMD的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。