JS modular programming specification-require.js

https://requirejs.org/

Folder directory

Introduced in index.html

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

main.js entry and configuration

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();
})

Single module exposure and return writing

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

    }
    return {
        init:init
    }
})

When you need to introduce a plug-in or js library (I take swiper.js as an example here)

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',
        },
      })     
})

The above is the author's rough understanding and use of require.js (AMD modularity).