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

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 (转)的更多相关文章

  1. requirejs之demo

    具体的理论就不讲了,可以参考 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html http://www.ruanyifeng.c ...

  2. 浅谈requireJS

    项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下.通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requi ...

  3. 浅谈requireJS 摘自http://www.cnblogs.com/giggle/p/5436710.html

    项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习下.通过一步步利用requireJS编写demo,从而学习requireJS的一个整体开发流程以及自我使用requi ...

  4. requirejs原理深究以及r.js和gulp的打包【转】

    转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...

  5. requireJS-初识

    浅谈requireJS 2016-04-26 21:44 by 猴子猿, 726 阅读, 0 评论, 收藏, 编辑 项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习 ...

  6. （五）backbone - DEMO - 通信录改造之使用requirejs

    DEMO介绍是 DEMO通信录的扩展,使用requirejs模块化整合 大体实现 • model文件 model/contact.js define(function (){ // user cont ...

  7. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  8. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  9. 使用gulp解决RequireJS项目前端缓存问题（二）

    1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...

随机推荐

  1. Good Bye 2015 A. New Year and Days 签到

    A. New Year and Days   Today is Wednesday, the third day of the week. What's more interesting is tha ...

  2. Java 获取本机IP

    import java.io.*; import java.util.*; import java.net.*; public class GetIP { public static void mai ...

  3. iOS开发-UISlider改变图片透明度

    拖动条是通过滑块的位置来标识数值,而且拖动条允许用户拖动滑块来改变值.因此,拖动条通常用于对系统的某种数值进行调节,如调节亮度,透明度,音量等. 一.属性介绍 @property(nonatomic) ...

  4. jq的bind用法

    type,[data],function(eventObject)String,Object,Function type: 含有一个或多个事件类型的字符串,由空格分隔多个事件.比如"clic ...

  5. UML元素分析

  6. AndroidManifest.xml 配置权限大全

    问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES ,读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permissi ...

  7. OpenGL环境搭建Windows+Mac+Linux

    OpenGL环境搭建Windows+Mac+Linux Mac平台下 下载列表:GLFWcmake 下载的GLFW解压缩 然后安装cmake, 安装好cmake之后打开 1.browse source ...

  8. 汇编与C语言混合 实现的从小到大的冒泡排序

    汇编实现的从小到大的冒泡排序 主函数由C语言实现,sort函数用汇编语言写 #include <stdio.h>  int buffer[256];      //数据缓冲区  int   ...

  9. HDU 4647 Another Graph Game 思路+贪心

    官方题解: 若没有边权,则对点权从大到小排序即可.. 考虑边,将边权拆成两半加到它所关联的两个点的点权中即可. ..因为当两个人分别选择不同的点时,这一权值将互相抵消. #include <cs ...

  10. 深入理解Java内存模型（六）——final

    与前面介绍的锁和volatile相比较,对final域的读和写更像是普通的变量访问.对于final域,编译器和处理器要遵守两个重排序规则: 在构造函数内对一个final域的写入,与随后把这个被构造对象 ...