【转】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



posted on 2014-10-25 22:03  grape1211  阅读(153)  评论(0)  编辑  收藏  举报