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创建一个完整的场景. 灵感来源:当我在遇到一些事情睡不着觉的时候我便在努力想象一些别的事情,于是我便想到了这个场景,其实对于我的这个角色我即没有参考图也没有草稿图,有的 ...
随机推荐
- v4l2 Camera详细设置【转】
转自:http://blog.csdn.net/smilefyx/article/details/39555289 转载自:http://blog.sina.com.cn/s/blog_602f877 ...
- SpringBoot集成整合pageHelper分页插件
今天来讲讲springboot 集成 pagehelper插件, 引入jar 依赖包 <!-- 分页插件 --><dependency> <groupId>com. ...
- krpano--控制热点跳转到场景的指定视角
krpano课堂(肥宗) · 2015-07-13 19:32 有这么一种情况,假设我们用三个场景,这三个场景恰好是一条街道的同一方向的三个拍摄点.如上图. 我们可以通过设置A.B.C三个场景中的vi ...
- SFTP获取数据文件
使用SFTP:客户端从服务端获取数据文件 客户机: 用户:client IP:13.00.00.11 服务端: 用户:server IP:16.00.00.66 1.在客户端的根目录下,执行下面的命令 ...
- 网站js埋点
js埋点 1.埋点作用: 页面埋点的作用:其实就是用于流量分析.而流量的意思,包含了很多:页面浏览数(PV).独立访问者数量(UV).IP.页面停留时间.页面操作时间.页面访问次数.按钮点击次数.文 ...
- opencv inrange 和 mix
opencv inrange: http://blog.csdn.net/xiaoyufei117122/article/details/53572904 http://blog.csdn.net/w ...
- 【基数排序】Divide by Zero 2017 and Codeforces Round #399 (Div. 1 + Div. 2, combined) C. Jon Snow and his Favourite Number
发现值域很小,而且怎么异或都不会超过1023……然后可以使用类似基数排序的思想,每次扫一遍就行了. 复杂度O(k*1024). #include<cstdio> #include<c ...
- 【分块】bzoj3295 [Cqoi2011]动态逆序对
考虑每次删除pos位置一个数x后,所造成的的影响就是,逆序对的个数少了在1~pos-1中大于x的数的个数加上pos+1~n中小于x的数的个数. 那么我们需要的操作就只有查询区间内比某数大(小)的个数. ...
- 倒置输入的数 Exercise07_02
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:倒置输入的数 * */ public class Exercise07_0 ...
- ajax变量作用域的问题
需求:使得一个变量在ajax内外都有作用域 方法:设置为同步请求 async:false