requireJs使用初探及模塊定義define函數的用法

時間 2019-11-08

標籤 requirejs 使用初探模塊定義 define 函數用法欄目 JavaScript 简体版

原文原文鏈接

requireJs使用實例

step1 定義一個html文件

咱們須要定義一個Html文件，文件命名爲requireHtml.html
文件內容下數組

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>

    <!--
    引入require文件，../指的是當前requireHtml.html文件所在目錄的上級目錄。在這裏也就是引用requireHtml.html文件所在目錄的上級目錄的lib文件夾下的require.js文件。
data-main屬性必須存在，它指定了主模塊文件。data-main屬性的值默認的後綴爲.js。在這裏也就是和requireHtml.html同一目錄等級下的main.js文件
    -->

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

step2 定義main.js文件的內容

main.js文件的內容：閉包

/*
能夠接受一個數組對象，裏邊以字符串的形式指定了模塊的路徑，一個模塊就是一個Js文件，像當前這樣指定，意味着showA.js文件和showB.js文件和main.js文件位於同一個目錄，
若是showB.js文件位於和main.js文件一個目錄的js文件下邊這裏的"showB"就要換成"lib/showB"。接下來require函數會按照這個數組的順序，異步加載對應的模塊。這個順序也是傳入回調函數的參數順序。
*/
require(["showA","showB"],function(showA,showB){
    showA.sA();
    showB.sB();
});

模塊的定義–define函數的用法

showA模塊的定義

define(function(){
    return ({
        sA:function(){
        console.log("showA");
    }
    });
});

showB模塊的定義

define(function(){
    return {
        sB:function(){
            console.log("showB");
        }
    }
});

按照AMD(asynchronous module define)異步模塊加載的規範咱們應使用define函數定義一個模塊。
define函數只接受一個函數的時候應返回一個對象，做爲模塊導出的對象。傳入的函數對象由於返回對象的屬性中會含有函數對象內的對象引用等而造成閉包。異步

若是咱們定義的模塊引用其餘模塊的要這樣寫async

//傳入的數組的每一個成員爲依賴的模塊的路徑
define([moduleA,moduleB,...],function(moduleA,moduleB){
});

注意：使用exports導出模塊會報錯。函數

使用requireJS的好處

1.解決頁面加載時，因加載腳本而致使頁面掛起的問題。
這個問題的產生是由於頁面加載腳本會暫停當前頁面的渲染去加載腳本，當腳本加載完以後，纔會繼續渲染頁面。當腳本比較大時就會形成由於加載腳本使頁面掛起致使頁面無響應的問題。
requireJS由於異步加載模塊從而避免了這個問題。
2.當頁面中多個js文件相互依賴時，使用script標籤引用時要注意文件的前後順序，即被依賴的文件應在前邊。require函數和define函數經過指定依賴的模塊和保證模塊加載完以後才調用回調函數解決了這個問題。requirejs

require.config的使用

咱們能夠在定義的main.js頭部調用require.config函數，接受一個選項對象配置引用模塊的路徑。
demo：ui

require.config({
    paths:{

        baseUrl:""      //指定基準url下邊引用模塊的url都相對與此url，可省略此鍵

        //傳入require函數數組參數的值做爲鍵值
        moduleA:""      //路徑。可使用本地的（../上一級目錄等用法都是能夠的），或另外一臺主機上的文件（cdn都是能夠的）
    }
});

//index.html文件裏引進來了index.js。index.js文件裏寫上以下的代碼。


       require.config({
    　　　　paths: {
    　　　　　　"Module": "module/complexModule"
    　　　　}
    　　});
       require(['Module'], function (Module){});

轉載: https://blog.csdn.net/dbTbest/article/details/78324275url