requirejs之demo

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

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

时间: 2024-10-09 13:02:04

requirejs之demo的相关文章

grunt+requirejs+angularjs 简单运用

两个网址 http://www.gruntjs.org/docs/getting-started.html http://gruntjs.com/plugins 步骤: 1.cd demo文件夹下 2.安装grunt-cli npm install -g grunt-cli    //全局安装 -g 3.手动生产或自动生产 package.json 自动  npm init   //之后按需 输入name和version... 4创建 Gruntfile.js touch  Gruntfile.

浅谈requireJS

浅谈requireJS 浅谈requireJS 2016-04-26 21:44 by 猴子猿, 429 阅读, 0 评论, 收藏, 编辑 项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下.通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requireJS的一些感受. AMD:一种基于模块的异步加载JavaScript代码的机制,它推荐开发人员将JavaScript代码封装进一个个模块,对全局对象的依赖变

(五)backbone - DEMO - 通信录改造之使用requirejs

DEMO介绍是 DEMO通信录的扩展,使用requirejs模块化整合 大体实现 • model文件 model/contact.js 1 define(function (){ 2 // user contact 3 var Contact = (function(){ 4 var _c = Backbone.Model.extend({ 5 defaults: { 6 name: '小强', 7 email: '小强@无敌.com' 8 }, 9 // validate user name

requireJS(一)

一:为什么要使用requireJS? 很久之前,我们所有的JS文件写到一个js文件里面去进行加载,但是当业务越来越复杂的时候,需要分成多个JS文件进行加载,比如在页面中head内分别引入a.js,b.js,c.js等,如下所示: <script src="js/app/a.js"></script> <script src="js/app/b.js"></script> <script src="js/

浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

本文转载自:http://www.cnblogs.com/kenkofox/p/4643760.html 心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs

RequireJS对文件合并与压缩实现方法

RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量. 本文为大家讲解的是requireJS对文件合并与压缩的实现方法,感兴趣的同学参考下. RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 requireJS

requireJS对文件合并与压缩(二)

requireJS对文件合并与压缩 RequireJS提供了一个打包与压缩工具r.js,r.js的压缩工具使用UglifyJS进行压缩的或Closure Compiler.r.js下载 requireJS对互相依赖模块进行合并与压缩,可以对JS,CSS压缩,甚至可以对整个项目进行打包.r.js是基于nodeJS的,所以本机电脑上需要有node环境. 下面还是来看看我整个项目结构吧,如下: 现在是这样的,app/a.js,app/b.js,app/c.js,app/d.js,有依赖关系,分别是a依

requireJS使用

requireJS使用 requirejs使用 开篇引题 为什么使用require.js require.js加载 配置require:config方法 define方法:定义模块 require方法:调用模块 require合并 实例列表 参考文档 开篇引题 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂.网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑. J

requireJS目录

前言 对于像我这种requireJS初学者而言,requireJS最难理解的部分应该是它的路径问题.晚上随便折腾了一下,算是稍微理清了这个目录问题吧. requireJS学习网址:requireJS中文网 requireJS英文网 requireJS简介 随着前端代码量的日益庞大和复杂的结构,以及越来越多框架的出现,如何有效的管理你的代码,已经成为一个团队亟待解决的问题.而RequireJS的目标是鼓励代码的模块化,它使用了不同于传统script标签的脚本加载步骤.可以用它来加速.优化代码,但其