【转】require.js学习笔记(二)

时间:2023-03-08 19:17:42
【转】require.js学习笔记(二)

require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块。

一、模块加载require
1.加载符合AMD规范模块

HTML:

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

MAIN.JS

require.config({

    baseUrl: "js/lib",

    paths: {

      "jquery": "jquery.min"

    }

  });

require(['jquery'], function ($){
    // some code here
  });

2.加载不符合AMD规范模块

require.config({
    shim: {
      'underscore':{
       exports: '_'
      },
      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }
    }
  });

二、模块定义define

define(['math', 'graph'],
function ( math, graph ) {
return {
plot: function(x, y){
return graph.drawPie(math.randomGrid(x,y));
}
}
};
);

三、require+jquery+domready

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/require.js"></script>
</head>
<body>
<div id="333">123124</div>
<script>
require.config({
paths: {"jquery": "js/lib/jquery-1.11.1.min",
"domReady": "js/lib/domReady"
}
}); require(["domReady!", "jquery"], function() {
//alert('22')
change();
}); function change(){
$('#333').text('5555');
}
</script> </body>
</html>

原文地址:
http://javascript.ruanyifeng.com/tool/requirejs.html

http://www.ruanyifeng.com/blog/2012/11/require_js.html