如何使用require讀取模組化的JavaScript文件

require通常是用來讀取模組化的JavaScript檔案的，本篇文章我們將來會為大家介紹關於使用require讀取模組化的JavaScript檔案的內容。

通常，在閱讀JavaScript程式時，我們使用script標籤來描述HTML，但是，如果在伺服器端單獨執行JavaScript，例如Node.js，則無法使用腳本標記。因此，可以採用了一種模組化JavaScript檔案從中讀取並執行它的方法。

我們先來看看require的基本用法

Node.js中的require是針對npm讀入的模組在JavaScript端能利用的方法。

var 变量 = require( 模块名称 );

在上面的程式碼中，我們只需指定要載入的模組的名稱作為require參數。

由於載入的模組儲存在指定的變數中，因此它類似於建立通用JavaScript實例。

這樣就可以在不使用script標籤的情況下單獨使用JavaScript來讀取和使用模組（函式庫）。

我們來看如何載入模組？

看下面的範例

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

在這個範例中，可以看到gulp被指定為要在require參數中讀取的模組名稱。

有了這個，你可以在JavaScript端使用gulp，之後可以寫你想要自動化的任務行程。

如何使用RequireJS?

使用RequireJS讀取JavaScript檔案

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

#隨著JavaScript檔案被拆分並且數量增加，僅使用script標籤進行管理會變得困難。

但是，前端（瀏覽器）並沒有提供像Node.js一樣的使用require檔。

因此，可以使用名為RequireJS的函式庫。

這使我們能夠透過前端的require來實現檔案的載入。

但是，由於語法（寫入）略有不同，請仔細檢查以下範例！

require(加载的文件名,函数处理)

有一點不同的是，在require 的第一個參數中指定要讀取的JavaScript檔案；可以指定為數組，因此它甚至可以支援多個檔案讀取。

之後，我們根據第二個參數的函數處理中讀取的檔案來編寫JavaScript程式碼。

如何使用RequireJS載入JS檔案

使用RequireJS加載，有必要在define()中描述原始JavaScript檔案的程式碼。

例如，建立一個叫sample.js的檔案並如下編寫。

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

這是一個簡單的函數，可以實現任意數的平方。

透過在define（）中描述此過程並使用「return」返回它來完成。

接下來，使用require 讀取sample.js，如下。

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

執行結果

100

可以看到透過將「sample」作為檔案名稱設為require的第一個參數並在函數中傳回square來設定。

透過寫 num（10），可以使用「sample.js」中定義的函數。

查看執行結果，可以看到已獲得平方值！

以上是如何使用require讀取模組化的JavaScript文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！