使用require讀取模塊化JavaScript文件的方法

使用require讀取模塊化JavaScript文件的方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

require通常是用于讀取模塊化的JavaScript文件的。

通常，在閱讀JavaScript程序時(shí)，我們使用script標(biāo)簽來(lái)描述HTML，但是，如果在服務(wù)器端單獨(dú)運(yùn)行JavaScript，例如Node.js，則無(wú)法使用腳本標(biāo)記。因此，可以采用了一種模塊化JavaScript文件從中讀取并執(zhí)行它的方法。

我們先來(lái)看一下require的基本用法

Node.js中的require是針對(duì)npm讀入的模塊在JavaScript端能利用的方法。

var 變量 = require( 模塊名稱(chēng) );

在上面的代碼中，我們只需指定要加載的模塊的名稱(chēng)作為require參數(shù)。

由于加載的模塊存儲(chǔ)在指定的變量中，因此它類(lèi)似于創(chuàng)建通用JavaScript實(shí)例。

這樣就可以在不使用script標(biāo)簽的情況下單獨(dú)使用JavaScript來(lái)讀取和使用模塊（庫(kù)）。

我們來(lái)看如何加載模塊？

看下面的例子

var gulp = require('gulp');
gulp.task('clean', function() {
    //在此描述gulp的處理
});

在此示例中，可以看到gulp被指定為要在require參數(shù)中讀取的模塊名稱(chēng)。

有了這個(gè)，你可以在JavaScript端使用gulp，之后可以編寫(xiě)你想要自動(dòng)化的任務(wù)進(jìn)程。

如何使用RequireJS?

使用RequireJS讀取JavaScript文件

前端瀏覽器上使用Require的方法

隨著JavaScript文件被拆分并且數(shù)量增加，僅使用script標(biāo)簽進(jìn)行管理會(huì)變得困難。

但是，前端（瀏覽器）不提供像Node.js一樣的使用require文件。

因此，可以使用名為RequireJS的庫(kù)。

這使我們能夠通過(guò)前端的require來(lái)實(shí)現(xiàn)文件的加載。

但是，由于語(yǔ)法（寫(xiě)入）略有不同，請(qǐng)仔細(xì)檢查以下示例！

require(加載的文件名,函數(shù)處理)

有一點(diǎn)不同的是，在require 的第一個(gè)參數(shù)中指定要讀取的JavaScript文件；可以指定為數(shù)組，因此它甚至可以支持多個(gè)文件讀取。

之后，我們根據(jù)第二個(gè)參數(shù)的函數(shù)處理中讀取的文件編寫(xiě)JavaScript代碼。

如何使用RequireJS加載JS文件

使用RequireJS加載，有必要在define()中描述原始JavaScript文件的代碼。

例如，創(chuàng)建一個(gè)叫sample.js的文件并按如下方式編寫(xiě)。

define(function() {
    return function(num) {
 
        return num * num;
 
    };
});

這是一個(gè)簡(jiǎn)單的函數(shù)，可以實(shí)現(xiàn)任意數(shù)的平方。

通過(guò)在define（）中描述此過(guò)程并使用“return”返回它來(lái)完成。

接下來(lái)，使用require 讀取sample.js，如下。

require(['sample'], function(num) {
 
  var result = num(10);
  
  console.log(result);
 
});

執(zhí)行結(jié)果

100

可以看到通過(guò)將“sample”作為文件名設(shè)置為require的第一個(gè)參數(shù)并在函數(shù)中返回square來(lái)設(shè)置。

通過(guò)寫(xiě) num（10），可以使用“sample.js”中定義的函數(shù)。

查看執(zhí)行結(jié)果，可以看到已獲得平方值！

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)使用require讀取模塊化JavaScript文件的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。