require是什麼？能作什麼

時間 2019-11-09

標籤 require 什麼简体版

原文原文鏈接

原本是作後端的，拿到一個偏前端的項目，js文件裏好多define和require，看的有點蒙，只能本身動手查找資源了，瞭解這究竟是個什麼，它能作什麼？javascript

1.什麼是require.js?css

1)：require.js是一個js腳本加載器，它遵循AMD(Asynchronous Module Definition)規範，實現js腳本的異步加載，不阻塞頁面的渲染和其後的腳本的執行，並提供了在加載完成以後的執行相應回調函數的功能；html

2)：require.js要求js腳本必需要實現模塊化，即文件化；而require.js的做用之一就是加載js模塊，也就是js文件。前端

3)：require.js能夠管理js模塊/文件之間的依賴;即不一樣的框架例如Jquery，AngularJs等採用了不一樣的語法，而使用這些語法的js文件在導入時必須排在Jquery.js或Angular.js以後才能順利執行，require.js則可以解決排序依賴問題。java

4) : RequireJS 是一個JavaScript模塊加載器。它很是適合在瀏覽器中使用，但它也能夠用在其餘腳本環境，就像 Rhino and Node。使用RequireJS加載模塊化腳本將提升代碼的加載速度和質量。jquery

2.爲何要使用require.js？後端

<!DOCTYPE html>

<html>

<head>

<script type= "text/javascript" src= "a.js" ></script>

</head>

<body>

<span>Hellow World</span>

</body>

</html>

以上代碼，會先加載head中引入的js文件及js文件中的腳本函數，再渲染body中的內容

這就是JS阻塞瀏覽器渲染致使的結果。加載文件越多，網頁失去響應的時間就會越長。

因爲js文件之間存在依賴關係，所以必須嚴格保證加載順序，依賴性最大的模塊必定要放到最後加載，當依賴關係很複雜的時候，代碼的編寫和維護都會變得困難。

require.js的誕生就是爲了解決上面所說的兩個問題：數組

1）.實現js文件的異步加載，避免網頁失去響應；瀏覽器

2）.管理模塊之間的依賴性，便於代碼的編寫和維護。服務器

三、require.js的使用-加載

官方網址：http://requirejs.org/docs/download.html

<script src="js/require.js"></script>

這裏可能會遇到一個問題：加載這個文件，也可能形成網頁失去響應，這個問題的解決辦法有兩種：

1）<script src="js/require.js" defer async="true" ></script>

async屬性和defer屬性代表這個文件須要異步加載，避免網頁失去響應。IE只支持defer屬性，而不支持async屬性。

2）將文件放到網頁底部加載，加載完require.js以後，咱們就能夠加載本身的代碼了，假設咱們本身的js文件命名爲main.js，一樣放於js文件夾下

<script src="js/require.js" data-main="js/main"></script>

data-main屬性的做用是指定網頁程序的主模塊。即js目錄下面的main.js，這個文件會第一個被require.js加載。因爲require.js默認的文件後綴名是js，因此能夠省略掉".js"簡寫成main

4.require.js的使用-API

3步中引入了main.js文件，main.js的寫法

define( function (){

function fun1(){

alert( "main.js已生效" );

}

fun1();

})

經過define函數定義了一個模塊，而後在頁面中經過require()函數使用：

require([ "js/main" ]);

通常狀況下，它會依賴於其餘的js框架，好比jquery等等

 
   require([ 
   'jquery' 
   ,  
   'B' 
   ,  
   'C' 
   ],  
   function 
   (A, B, C){ 
  
   // js代碼 
  
   }); 
  
require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的框架，上例就是['A', 'B', 'C']，即main.js裏的代碼須要用到這三個模塊；第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊。
require()會異步加載A,B,C三個模塊，瀏覽器不會失去響應；它指定的回調函數，只有前面的模塊都加載成功後，纔會運行，解決了依賴性的問題。
require.js會先加載jQuery，而後再運行回調函數。main.js的代碼就寫在回調函數中。注意：require中的依賴是一個數組，即便只有一個依賴，你也必須使用數組來定義。
 
五、加載文件
main.js的依賴模塊是['jquery']。默認狀況下，require.js會假定這個模塊與main.js在同一個目錄，文件名是 jquery.js，而後自動加載，除此以外，咱們能夠經過require.config()方法，咱們能夠對模塊的加載行爲進行自定義，require.config()就寫在main.js的頭部，它的參數是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。
 
    require.config({ 
   
    　　　　paths: { 
   
    "jquery" 
    :  
    "jquery.min" 
    , 
   
    "anjular" 
    :  
    "anjular.min" 
   
    　　　　} 
   
    　　}); 
   
     上述模塊路徑默認與main.js在同一個目錄（js子目錄）。若是這些模塊在其餘目錄，好比js/lib目錄，則有兩種寫法。一種是逐一指定路徑： 
   
     require.config({ 
    
     　　　　paths: { 
    
     "jquery" 
     :  
     "lib/jquery.min" 
     , 
    
     "anjular" 
     :  
     "lib/anjular.min" 
    
     　　　　} 
    
     　　}); 
    
      或直接改變根目錄（baseUrl）的寫法： 
    
      require.config({ 
     
      　　　　baseUrl:  
      "js/lib" 
      , 
     
      　　　　paths: { 
     
      "jquery" 
      :  
      "jquery.min" 
      , 
     
      "anjular" 
      :  
      "anjular.min" 
     
      　　　　} 
     
      　　}); 
     
       以前的例子中加載模塊都是本地js，可是大部分狀況下網頁須要加載的JS可能來自本地服務器、其餘網站或CDN，這樣就不能經過這種方式來加載了，咱們以加載一個jquery庫爲例： 
     
       require.config({ 
      
       paths : { 
      
       "jquery" 
       : [ 
       "http://libs.baidu.com/jquery/2.0.3/jquery" 
       ]  
      
       } 
      
       }) 
      
        上面的例子中重複出現了require.config配置，若是每一個頁面中都加入配置，必然會十分麻煩，requirejs提供了一種叫"主數據"的功能，咱們能夠將全部的require.config配置放到main.js中，在頁面中調用它， 
      
       <script data-main= 
       "js/main" 
       src= 
       "js/require.js" 
       ></script> 
      
        六、 
       AMD模塊的寫法require.js加載的模塊，採用AMD規範，也就是說，模塊必須按照AMD的規定來寫。具體來講，就是模塊必須採用特定的define()函數來定義。若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數之中。假定如今有一個math.js文件，它定義了一個math模塊。那麼，math.js就要這樣定義：
 
        define( 
        function 
        (){ 
       
        var 
        add =  
        function 
        (x,y){ 
       
        return 
        x+y; 
       
        　　　　}; 
       
        return 
        { 
       
        　　　　　　add: add 
       
        　　　　}; 
       
        　　}); 
       
         而後在頁面中要這樣用： 
       
         require([ 
         'math' 
         ],  
         function 
         (math){ 
        
         　　alert(math.add(1,1)); 
        
         }); 
        
          若是這個js文件還依賴其餘模塊，那麼define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。 
        
          define([ 
          'jquery' 
          ],  
          function 
          ($){ 
         
          $( 
          "#div1" 
          ).css( 
          "background-color" 
          , 
          "red" 
          ); 
         
          })

相關標籤/搜索

每日一句

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