demo 结构:

   

config.js

require.config({
baseUrl: 'js/lib',
paths: {
'jquery' : 'jquery-1.11.1.min',
'util' : 'util',
'bootstrap' : 'bootstrap.min',
'demo' : '../app/demo'
},
shim: {
'util' : {
exports : 'util',
deps : ['bootstrap']
},
}
});

自定义模块 demo.js

// 自定义模块
(function(window) {
var demo = {}; demo.message = function(msg, type){
require(['util'], function(u){
u.message(msg, '', type);
});
} if (typeof define === "function" && define.amd) {
define(function(){
return demo;
});
} else {
window.demo = demo;
}
})(window);

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript" src="js/app/config.js"></script>
</head>
<body> <div id="content">content</div> <script>
require(['jquery'], function($){
$("#content").css("background", '#996699');
}); // require(['util'], function(u){
// u.message('信息提示', '', 'info');
// }); require(['demo'], function(d){
d.message('内容', 'info');
});
</script> </body>
</html>

源码

拓展:

(一)http://www.cnblogs.com/KeenLeung/p/6386434.html

(二)http://www.cnblogs.com/KeenLeung/p/6386468.html

(三)http://www.cnblogs.com/KeenLeung/p/6386559.html

============ end

Javascript : require.js 的使用(例子)的更多相关文章

  1. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  2. javascript模块化编程(三):require.js用法

    本文来自阮一峰 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require ...

  3. Javascript模块化编程(三):require.js的用法(转)

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...

  4. Javascript模块化编程(三):require.js的用法 作者: 阮一峰

    声明:转载自阮一峰的网络日志 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用 ...

  5. Javascript模块化编程之路——(require.js)

    转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...

  6. Javascript模块化编程(三):require.js的用法【转】

    作者: 阮一峰 日期: 2012年11月 7日 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js ...

  7. Javascript模块化编程(三):require.js的用法 (转)

    转自:http://my.oschina.net/u/1390066/blog/213769 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载 ...

  8. Javascript模块化编程 require.js使用详解

    一.为什么用require.js,产生的背景 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载. & ...

  9. JavaScript模块化编程之require.js与sea.js

    为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...

随机推荐

  1. STC15W408AS简单使用教程-简单的光强检测!

    第一步:搭建开发环境 安装最新版本的STC_ISP程序烧录软件,链接:http://pan.baidu.com/s/1slLPnOD 密码:6bov 安装keil C51的51系列单片机集成IDE软件 ...

  2. 做项目单个功能的时候要理解需求和sql语句。

    做项目单个功能的时候要理解需求和sql语句.最好直接按照给出来的sql语句或者存储过程来写,避免有极其细微的差别所造成的不同. 做宜春国税二期的时候有个功能叫夜间开票情况,钻取明细时由于没理解sql语 ...

  3. CentOS7 Windows双系统 修复引导

    伪前提:先装Windows再装CentOS7(伪前提是因为没试过先装CentOS再装Windows) Windows用U盘安装CentOS7后,开启启动项里面仅有CentOS7的启动项,要修复Wind ...

  4. 【LeetCode算法-14】Longest Common Prefix

    Write a function to find the longest common prefix string amongst an array of strings. If there is n ...

  5. 使用PHPStorm 配置自定义的Apache与PHP环境

    使用PHPStorm 配置自定义的Apache与PHP环境之一   关于phpstorm配置php开发环境,大多数资料都是直接推荐安装wapmserver.而对于如何配置自定义的PHP环境和Apach ...

  6. Windows10系统网络连接问题

    Thinkpad笔记本Windows10系统突然遇到网络连接问题: 问题:今天同事遇到一个WiFi连接问题,ThinkPad笔记本在公司和家里面都无法连接WiFi 寻找问题: 1.检查硬件问题 首先我 ...

  7. Codeforces 862D. Mahmoud and Ehab and the binary string 【二分】(交互)

    <题目链接> 题目大意: 有一个长度为n(n<1000)的01串,该串中至少有一个0和一个1,现在由你构造出一些01串,进行询问,然后系统会给出你构造的串与原串的   Hamming ...

  8. spring之基础知识总结

    spring是轻量级的(非侵入式,不用继承spring中的父类等).Spring框架主要提供了IoC容器.AOP.数据访问.Web开发.消息.测试等相关技术.本文主要介绍Spring中的一些小知识点, ...

  9. Is there a TRY CATCH command in Bash

    Is there a TRY CATCH command in Bash? No. Bash doesn't have as many luxuries as one can find in many ...

  10. 环形动画加载视图AnimatedCircleLoadingView​​​​​​​

    环形动画加载视图AnimatedCircleLoadingView AnimatedCircleLoadingView是基于Android手表动画android-watch-loading-anima ...