index.html
<!doctype html> <html> <head> <title>requirejs</title> <meta charset="utf-8"> <script data-main="js/main" src="js/require.js"></script> </head> <body> </body> </html>
main.js 合并js功能
require.config({ // baseUrl: ‘js/lib‘, 如果加载的这三个js不和main在一个目录下,就这样配置这个参数,或者直接写网址路径 paths: { underscore: ‘underscore.min‘, backbone:‘backbone.min‘, jquery: ‘jquery-1.9.1.min‘, math :‘math‘ }, /* shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输 出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。 */ shim: { ‘underscore‘:{ exports: ‘_‘ }, ‘backbone‘: { deps: [‘underscore‘, ‘jquery‘], exports: ‘Backbone‘ } } /*jQuery的插件可以这样定义 shim: { ‘jquery.scroll‘: { deps: [‘jquery‘], exports: ‘jQuery.fn.scroll‘ } } */ }); // require([‘jquery‘], function($) { // alert($().jquery); // }); require([‘jquery‘, ‘underscore‘, ‘backbone‘], function ($, _, Backbone){ // some code here alert($().jquery); }); // 如果不依赖其他模块 require([‘math‘],function(math){ alert(math.add(1,2)) }) // domready插件,可以让回调函数在页面DOM结构加载完成后再运行。 require([‘domready!‘], function (doc){ // called once the DOM is ready }); /* require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块, 上例就是[‘moduleA‘, ‘moduleB‘, ‘moduleC‘],即主模块依赖这三个模块;第二个参数是一个回调函数, 当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就 可以使用这些模块。 */ /* require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块 都加载成功后,才会运行,解决了依赖性的问题。 */ /* 1、data-main属性 2、require.config方法 3、require函数 */
math.js 自定的js
// 这种定义 是不依赖其他模块 define(function(){ var add = function( x , y){ return x+y ; } return{ add : add } }); // 否则 这样定义 // define([‘mylib‘],function(mylib){ // function foo(){ // mylib.doSomething(); // } // return { // foo : foo // }; // })