將requirejs進行到底（一）

時間 2019-11-11

原文原文鏈接

隨着網站功能逐漸豐富，網頁中的js也變得愈來愈複雜和臃腫，原有經過script標籤來導入一個個的js文件這種方式已經不能知足如今互聯網開發模式，咱們須要團隊協做、模塊複用、單元測試等等一系列複雜的需求。javascript

RequireJS是一個很是小巧的JavaScript模塊載入框架，是AMD規範最好的實現者之一。最新版本的RequireJS壓縮後只有14K，堪稱很是輕量。它還同時能夠和其餘的框架協同工做，使用RequireJS必將使您的前端代碼質量得以提高。html

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.java

大體意思：git

在瀏覽器中能夠做爲js文件的模塊加載器，也能夠用在Node和Rhino環境，balabala...。這段話描述了requirejs的基本功能"模塊化加載"，什麼是模塊化加載？咱們要從以後的篇幅中一一解釋github

先來看一段常見的場景，經過示例講解如何運用requirejs瀏覽器

正常編寫方式

index.html:框架

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

　　a.js:模塊化

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

fun1();

　　可能你更喜歡這樣寫requirejs

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

    fun1();
})()

第二種方法使用了塊做用域來申明function防止污染全局變量，本質仍是同樣的，當運行上面兩種例子時不知道你是否注意到，alert執行的時候，html內容是一片空白的，即<span>body</span>並未被顯示，當點擊肯定後，纔出現，這就是JS阻塞瀏覽器渲染致使的結果。

requirejs寫法

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

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js"></script>
        <script type="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具備以下優勢：

防止js加載阻塞頁面渲染
使用程序調用的方式加載js，防出現以下醜陋的場景

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

文章來源：https://github.com/liuxey/blog/issues/1

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。