技術標籤：Jsjsjavascriptnode.js

AMD模組化-require.js的使用

https://requirejs.org/

資料夾目錄

在index.html中引入

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

main.js入口及配置

require.config({
    paths: {
        // add: "../demo/add",
        // mul: "./mul",
        jquery: "../demo/jquery",
        use: "../demo/use",
        scale: "../demo/scale"
    }
})

require(["jquery","scale","use"],function(jquery, scale,use){
    use.init();
})
 

單個模組的暴露以及返回寫法

define(["jquery","scale"],(jquery,scale)=> {
    function init() {

    }
    return {
        init:init
    }
})

當你需要引入一個外掛或者js庫的時候 (我這裡以swiper.js為例子)

define([swiper],() =>{
    var Swiper = require('swiper');    
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true, // 迴圈模式選項
        
        // 如果需要分頁器
        pagination: {
          el: '.swiper-pagination',
        },
        
        // 如果需要前進後退按鈕
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        
        // 如果需要滾動條
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      })     
})
 

以上就是筆者關於require.js(AMD模組化)粗糙理解,以及使用.