requirejs之demo

原文链接:http://www.cnblogs.com/benchan2015/p/requireJs.html

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

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格式定义的

 // require1.js
  define(function (){
    var add = function (x,y){
      return x+y;
    };
    return {
      add: add
    };
  });

  

 

  

	// require2.js
  define(function (){
    var multiply = function (x,y){
      return x*y;
    };
    return {
			multiply: multiply
    };
  });

  

// require3.js
define(function(){
	var divide=function(a,b){
		return a/b;
		
	};
	return {
		divide:divide
	};
	
})

  

// noAMD.js
function test2(a,b){
	return a-b;
}
window.test=test2;

  

//main.js  
require.config({		
    paths: {
      "require1": "src/require1",
      "require2": "src/require2",
			"test":"src/noAMD"
    },
		shim:{
			"test":{
				exports:"test"
			}
			
		}
  });
require(["require1","require2","src/require3",'test'],function(require1,r2,r3,test2){
	var a=21,b=3;
	alert(require1.add(a,b));
	alert(r2.multiply(a,b));
	alert(r3.divide(a,b));
	alert(test2(a,b))
})

 

<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

转载于:https://www.cnblogs.com/benchan2015/p/requireJs.html

展开阅读全文
博主设置当前文章不允许评论。

没有更多推荐了,返回首页