菜鳥requireJS教程---一、初識requirejs

時間 2020-06-09

標籤菜鳥 requirejs 教程欄目 JavaScript 简体版

原文原文鏈接

菜鳥requireJS教程---一、初識requirejs

1、總結

一句話總結：

Using a modular script loader like RequireJS will improve the speed and quality of your code.

一、requirejs優勢？

一、防止js加載阻塞頁面渲染

二、使用程序調用的方式加載js，防出現要寫不少要加載js的場景

二、JS阻塞瀏覽器渲染實例？

|||-beginjavascript

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(); 可能你更喜歡這樣寫 (function(){ function fun1(){ alert("it works"); } fun1(); })() 第二種方法使用了塊做用域來申明function防止污染全局變量，本質仍是同樣的

|||-endhtml

alert執行的時候，html內容是一片空白的，即<span>body</span>並未被顯示，當點擊肯定後，纔出現

2、初識requirejs

轉自或參考：JS模塊化工具requirejs教程(一)：初識requirejs | 菜鳥教程
https://www.runoob.com/w3cnote/requirejs-tutorial-1.html前端

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

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

requirejs能帶來什麼好處

官方對requirejs的描述：github

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> <script type="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> <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>