程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

官网文档：https://requirejs.org/

什么是require.js

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统script标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

为什么要使用require.js

平时我们写js脚本的时候，javascript代码直接扔在script标签里面就完事了，反正代码不多，交互简单，逻辑不难，和HTML混在一起也未尝不可，后来交互越来越复杂，代码越多越多了，我们就开始把JS代码独立到了单独的JS文件中，公共的库引用在前，自己的逻辑代码引用在后，全局变量定义在HTML内部，在独立JS文件中直接使用变量就好。然后就出现了这样的代码：

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
<script src="7.js"></script>
<script src="8.js"></script>

通过js的加载顺序去管理js的依赖关系，这样就显得比较麻烦，只要有一个依赖关系的加载顺序搞错的话，页面就会报错，而且会使页面加载速度变慢

而requirejs的诞生便是为了解决这个问题。

基本使用方法

下载require.js

页面引入：

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

data-main="js/main.js"这个是主入口文件，自己创建以及配置

main.js

// 配置文件
requirejs.config({
  // 基础路径
  baseUrl:"js/",
  // 映射  .js可以省略
  // 除了jq，其他的都是自定义模块
  paths:{
    config:"app/config",
    view:"app/view",
    http:"app/http", 
    index:"app/index",
    jquery:"lib/jquery.min" 
  },
  
})
// 主入口文件
requirejs(["config","view","http","view","index","jquery"],function(config,view,http,view,index,$,swiper ){
  // 一般用于初始化
})

自定义模块：

// 自定义config模块
define(function(){
  var name = "猛男曾";
  function getName(){
    console.log(name)
  }
  // 提供获取名字方法
  return {
    getName:getName
  }
})

视图模块使用config模块中的名字获取方法：

// 视图模块 ["config"],注入config模块，也叫依赖注入
define(["config"],function(config){
  config.getName();
})

shim讲解，加载非规范的模块

这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。
比如：

// 配置文件
requirejs.config({
  // 基础路径
  baseUrl:"js/",
  // 映射  .js可以省略
  // 除了jq，其他的都是自定义模块
  paths:{
    config:"app/config",
    view:"app/view",
    http:"app/http", 
    index:"app/index",
    jquery:"lib/jquery.min" 
  },
  // 对于不遵循AMD规范的第三方库做特殊处理  假如swiper不遵循
  // 这里只是假如，swiper4开始已经遵循AMD规范了
  shim:{
    'swiper':{
      deps:["jquery"],      //依赖模块
      exports:"swiper"      
    }
  }
})
// 主入口文件
requirejs(["config","view","http","view","index","jquery","swiper"],function(config,view,http,view,index,$,swiper ){
  // 一般用于初始化
})

个人觉得还是挺好用的

原文链接:https://blog.csdn.net/qq_35168861/article/details/114696679