1. 程式人生 > >require js(一)

require js(一)

RequireJS是一個非常小巧的JavaScript模組載入框架,是AMD規範最好的實現者之一。最新版本的RequireJS壓縮後只有14K,堪稱非常輕量。它還同時可以和其他的框架協同工作,使用RequireJS必將使您的前端程式碼質量得以提升。

requirejs能帶來什麼好處

官方對requirejs的描述:

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

大致意思:

在瀏覽器中可以作為js檔案的模組載入器,也可以用在Node和Rhino環境,balabala...。這段話描述了requirejs的基本功能"模組化載入",什麼是模組化載入?我們要從之後的篇幅中一一解釋

先來看一段常見的場景,通過示例講解如何運用requirejs

正常編寫方式

index.html:

<!DOCTYPE html><html><head><scripttype="text/javascript"src="a.js"></script></head><body><span>
body</span></body></html>

a.js:

function fun1(){
  alert("it works");}

fun1();

可能你更喜歡這樣寫

(function(){function fun1(){
      alert("it works");}

    fun1();})()

第二種方法使用了塊作用域來申明function防止汙染全域性變數,本質還是一樣的,當執行上面兩種例子時不知道你是否注意到,alert執行的時候,html內容是一片空白的,即<span>body</span>並未被顯示,當點選確定後,才出現,這就是JS阻塞瀏覽器渲染

導致的結果。

requirejs寫法

當然首先要到requirejs的網站去下載js -> requirejs.org
index.html:

<!DOCTYPE html><html><head><scripttype="text/javascript"src="require.js"></script><scripttype="text/javascript">
            require(["a"]);</script></head><body><span>body</span></body></html>

a.js:

define(function(){function fun1(){
      alert("it works");}

    fun1();})

瀏覽器提示了"it works",說明執行正確,但是有一點不一樣,這次瀏覽器並不是一片空白,body已經出現在頁面中,目前為止可以知道requirejs具有如下優點:

  1. 防止js載入阻塞頁面渲染
  2. 使用程式呼叫的方式載入js,防出現如下醜陋的場景
<scripttype="text/javascript"src="a.js"></script><scripttype="text/javascript"src="b.js"></script><scripttype="text/javascript"src="c.js"></script><scripttype="text/javascript"src="d.js"></script><scripttype="text/javascript"src="e.js"></script><scripttype="text/javascript"src="f.js"></script><scripttype="text/javascript"src="g.js"></script><scripttype="text/javascript"src="h.js"></script><scripttype="text/javascript"src="i.js"></script>

<scripttype="text/javascript"src="j.js"></script>

https://github.com/liuxey/blog/issues/1