requireJS使用入门

时间:2025-01-15 22:54:40

参考链接
requireJS有什么用?
文件目录:
require


requireJS怎么用?
1.引入requirejs并指定主入口文件:

//中
<script src="./js/plug/" data-main="./js/"></script>

*属性 data-main 是告诉requirejs:加载完自己后,马上去加载真正的入口文件,它一般用来对requirejs进行配置,并且载入真正的程序模块。

2.配置入口文件:

//中
({
  baseUrl: './js',                   //js主文件夹路径
  paths: {                           //对应所需文件路径
    jquery: 'plug/jquery-3.1.', //省略后缀.js
    bootstrap: 'plug/',
    main: 'control/main',
    greet: 'control/greet'           //非AMD格式js
  },
  shim: {                             //引用非AMD格式js文件内的函数
    // hello: { exports: 'hello' }    //exports 只引用非AMD格式js文件内的一个函数
    greet:{
        init: function(){             //init 引用非AMD格式js文件内的多个函数
            return {
                name2: 'name',
                sex: 'sex'
            }
        }
    }
  },
  map: {
        '*': {
            'css': 'plug/'
        }
    }
});

requirejs(['main','greet'],function(main){
    (3);
    (3,5);
    $('.name').text();
    name('孙中山');
    sex('男');
})

*exports 可以把某个非requirejs方式的代码中的某一个全局变量暴露出去,当作该模块以引用,但如果我要同时暴露多个全局变量时,则需要用到init。
*当 exports 与 init 同时存在的时候, exports 将被忽略。

//中(AMD格式js)
define(['jquery','css!../css/'],function(){
    return { //返回对象
        alertCont : function(cont){
            (cont);
        },
        add : function(x,y){
            $('.num').text(x+y);
        },
        name : 'lidysun',
    }
})
//(非AMD格式js)
function name(name) {
  ('姓名:' + name);
}
function sex(sex) {
  ('性别:' + sex);
}
...