require.js快速入门

学习链接：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">&times;</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>

 

posted @ 2017-08-04 10:05  笑笑~上善若水  阅读(11978)  评论(0)  编辑  收藏  举报