JS 實現完美include

2021-09-20 14:49:58 字數 2848 閱讀 7210

js為什麼需要include?讓我們想想這樣1個場景,a.js 需要用到1個公用的common.js,當然你可以在用到a.js的頁面使用")  

或者    

var s = document.createelement("script");    

s.src = ...;    

head.insertafter(s,...);    

document.write 輸出的指令碼會在a.js後面載入,而createelement("script")建立的指令碼是非阻塞載入。  所以如果在common.js載入完畢之前,a.js中呼叫了common.js的函式就會報錯。

實現

解決上面2個問題,就可以實現js include。  

第1個問題,我的方法是先獲取到a.js在html中的絕對路徑(如果是相對路徑,就轉為絕對路徑),然後再把common.js的路徑轉為絕對路徑。  

第2個問題,採用同步的ajax來請求common.js,這樣就不會出現引用問題。

實現**如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

// 根據相對路徑獲取絕對路徑

functiongetpath(relativepath,absolutepath)

returnabsolutepath.substr(0,lastindex+1) + relativepath.replace(reg,"");

}

functioninclude(jssrc)

src = getpath(src,url);

}

varjssrcs = jssrc.split("|");// 可以include多個js,用|隔開

for(vari=0;i// 使用juqery的同步ajax載入js.

// 使用document.write 動態新增的js會在當前js的後面,可能會有js引用問題

$.ajax();

}

}

在a.js中直接使用 include("../js/common.js");

多請求的問題

使用上面的include看上去挺爽的,不過卻帶來另外1個嚴重的問題,就是多傳送了1個ajax的請求。

我們常常為了web效能,而合併js,減少請求。但使用include後卻偏偏多了請求。如果這個問題不解決,相信很多人都不會在正式產品中使用include的了,除非是區域網產品。

如何解決這個多請求的問題,我也思考很久,最後覺的單單使用客戶端js是沒辦法解決了。所以就想到了使用服務端**來解決

還記的我之前有文章介紹 "js、css的合併、壓縮、快取管理"的時候,就通過伺服器端**在程式啟動時候去合併js。

所以我把include多請求的解決方案也加到裡面去。就是在程式啟動的時候去查詢所有的js,發現有使用include的就把include中common.js的源**替換該include函式。這樣a.js中在執行的時候就沒有include函式,而是真真包含了common.js的內容的js檔案

後語

丫的。說到最後,怎麼又把所有的include都替換掉了,哪之前說的那麼多不白說了。

個人覺得,每個產品都應該要區分開發環境和產品環境(一般通過配置檔案進行區分),在開發環境應該以開發效率為首要,而產品環境則以效能為首。所以這裡的inlcude就應該要區分對待,在開發環境中使用js include來提高開發和維護效率,而在產品環境中則自動把所有include替換成真真的js檔案的內容。

JS完美實現物件轉殖

我們知道,在js中,當object作為引數傳遞到函式中進行處理後,實際上是修改了傳入的物件本身 或者說是物件的引用 但很多時候我們並不希望函式去修改我們的這些物件引數,這就需要使用到物件的轉殖,我們應該對該物件做乙個轉殖,然後操作這個轉殖的物件,這樣就不會影響我們的原物件了。不過在js中並沒有物件轉...

完美運動框架(原生js實現)

匯入js檔案,呼叫函式即可用 這個運動框架,支援多物體多樣式的鏈式運動,和多物體多樣式的同時運動 做的是緩衝運動 function startmove obj,json,fn else 4 設定緩衝運動速度 speed json attr currentvalue 8 5 處理速度,讓它始終為乙個整...

js完美運動框架

建立move.js運動框架function getstyle obj,name else 任意值的運動框架 var timer null function startmove obj,json,fnend else 計算速度 var speed json attr cur 6 speed speed...