學習鏈接：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>