requireJS入门基础

参考  require.js详解

1.引用requireJS的html文件

1 <!DOCTYPE html>
2     <head>
3         <title>requireJS</title>
4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
5     </head>
6     <body>
7     <script data-main="js/main" src="js/require.js"></script>
8     </body>
9 </html>

第7行,使用<script>和约定的属性data-main和src引入require.js模块, 所有的require配置在这里写在目录js下的main.js, 即require对象会到目录js下寻找main.js文件,require对象约定js文件可以省略.js扩展名.
2.requireJS配置入口JS文件

 1 require.config({
 2     baseUrl: 'js',
 3     paths: {
 4         jquery: 'jquery-1.8.2.min'
 5     }
 6 });
 7 
 8 require(['monkey'],function(mk) {
 9     mk.init();   
10 });

如这里的  js/main.js文件

1.调用require对象的config方法,对required对象进行基础设置, baseUrl指的require对象加载模块文件的根目录，可以是绝对路径或相对路径,对第8行产生影响.即当require对象执行第8行时, require对象会到js目录下加载monkey.js文件.paths的作用就是将一些常用的js文件，换成通用的名字。例如jquery-1.8.2.min.js，我们不用每次调用它都写这个长名字，就将jquery替代jquery-1.8.2.min.js，快捷方便。

2.requireJS核心函数require([],function(x){});

它接受两个参数, 第一个参数是一个数组，表示所依赖的框架,     第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块(如这里的mk), 所以,关键理解,monkey模块怎样设计.

3.requireJS相关模块JS

1 define(['jquery'],function($){
2     var init = function(){
3        console.log($.browser);
4     };
5     return {
6         init: init
7     };
8 });

使用requireJS的第3部分,就是按AMD规范, coding自己的JS 模块文件, 如这里的js/monkey.js文件

define的第2个参数也封装成一个匿名函数, 这里第5行~7行又封装成一个匿名对象,将第2行定义的function返回出来.

 

posted @ 2017-06-30 17:07  轴轴  阅读(162)  评论(0)  编辑  收藏  举报