1. 加载require.js文件
<script type="text/javascript" src="js/require.js" data-main="js/main" defer async="true" ></script>
2. 加载主模块文件
通过<script>标签设置 data-main="js/main" 加载主模块文件。
3. 异步加载require.js文件
设置 defer async="true" 实现多个浏览器兼容异步加载。
4. 路径配置
在main.js的顶部加入下面的代码
require.config({ baseUrl: "js/", paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } });
5. 加载一个jquery.js文件
define(['jquery'],function ($){ $(function(){ //console.log('jquery已经加载。'); }); });
6. 加载多个文件
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){ $(function(){ //.. }); });
7. 加载自定义模块
//加载key/value格式模块 define(['jquery','jsonobj'],function ($,json){ $(function(){ console.log(json.name +'/'+ json.age); }); }); //jsonobj.js define({ 'name': 'lbs', 'age': 10 });
//加载一个函数模块 define(['jquery','setColor'],function ($,O){ $(function(){ O.setColor(); }); }); //setColor.js define(function(){ var color = function (){ document.getElementsByTagName('body')[0].style.backgroundColor = 'red'; }; return { setColor: color }; });
//加载一个依赖关系的函数模块 define(['jquery','color'],function ($,O){ $(function(){ O.setColor(); }); }); //color.js define(['jquery'],function($){ var color = function(){ $('body').css('background','red'); }; return { setColor: color }; });
8. 其他配置选项
//加载非AMD标准的模块文件(underscore,backbone某些版本不符合AMD标准) require.config({ baseUrl: "js/", paths: { "jQuery": "jquery.min", "underscore": "underscore-min", "backbone": "backbone-min" }, shim: { 'underscore': { exports: '_' }, 'backbone': { deps: ['underscore', 'jQuery'], exports: 'Backbone' } } }); //shim属性定义不符合AMD标准加载模块文件的输出变量(exports)和依赖文件(deps) //加载对应模块文件 require(['backbone'], function(Backbone){ var person = Backbone.Model.extend({ defaults: { name: 'lbs', age: 10 } }); var me = new person(); console.log( me.get('name') +'/'+ me.get('age') ); });