JS模块化编程规范——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模块化)粗糙理解,以及使用.