requireJS简介和一个完整实例
什么是 requireJS ？
requireJS 是用JavaScript编写的JS框架，主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作，可简单理解为JS文件的加载器，它非常适合在浏览器中使用，它可以确保所依赖的JS文件加载完成之后再加载当前的JS文件，这在大量使用JS文件的项目中可确保各个JS文件的先后加载顺序，确保避免了以前因某些原因某个文件加载慢而导致其它加载快的文件需要依赖其某些功能而出现某函数或某变量找不到的问题，这点非常有用，也是 requireJS 的主要价值所在吧。
快速简要了解要点：
2、define(function(){...}); 从名字就可以看出这个api是用来定义一个模块；
3、require(['aModule','bModule'],function(a,b){...}) 加载依赖模块，并执行加载完后的回调函数；
4、在使用requirejs时，加载模块时不用写.js后缀，当然也是不能写后缀；
5、require.config({...}) 是用来配置模块加载位置和设置基本路径等；
6、加载requirejs脚本的script标签加入了data-main属性，这属性指定在加载完reuqire.js后，就用requireJS加载该属性值指定路径下的JS文件并运行，所以一般该JS文件称为主JS文件，类似C或Java语言中main函数的功能，然后把require.config的配置加该主文件后可使每一个页面都使用这个配置，然后页面中就可直接使用require来加载所有的短模块名即可，这样即可在一个地方配置所有地方使用，同时模块别名的使用和管理也都比较方便。例如： < script data-main="js/main" src="js/require.js">< /script>
7、当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径；
8、require加载的模块一般都需要符合AMD规范，即使用define来申明模块；
9、加载非AMD规范的js，这时候就需要用到另一个功能：shim; 例如：
require.config({
paths:{
"underscore":"http://www.xxx.com/xpath/xFile.js"
}
,shim: {
"underscore" : {
exports : "_";
}
}
});
好了，简要介绍就到这，下面看一个实际例子：
这个例子的设计要求是 workjs01.js 文件依赖 jquery, workjs02.js 依赖 workjs01.js，只有等依赖文件加载完了，最后在页面打出提示信息，
首先看例子文件目录结构：
//-------------------------------------------------
userExample01
|---- *.html //html页面
|----scripts
| |----*.js //main.js, require.js等
|----lib //各个第三方框架
| |----jquery
| |---- *.js
|----work //各个业务工作JS文件
|---- *.js
//-------------------------------------------------
（一般第三方库都放在lib目录下）
1、HTML 文件 index.html 注意看 requireJS 加载方式之一，见 script 标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>requireJS</title>
<style type="text/css">
*{font-family:"微软雅黑","microsoft Yahei",verdana;}
.text01{line-height:20px;font-size:13px;font-family:verdana;}
pre{margin:0px;padding:2px 0px;font-size:13px;font-family:verdana;}
.div01{border:1px solid red;text-align:left;padding:5px;
}
</style>
</head> <body>
<h4>requireJS 例子 example </h4>
<div id="loadMsgCon" class="div01"></div>
<script data-main="scripts/main" src="scripts/require_v2.1.11.js"></script>
<!--注意 requireJS 文件对应即可,同时data-main属性值写对即可-->
</body>
</html>
2、主文件 main.js 一般用这个进行主文件，进行各个文件按一定先后完成各个文件的加载；推荐注意文件个注释说明和书写格式，方便养成良好习惯和代码规范；（一般默认main的根路径）
//1、about require.js config//配置信息
;
require.config({
//define all js file path base on this base path
//actually this can setting same to data-main attribute in script tag
//定义所有JS文件的基本路径,实际这可跟script标签的data-main有相同的根路径
baseUrl:"./scripts" //define each js frame path, not need to add .js suffix name
//定义各个JS框架路径名,不用加后缀 .js
,paths:{
"jquery":["http://libs.baidu.com/jquery/2.0.3/jquery", "lib/jquery/jquery-1.9.1.min"] //把对应的 jquery 这里写对即可
,"workjs01":"work/workjs01"
,"workjs02":"work/workjs02"
,"underscore":"" //路径未提供，可网上搜索然后加上即可
} //include NOT AMD specification js frame code
//包含其它非AMD规范的JS框架
,shim:{
"underscore":{
"exports":"_"
}
} }); //2，about load each js code basing on different dependency
//按不同先后的依赖关系加载各个JS文件
require(["jquery","workjs01"],function($,w1){
require(['workjs02']);
});
3、业务文件之一， workjs01.js 注意语法看看模块是怎么写的，推荐注意文件各个注释说明和书写格式，方便养成良好习惯和代码规范
define(['jquery'],function($){ //注意模块的写法
//1,define intenal variable area//变量定义区
var myModule = {}; //推荐方式
var moduleName = "work module 01";
var version = "1.0.0";
//2,define intenal funciton area//函数定义区
var loadTip = function(tipMsg, refConId){
var tipMsg = tipMsg || "module is loaded finish.";
if(undefined === refConId || null === refConId || "" === refConId+""){
alert(tipMsg);
}else{
$('#' + (refConId+"")).html(tipMsg);
}
};
//3,should be return/output a object[exports/API] if other module need
//如有需要暴露(返回)本模块API(相关定义的变量和函数)给外部其它模块使用
myModule.moduleName = moduleName;
myModule.version = version;
myModule.loadTip = loadTip;
return myModule;
/*
//this is same to four line code upper//跟上面四行一样
return {
"moduleName":"work module 01"
,"version":"1.0.0"
,loadTip:loadTip
};
*/
});
4、业务文件之一， workjs02.js 推荐注意文件个注释说明和书写格式，方便养成良好习惯和代码规范；
define(['workjs01'],function(w01){
//1,define intenal variable area//变量定义区
var moduleName = "work module 02";
var moduleVersion = "1.0.0";
//2,define intenal funciton area//函数定义区
var setHtml = function(refId,strHtml){
if(undefined === refConId || null === refConId || "" === refConId+""){
return;
}else{
$('#' + (refId + "")).html(strHtml+"");
}
};
//3,auto run when js file is loaded finish
//在JS加载完,可在本模块尾部[return之前]运行某函数,即完成自动运行
w01.loadTip("本页文件都加载完成，本页设计 workjs01.js 文件依赖jquery, workjs02.js 依赖 workjs01.js","loadMsgCon");
//4,should be return/output a object[exports/API]
//如有需要暴露(返回)本模块API(相关定义的变量和函数)给外部其它模块使用
return {
"moduleName":moduleName
,"version": moduleVersion
}
});
注意：对应的 requireJS 和 jquery 这里没有给出，到对应的网上或官网下载放到对应目录，注意修改文件名对应即可，参见对应地方的注释；
本例虽然简单，但是基本包含了实际大部分 requireJS 知识点，注释也非常清楚，同时注意文件的组织结构、requireJS的配置的定义、调用关系、模块的写法、模块内部的写法、依赖文件的加载和调用、以及模块如何自动运行某个函数等等。
requireJS简介和一个完整实例的更多相关文章
- PHP实现视频文件上传完整实例
这篇文章主要介绍了PHP实现视频文件上传的技巧,包含了PHP配置信息的设计及大文件的处理,需要的朋友可以参考下 本文以一个完整实例的形式实现了视频文件上传的功能.虽然是比较基础的应用,仍有一定的 ...
- 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇：简介及目录》（附上完整工程文件）
G-3D引擎2D射击类游戏制作教程 游戏类型: 打飞机游戏属于射击类游戏中的一种,可以划分为卷轴射击类游戏. 视觉表现类型为:2D 框架简介: Genesis-3D引擎不仅为开发者提供一个3D游戏制作 ...
- 一个完整的Installshield安装程序实例—艾泽拉斯之海洋女神出品（四） --高级设置二
原文:一个完整的Installshield安装程序实例-艾泽拉斯之海洋女神出品(四) --高级设置二 上一篇:一个完整的安装程序实例—艾泽拉斯之海洋女神出品(三) --高级设置一4. 根据用户选择的组 ...
- html是什么？一个完整的html代码告诉你（完整实例版）
html什么意思?这篇文章主要为大家仔细的解释了HTML文档的一个基础的完整代码,还有具体的实例解释,让大家能一下就看懂HTML的基础结构和用法.下面我们一起来看看吧一.html是什么?点击查看htm ...
- 一个完整的Installshield安装程序实例-转
一个完整的Installshield安装程序实例—艾泽拉斯之海洋女神出品(一)---基本设置一 前言 Installshield可以说是最好的做安装程序的商业软件之一,不过因为功能的太过于强大,以至于 ...
- 1.1（学习笔记）Servlet简介及一个简单的实例
一.Servlet简介 Servlet是使用Java语言编写的服务器端程序,可以生产动态的Web界面. 主要运行在服务器端,Servlet可以方便的处理客户端传来的HTTP请求,并返回一个响应. 二. ...
- [转]一个完整的Installshield安装程序实例
@import url("http://files.cnblogs.com/files/go-jzg/vs.css"); --> Installshield安装程序实例—基本 ...
- puppet一个完整的实例
一个具体实例来简单说明puppet的具体结构 创建第一个配置 puppet的组成清单这主要包含这几个部分 资源,文件,模板,节点,类,定义 puppet中有个模块的定义,这个比较重要,基本是puppe ...
- 3dmax实例教程-使用3ds Max 创建一个完整的场景
本篇教程讲述了利用3ds max创建一个完整的场景. 灵感来源:当我在遇到一些事情睡不着觉的时候我便在努力想象一些别的事情,于是我便想到了这个场景,其实对于我的这个角色我即没有参考图也没有草稿图,有的 ...
随机推荐
- Charles Android 抓包失败SSLHandshake: Received fatal alert: certificate_unknown
前提: Android使用Charles抓取Https请求的报文时,Android和Charles都正确安装了证书之后出现抓包失败,报错SSLHandshake: Received fatal ale ...
- 该配置节不能包含 CDATA 或文本元素
当执行程序时报“该配置节不能包含 CDATA 或文本元素” ,有可能是你的web.config中有异常的文本节点,比如
- Log4Net的WebApplication使用
一.Log4Net的WebApplication使用 1.首先使用nuget 添加log4Net 到WebApplication项目中 log4j每个符号的具体含义:%d %5p %c{1}:%L - ...
- django配置使用redis
通常redis都是用来保存session.短信验证码.图片验证码等数据. 在django上使用redis,先要安装一个包: pip install django-redis==4.8.0(我用的dja ...
- jQuery获取标签中的元素
获取双标签之间的内容 在JavaScript中,获取双标签之间的内容是这样的: <!DOCTYPE html> <html lang="en"> <h ...
- python的一致性（1）sorted和len
每个语言,都有自己的特性,而一致性,是python语言特性重要的一个环节. 比如排序,我们不是aaa.sort(),而是 sorted(aaa),比如len,不是aaa.length(),而是len( ...
- Android 欢迎界面淡入效果并用WebView加载网址
1.首先是欢迎界面布局文件,只有一个背景图片:welcome.xml: <?xml version="1.0" encoding="utf-8"?> ...
- AC日记——LOOPS hdu 3853
3853 思路: 概率dp求期望: 代码: #include <cstdio> #include <cstring> #include <iostream> usi ...
- 转：Laravel 安装指南
Git 介绍 之所以要说 Git,就是因为 Composre 有时需要用到 Git,还是安装上比较好,Composer 暂且不表,先来了解一下 Git 吧(已经安装的童鞋跳过这里,直接看 Compos ...
- ganglia笔记：rrds目录
因为原来的rrds目录挂载的盘不够用了,所以想修改一下目录,遇到权限的问题. 在一个owner为user的目录下面新建了./ganglia/rrds目录,并且./ganglia及其子文件夹都修改为ga ...