标签：font 说明 找不到 meta charset tle span 编写 user
什么是 requireJS ？
requireJS 是用JavaScript编写的JS框架，主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作，可简单理解为JS文件的加载器，它非常适合在浏览器中使用，它可以确保所依赖的JS文件加载完成之后再加载当前的JS文件，这在大量使用JS文件的项目中可确保各个JS文件的先后加载顺序，确保避免了以前因某些原因某个文件加载慢而导致其它加载快的文件需要依赖其某些功能而出现某函数或某变量找不到的问题，这点非常有用，也是 requireJS 的主要价值所在吧。
快速简要了解要点：
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
//-------------------------------------------------
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 01</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 一般用这个进行主文件，进行各个文件按一定先后完成各个文件的加载；推荐注意文件个注释说明和书写格式，方便养成良好习惯和代码规范；
//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的配置的定义、调用关系、模块的写法、模块内部的写法、依赖文件的加载和调用、以及模块如何自动运行某个函数等等。
标签：font 说明 找不到 meta charset tle span 编写 user
原文地址：http://www.cnblogs.com/goloving/p/7712165.html
