require.js是一個js腳本加載器（模塊化加載），它遵循AMD(Asynchronous Module Definition)規范，實作js腳本的異步加載，不阻塞頁面的渲染和其后的腳本的執行，并提供了在加載完成之后的執行相應回呼函式的功能，官網下載地址：https://requirejs.org/docs/download.html
廢話不多說，我們直接來看一個Demo，Demo的目錄結構如下所示：
其中 require_config.js 代碼如下：
//主要用來配置模塊的加載位置（設定短模塊名） require.config({ baseUrl: '/js/lib', //設定根目錄 paths: { //如果沒有設定根目錄則需要填寫完整路徑 'vue': 'vue', 'axios': 'axios', 'jquery': 'jquery-3.6.3', //paths還有一個重要的功能，就是可以配置多個路徑，如果遠程cdn庫沒有加載成功，可以加載本地的庫，如下： //'jquery': ['http://libs.baidu.com/jquery/2.0.3/jquery', '/js/lib/jquery-3.6.3'], } });
其中 base.js 代碼如下：
//define用來自定義模塊 //第一個引數：加載依賴模塊，可以是require_config中定義的短模塊名，也可以是完整的模塊路徑（去掉.js后綴名） //第二個引數：執行加載完后的回呼函式 define(['vue', 'axios'], function (vue, axios) { //TODO 此處可以處理一些公共的邏輯 //vue.component('component-a', { /* ... */ }); //全域注冊組件 return { vue: vue, axios: axios, //Vue混入 mixin: { //資料 data: function () { return { domain: '', //域名 } }, //組件 components: { }, //created鉤子函式 created: function () { console.log('This is base created'); }, //mounted鉤子函式 mounted: function () { console.log('This is base mounted'); }, //方法 methods: { //測驗 doTest: function () { console.log('This is base doTest'); }, //獲取域名 getDomain: function () { var _this = this; _this.domain = 'https://www.baidu.com'; }, } }, }; });
其中 index.js 代碼如下：
//第一個引數：加載依賴模塊，可以是require_config中定義的短模塊名，也可以是完整的模塊路徑（去掉.js后綴名，根目錄為require_config中設定的baseUrl） //第二個引數：執行加載完后的回呼函式 require(['../common/base', 'jquery'], function (base, $) { let axios = base.axios; var vm = new base.vue({ el: '#app', //掛載點 mixins: [base.mixin], //混入，類似基類的概念 data: { msg: 'Hello Vue!' }, //created鉤子函式 created: function () { console.log('This is index created'); }, //mounted鉤子函式 mounted: function () { console.log('This is index mounted'); }, //方法 methods: { //測驗 doTest: function () { console.log('This is index doTest'); $('#myDiv').html('測驗jquery模塊是否加載成功'); }, //測驗2 doTest2: function () { var _this = this; console.log('domain：' + _this.domain); _this.getDomain(); //在混入的base.js中 console.log('getDomain：' + _this.domain); } } }); });
其中對應的前端 HTML 代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>前端require的基本用法</title> </head> <body> <div id="app"> <input type="button" value=https://www.cnblogs.com/xyh9039/p/"doTest" @click="doTest"> <input type="button" value=https://www.cnblogs.com/xyh9039/p/"doTest2" @click="doTest2"> <div id="myDiv"></div> </div> <script src=https://www.cnblogs.com/xyh9039/p/"/js/lib/require.js"></script> <script src=https://www.cnblogs.com/xyh9039/p/"/js/common/require_config.js"></script> <script src=https://www.cnblogs.com/xyh9039/p/"/js/index.js"></script> </body> </html>
運行結果如下：
更多內容可參考博文：https://www.runoob.com/w3cnote/requirejs-tutorial-2.html
Demo原始碼：
鏈接：https://pan.baidu.com/s/1LKOJA4jKI4txO0wS8Vw8jw 提取碼：bye4
此文由博主精心撰寫轉載請保留此原文鏈接：https://www.cnblogs.com/xyh9039/p/17134885.html
著作權宣告：如有雷同純屬巧合，如有侵權請及時聯系本人修改，謝謝！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544372.html
標籤：JavaScript