http://www.requirejs.org/

http://www.requirejs.cn/

http://requirejs.readthedocs.org/en/1.0.1/

目录结构:

|-root
    |-demo
        |-js
            |-a.1.0.js
            |-a.1.1.js
            |-b.js
            |-c.js
            |-main.js
            |-util.js
        |-index.html
    |-libs
        |-requirejs
            |-require.js

文件下载

命名及代码都是随意写的,只为学习requirejs的写法.熟悉requirejs的用法.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>requirejs demo</title>
<style>
div {
padding: 5px 10px;
}
</style>
<script type="text/javascript" src="../libs/requirejs/require.js" data-main="./js/main.js"></script>
</head>
<body>
<div id="Main" style="width:600px;height:400px;border:1px red solid;"></div>
</body>
</html>
//main.js
require.config({
baseUrl: 'js', // or ./js //baseUrl是从index.html开始计算的.
map: {
'b': {
'a': 'a.1.0'
},
'c': {
'a': 'a.1.1'
}
}
}); require(['b','c'], function(b, c){
b();
c();
});
//a.1.0.js
define([], function(){
function add(a, b){
return a+b;
}
function mul(a, b){
return a*b;
}
return {
'add': add,
'mul': mul
}
});
//a.1.1.js
define([], function(){
function add(a, b){
return a+b+1000;
}
function mul(a, b){
return a*b*100;
}
return {
'add': add,
'mul': mul
}
});
//b.js
define(['a', 'util'], function(aa, util){
function test(a, b){
util.log('Main', 'add: ' + aa.add(a, b));
util.log('Main', 'mul: ' + aa.mul(a, b));
}
return function(){test.call(this, 2, 3)};
});
//c.js
define(['a', 'util'], function(aa, util){
function test(a, b){
util.log('Main', 'add: ' + aa.add(a, b));
util.log('Main', 'mul: ' + aa.mul(a, b));
}
return function(){test.call(this, 2, 3)};
});
//util.js
define([], function(){
// var __id = '';
// var __tar = null;
// function setId(id){
// __id = id;
// }
// function _getEl(){
// return document.getElementById(__id);
// }
function log(id, content){
//var tar = __tar || __tar = _getEl();
var tar = document.getElementById(id);
var old = tar.innerHTML;
tar.innerHTML = old + '<br>' + content;
}
return {
'log': log
};
});

开始时,把paths理解为map了.后来出现错误,再去查API时才发现.(而且将paths误写成了path)

开始时,我在b.js和c.js中都写了require.config({...}),并将path(s)分别设置为 'a': 'a.1.0' 和 'a': 'a.1.1' <- 这显然是错误.

最开始时baseUrl也配置错误了.截图下来了.

requirejs实验001.对我来说,用AMD的方式来组织代码并不轻松.的更多相关文章

  1. requirejs实验002. r.js合并文件. 初体验.

    requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...

  2. Matlab与C/C++联合编程之Matlab以MEX方式调用C代码(五)完整过程加示

    如下为本人亲证代码: 一: 编译器的安装与配置(环境不同,显示结果不同) 要使用MATLAB编译器,用户计算机上应用事先安装与MATLAB适配的以下任何一种ANSI C/C++编译器: 5.0.6.0 ...

  3. weimi 短信API post方式的简易代码。

    http://www.weimi.cc/example-csharp.html string mobile = "<enter your mobiles>", con ...

  4. repo+manifests+git方式管理安卓代码

    repo+manifests+git方式管理安卓代码 1.repo的获取 repo只是google用Python脚本写的调用git的一个脚本,主要是用来下载.管理Android项目的软件仓库.(也就是 ...

  5. Linux - Redmine使用方式 | SVN提交代码

    Redmine使用方式 | SVN提交代码 本文地址:http://blog.csdn.net/caroline_wendy RbTools 1. 安装: svn co https://dev.cxx ...

  6. react-native-pg-style使用方法(以最简单的方式编写样式代码,抛弃react-native标准的样式创建方式.)

    react-native-pg-style 以最简单的方式编写样式代码,抛弃react-native标准的样式创建方式. 看大家写的源码中都是按照react-native标准的样式创建方式来写样式代码 ...

  7. Spring MVC 实验2-Bean的几种装配方式及基本用法

    实验二:Bean的几种装配方式及基本用法  实验目的: (1)掌握2种基于XML的装配方式:设值注入(Setter Injection)和构造注入(Constructor Injection) . ( ...

  8. 实验一:使用ADO.NET方式读数据

    第一步:创建Asp.net应用程序 在VS中,点击文件->新建->项目,按如图方式选择并输入: 第二步:新建产品浏览网页窗体Listing.aspx: 在项目SportsStoreEx上点 ...

  9. ELK学习实验001:Elastic Stack简介

    1 背景介绍 在我们日常生活中,我们经常需要回顾以前发生的一些事情:或者,当出现了一些问题的时候,可以从某些地方去查找原因,寻找发生问题的痕迹.无可避免需要用到文字的.图像的等等不同形式的记录.用计算 ...

随机推荐

  1. 微信公众平台Token验证失败的解决办法

    微信公众平台Token验证失败的解决办法 1.可查看url和token是否正确 2.查看服务器端口是否为80端口 3.你可以通过记录log日志来判断是否接受到微信提交过来的信息 1.$fp=fopen ...

  2. Codeforces Round #333 (Div. 1) C. Kleofáš and the n-thlon 树状数组优化dp

    C. Kleofáš and the n-thlon Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contes ...

  3. Java中Scanner的使用方法

      Scanner是SDK1.5新增的一个类,但是使用该类创建一个对象.Scanner reader=new Scanner(System.in); 然后reader对象调用下列方法(函数),读取用户 ...

  4. DashClock

    https://github.com/romannurik/dashclock/ https://github.com/nhaarman/DashPinkpop dashclock-master.zi ...

  5. Jquery-Ajax常用总结

    1.方式一:访问.aspx 客户端: function Del(Id) { if (confirm("确认要删除?")) { $.ajax({ type: "Post&q ...

  6. Asp.Net MVC 3【Filters(过滤器)】

    这里分享MVC里的Filters(过滤器),什么是MVC里的过滤器,他的作用是什么? 过滤器的请求处理管道中注入额外的逻辑.他们提供了一个简单而优雅的方式来实现横切关注点.这个术语是指所有对应用程序的 ...

  7. 在mac下安装jdk1.7(转)

    转自:http://vela.diandian.com/post/2012-01-06/15379924 最近呢,想玩玩jdk1.7,不过mac平台下的jvm一直都是Apple自己改的,所有有些麻烦. ...

  8. placement new 操作符

    placement new操作符能够在分配内存时指定内存位置.下面的程序使用了placement new操作符和常规new操作符给对象分配内存. // placenew.cpp -- new, pla ...

  9. 编写3个不同版本的程序,令其均能输出ia的元素

    #include<iostream> #include<vector> #include<string> using namespace std; int main ...

  10. 实例源码--Android底部功能分类Tab使用实例

    下载源码 技术要点:  1.底部功能布局实例 2.TAB使用详细实例 3.详细的源码注释 ...... 详细介绍: 1. 底部功能布局实例 底部功能布局是开发过程中常用到布局,本实例用TAB的方式实现 ...