首页 > Web开发 > 详细

requirejs之demo (转)

时间:2015-12-14 18:16:00      阅读:143      评论:0      收藏:0      [点我收藏+]

具体的理论就不讲了,可以参考

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

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

直接上demo

首先创建文件,其中define的是采取amd格式定义的

1
2
3
4
5
6
7
8
9
// add.js
 define(function (){
   var add = function (x,y){
     return x+y;
   };
   return {
     add: add
   };
 });

  

 

  

1
2
3
4
5
6
7
8
9
  // multiply.js
define(function (){
  var multiply = function (x,y){
    return x*y;
  };
  return {
          multiply: multiply
  };
});

  

1
2
3
4
5
6
7
8
9
10
11
// divide.js
define(function(){
    var divide=function(a,b){
        return a/b;
         
    };
    return {
        divide:divide
    };
     
})

  

1
2
3
4
5
// noAMD.js
function testm(a,b){
    return a-b;
}
window.test=test2;

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//main.js  
require.config({
    baseUrl:"js",       
    paths: {
      "js1""add",
      "js2""divide",
            "js4":"noAMD"
    },
        shim:{
            "test":{
                exports:"js4"
            }
             
        }
  });
require(["js1","js2","js/multiply",‘js4‘],function(j1,j2,j3,j4){
    var a=21,b=3;
    alert(j1.add(a,b));
    alert(j2.multiply(a,b));
    alert(j3.divide(a,b));
    alert(testm(a,b))
})

 

1
2
3
4
5
6
7
8
9
10
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title></title>
    <script src="require.js" data-main="main"  defer async="true">
    </script>
  </head>
  <body></body>
</html>

  

此处需要注意非amd格式编写的,需要使用shim

文件:r9.zip

requirejs之demo (转)

原文:http://www.cnblogs.com/wanliyuan/p/5045521.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!