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创建一个完整的场景. 灵感来源:当我在遇到一些事情睡不着觉的时候我便在努力想象一些别的事情,于是我便想到了这个场景,其实对于我的这个角色我即没有参考图也没有草稿图,有的 ...
随机推荐
- Linux设备模型(3)_Uevent【转】
转自:http://www.wowotech.net/device_model/uevent.html 1. Uevent的功能 Uevent是Kobject的一部分,用于在Kobject状态发生改变 ...
- word-wrap
平时的网页制作中碰到过这样的情况,比如说在blog中制作了一个完美而且又靓丽的评论布局,让你的用户浏览网页是可以给你添加评论,但当有人发布了一个原始网址或者其它超长的文本时,你此时的布局就被他们给彻底 ...
- html中给元素添加背景图片或者gif动图
添加背景图片有四种常用的方式,分别是: repeat 完全平铺 repeat-x 横向平铺 repeat-y 纵向平铺 no-repeat 不平铺 使用示例: <!DOC ...
- MYSQL数据库的数据完整性
#转载请联系 数据库中存储的数据应该符合我们的预期, 这就是数据完整性. 那么如何实现数据完整性? 我们通过以下两方面来实现数据的完整性: 数据类型: 存储在数据库中的所有数据值均正确的状态.如果数据 ...
- selenium 下拉框处理
web应用中有很多时候我们会遇见<select></select>标签的下列列表框,一般是无法直接去操作下列列表中的选择的.selenium webdriver 提供了专门操作 ...
- pytest学习（2）
可以把多个test放在一个class里, class TestClass(object): def test_one(self): x = "this" assert 'h' in ...
- 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器
<锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...
- 只用120行Java代码写一个自己的区块链-4实现真正的p2p网络
在之前的文章中,我们模拟了节点网络通讯,很多朋友反馈说,他们想看真正的节点网络通讯而不是单节点的模拟.本章将满足你们.
- 训练指南 UVA- 11865（有向最小生成树 + 朱刘算法 + 二分）
layout: post title: 训练指南 UVA- 11865(有向最小生成树 + 朱刘算法 + 二分) author: "luowentaoaa" catalog: tr ...
- Don't Be a Subsequence
问题 F: Don't Be a Subsequence 时间限制: 1 Sec 内存限制: 128 MB提交: 33 解决: 2[提交] [状态] [讨论版] [命题人:] 题目描述 A sub ...