学习链接：https://segmentfault.com/a/1190000002390643
学习链接：http://www.ruanyifeng.com/blog/2012/11/require_js.html （阮一峰老师）
require.js快速入门：
直接看代码和注释，怎么配置就可以，就那么几步操作
自己写的配置例子代码：https://github.com/Summer-Lin/require.js
（主要看main.js怎么配置，a.js b.js c.js 怎么定义，index.html怎么引入，就可以了）
原来JS引入模式：缺点-加载时页面停止渲染，JS文件严格保证加载顺序。
<script src="5.js"></script>
<script src="6.js"></script>
require.js属于AMD，清楚知道JS直接的依赖关系，可以异步加载
require.js例子：引入jquery,和bootstrap。
main.js文件：
1 // 全局配置 2 require.config({ 3 // 根路径设置，paths下面全部都是根据baseUrl的路径去设置 4 baseUrl:'./js/', 5 paths:{ 6 // 引入jQuery 7 jquery:'plugin/jquery', 8 // 引入bootstrap 9 bootstrap:'plugin/bootstrap', 10 // a.js 11 a:'a', 12 // b.js 13 b:'b', 14 // 引入c.js 15 c:'c' 16 }, 17 // 用来配置不兼容的模块，意思是：该模块没有module.exports, 18 // jquery就有module.exports输出值 19 shim:{ 20 //bootstrap没有module.exports输出值，所以得放在shim 21 bootstrap:{ 22 //bootstrap需要依赖jquery，所以得加deps 23 deps:["jquery"] 24 // 如果该模块加载进来，需要输出一个值，那就用exports来设置，这里不用设置 25 // exports:'' 26 } 27 }, 28 //map"告诉RequireJS在任何模块之前，都先载入这个模块 29 map: { 30 // 这里没有设置，举个例子 31 // '*': { 32 // 'css': 'plugins/require-css/css' 33 // } 34 } 35 })
HTML文件：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>require.js2</title> 6 <meta name="viewport" 7 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 8 <link rel="stylesheet" href="./css/bootstrap.css"> 9 </head> 10 <body> 11 <!--******************摘自bootstrap 直接复制粘贴*******************--> 12 13 <!-- Button trigger modal --> 14 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 15 Launch demo modal 16 </button> 17 18 <!-- Modal --> 19 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 20 <div class="modal-dialog" role="document"> 21 <div class="modal-content"> 22 <div class="modal-header"> 23 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 24 <h4 class="modal-title" id="myModalLabel">Modal title</h4> 25 </div> 26 <div class="modal-body"> 27 摘自bootrap 28 </div> 29 <div class="modal-footer"> 30 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 31 <button type="button" class="btn btn-primary">Save changes</button> 32 </div> 33 </div> 34 </div> 35 </div> 36 37 <!--******************摘自bootstrap 直接复制粘贴*******************--> 38 39 <!--先引入require.js--> 40 <script src="js/plugin/require.js"></script> 41 <!--再引入全局配置--> 42 <script src="js/main.js"></script> 43 <script> 44 // 用require引入要引入的模块，[]：里面为引入的名称，已经在main.js里面的Paths设置好了 45 // function（），小括号里面对应[]里面值，按顺序在()给变量名 46 // jquery一般用 $, bootstrap模块没有输出，函数里面可以不用变量 47 require(['jquery','bootstrap'],function ($) { 48 $('#myModal').on('shown.bs.modal', function () { 49 $('#myInput').focus() 50 }) 51 }) 52 </script> 53 </body> 54 </html>