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创建一个完整的场景. 灵感来源:当我在遇到一些事情睡不着觉的时候我便在努力想象一些别的事情,于是我便想到了这个场景,其实对于我的这个角色我即没有参考图也没有草稿图,有的 ...
随机推荐
- (转)自动安装VIM插件
转自: http://xwz.me/wiki/doku.php?id=vim:plugins 我的插件列表 把下面GetLatestVimScripts.dat放进~/.vim/GetLatest/目 ...
- 一道面试题：C++相比C#或者java的优势到底在哪里
被问到了这样一道面试题,当时就懵了,内心一直觉得C++肯定在很多方面要比C#或者java要牛b的. 但是真的不知道怎么回答. 问题是:你以前一直做得是.NET相关项目,现在为什么找C++开发相关工作呢 ...
- 中断处理函数中不用disable_irq而用disable_irq_nosync原因【转】
转自:http://blog.csdn.net/beyondioi/article/details/9201695 今天在写触摸屏驱动时在中断处理函数中使用disable_irq关中断发现在进入中断处 ...
- 配置Anaconda的jupyter notebook默认主页
1. 在Anaconda Prompt里输:jupyter notebook --generate-config 然后找到这个文件:C:\Users\{YOUR NAME}\.jupyter\jupy ...
- Eclipse svn代码提交冲突
Eclipse svn代码提交冲突(转) 1.Synchronize视图下查看代码冲突 1.Incoming Mode 全部update,更新到本地2.Outgoing Mode 全部commit,提 ...
- python基础之程序交互与数据类型
一.程序交互 1.什么是程序交互? name=input('输入用户名:') #无论用户输入何种内容,input都会存成字符串格式 print(name) 2.为啥要有程序交互? 让计算机能够模拟人, ...
- Parsing Netflow using Kibana via Logstash to ElasticSearch
https://www.rsreese.com/parsing-netflow-using-kibana-via-logstash-to-elasticsearch/
- Yii2中如何访问controller的二级目录下的控制器
Yii2默认的控制器下只有一层目录放在controller目录下,当开发的需要的时候需要在该目录下面新增一层目录也就是在controller下增加二级目录,比如controller/api/Membe ...
- secureCRT的自动登录设置
具体设置的步骤如下: 1. 打scrt,创建一个新的回话 2. 右击该回话选择属性,定位到左边选项卡的登录动作 3. 第一行:预期是$; 发送是ssh username@machine name 第二 ...
- PHP实现支付宝即时到账功能
本文实例为大家分享了PHP支付宝即时到账功能的实现代码,供大家参考,具体内容如下 首先需要下载即时到账交易接口,传送门https://doc.open.alipay.com/doc2/detail?t ...