require.js ---- 基本使用

Posted 2020-11-29 帅到要去报警

最终还是对 require.js 下手了，RequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守AMD规范，模块与模块之间可以互相依赖，当然可能会有人会想，模块之间的依赖，要是没法正确地去按照特定顺序加载，会出现错误，AMD规范可以处理这种问题，AMD就是这样一种对模块的定义，使模块和它的依赖可以被异步的加载，但又按照正确的顺序。

怎么使用require.js呢？

直接在页面中通过script标签引入即可。

<script type="text/javascript" src="./js/require.js"></script>

最简单示例一：

main.js

define(function(){
  function fun1(){
    console.log(‘I am fun1‘);
  }
  fun1();
})

使用：

<script type="text/javascript">
// 简单require
require([‘./js/main.js‘]); // require后自动执行main.js
</script>

最简单示例二：

main2.js

define(function(){
  function fun2(){
    console.log(‘I am fun2 in main2‘);
  }
  return {fun2:fun2};
})

使用：

<script type="text/javascript">
// return
require([‘./js/main2.js‘],function(fun){
  fun.fun2();
});
</script>

最简单示例三：

<script type="text/javascript">
// require jQuery
require([‘js/jquery‘],function(){
  $(‘.btn‘).click(function(){
    alert(‘click btn‘);
  });
});
</script>

可以使用路径配置：

<script type="text/javascript">
require.config({
  paths:{
    ‘jquery‘ : "js/jquery",
    ‘main2‘ : "js/main2"
  }
});
require([‘jquery‘],function(){
  console.log($);
});
</script>

使用baseUrl：

<script type="text/javascript">
require.config({
  baseUrl: "js/",
  paths:{
    ‘jquery‘ : "jquery",
    ‘main2‘ : "main2"
  }
});
require([‘jquery‘,‘main2‘],function(){
  console.log($);
});
</script>