前端开发在近一两年发展的非常快，javascript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一 些前端开发中的共性问题，但是实现又不尽相同。通常一般的前端加载js文件都是这样 :
<script type="text/javascript" src="js/js1.js"></script> <script type="text/javascript" src="js/js2.js"></script> <script type="text/javascript" src="js/js3.js"></script> <script type="text/javascript" src="js/js4.js"></script>
但是当一个项目特别大的时候 引入的js文件就特别多，这样看起来不雅观，并且不高效，当js文件多而大的时候，网页下载就会出现超时，导致网站响应超时，直接500，所以一个神奇的
js框架(js工具包)就出现了:require.js。
require.js主要解决两个问题：
1、实现js的异步加载,避免js太多加载响应时间太多导致网站超时，
2、管理模块之间的依赖性,便于编写与维护。
好了步入今天的正题，写一个require.js用法的案例，供大家参考一下：
假设我们的项目有一个这样的资源目录：
第一步在中引入已经下载好的require.js
然后我们新建一个config.js来写相应的加在配置:
然后打开config.js里面写入代码如下:
我要评论
require.config({
baseurl:'/data/points/',//配置基目录
urlargs:'v='+(new date()).gettime(),//清楚缓存
paths:{
'css': 'libs/js/css.min',
'jquery': 'libs/js/jquery-1.11.1.min',
'vur': 'libs/js/vue.min',
'amazeui': 'libs/js/amazeui.min',
'color': 'libs/js/color.min'
},
shim:{
'amazeui':{
deps: ['jquery','css!libs/css/amazeui.min','css!style/common','css!style/footer'],
},
'color':{
deps:['css!libs/css/color.min']
}
}
});
其中加入css应该用模块的依赖性 也就是deps
deps:['css!libs/css/color.min'] 这里会优先加在css这个模块名下的文件(libs/js/css.min.js) 然后一个 "!"后面紧接着在基目录下加在libs/css/color.min.css
其中css.min.js这个是一个依赖模块js,这里面是写了一个加载css文件的方法，
具体css.min.js
define(
function () {
if (typeof window == "undefined")return {
load: function (n, r, load) {
load()
}
};
var head = document.getelementsbytagname("head")[0];
var engine = window.navigator.useragent.match(/trident\/([^ ;]*)|applewebkit\/([^ ;]*)|opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)gecko\/([^ ;]*)|msie\s([^ ;]*)/) || 0;
var useimportload = false;
var useonload = true;
if (engine[1] || engine[7])useimportload = parseint(engine[1]) < 6 || parseint(engine[7]) <= 9; else if (engine[2])useonload = false; else if (engine[4])useimportload = parseint(engine[4]) < 18;
var cssapi = {};
cssapi.pluginbuilder = "./css-builder";
var curstyle;
var createstyle = function () {
curstyle = document.createelement("style");
head.appendchild(curstyle)
};
var importload = function (url, callback) {
createstyle();
var cursheet = curstyle.stylesheet || curstyle.sheet;
if (cursheet && cursheet.addimport) {
cursheet.addimport(url);
curstyle.onload = callback
} else {
curstyle.textcontent = '@import "' + url + '";';
var loadinterval = setinterval(function () {
try {
curstyle.sheet.cssrules;
clearinterval(loadinterval);
callback()
} catch (e) {
}
}, 10)
}
};
var linkload = function (url, callback) {
var link = document.createelement("link");
link.type = "text/css";
link.rel = "stylesheet";
if (useonload)link.onload = function () {
link.onload = function () {
};
settimeout(callback, 7)
}; else var loadinterval = setinterval(function () {
for (var i = 0; i < document.stylesheets.length; i++) {
var sheet = document.stylesheets[i];
if (sheet.href == link.href) {
clearinterval(loadinterval);
return callback()
}
}
}, 10);
link.href = url;
head.appendchild(link)
};
cssapi.normalize = function (name, normalize) {
if (name.substr(name.length - 4, 4) == ".css")name = name.substr(0, name.length - 4);
return normalize(name)
};
cssapi.load = function (cssid, req, load, config) {
(useimportload ? importload : linkload)(req.tourl(cssid + ".css"), load)
};
return cssapi
}
);
现在好了浏览器打开发现没有把我们需要额外加在的加在进来，这个是为是么呢？好了，这里的话记得要在的head下<script type="javascript/text" src="config.js"></script>后面调用require.js中的方法require，也就是加上这一句
<script type="javascript/text' >require['color']</script>//标识调用配置中的color模块
再次访问好了完美出现我们想要的了。
如图：
注意
中引入的顺序不能打乱
<script type="text/javascript" src="config.js"></script> <script type="text/javascript" src="require.js"></script> <script type="text/javascript">require(['color']);</script>
require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
asp.net中ajax和一般处理程序（handler.ashx）的交互
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
网友评论