前端开发近一两年发展迅速，JavaScript作为主流开发语言，获得了前所未有的普及。出现了大量的前端框架，试图解决前端开发中的一些常见问题，但实现方式各不相同。通常，一般前端加载js文件是这样的：

脚本类型=' text/Javascript ' src=' http : js/js1 . js '/script script type=' text/Javascript ' src=' http : js/js2 . js '/script script type=' text/Javascript ' src=' http : js/js3 . js '/script script type=' text/Javascript ' src=' http 3360 js/js4 . js '/script script然而，当一个项目非常大时，会引入许多js文件，这使得它看起来不美观且效率低下。当js文件较多时，网页下载会超时。

js框架(js工具包)显示为：require.js

require.js主要解决两个问题：

1.实现js的异步加载，避免过多的js加载和过多的响应时间导致网站超时。

2.管理模块之间的依赖关系，使其易于编写和维护。

好了，进入今天的主题，写一个require.js用法的案例，供大家参考：

假设我们的项目有这样一个资源目录：

第一步是将下载的require.js引入index.html

然后我们创建一个新的config.js来编写配置：中相应的add

然后打开config.js，编写如下代码：

require . config({ baseurl : '/data/points/'，//配置基目录URL args 3360 ' v='(new date())。gettime()，//清晰缓存路径： { ' CSS ' 3360 ' 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:libs/css/amazeui.min '，' css！style/common '，' css！style/footer']，}，' color ' : { deps 3360[' 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(窗口类型==' undefined ')返回{ load:函数(n，r，load){ load()} }；var head=文档。getelementsbytagname(' head ')[0]；定义变量引擎=window.navigator.useragent.match(/trident/([^；]*)|applewebkit/([^；]*)|opera/([^；]*)|rv:([^；]*)(.*?)gecko/([^；]*)|msies([^；]*)/) || 0;var useImportLoad=false var useOnload=true if(引擎[1] ||引擎[7])useImportLoad=parsent(引擎[1])6 | | parsent(引擎[7])=9;否则如果(引擎[2])useOnload=false；否则如果(引擎[4])useImportLoad=parsent(引擎[4])18;var cssAPI={ }；cssAPI.pluginBuilder=' ./CSS-builder '；var curs tyle var create style=function(){ curs style=document。创建元素(“样式”)；头部。append child(curStyle)}；var importLoad=函数(url，回调){创建样式()；var curs工作表=curs样式。样式表| | curs tyle . sheet if(curs sheet curs sheet。addimport){ curs sheet。addimport(网址)；curs风格。onload=callback } else { curs tyle。文本内容=' @ import ' ' URLvar loadInterval=setInterval(function(){ try { curst style }。床单。cssruersclearInterval(加载间隔)；callback() } catch (e) { } }，10)} }；var linkLoad=函数(url，回调){ var link=document。create element(' link ')；链接。type=' text/CSS '；link.rel='样式表；if(useOnload)链接。onload=function(){ link。onload=function(){ }；setTimeout(回调，7)};else var loadInterval=setInterval(函数(){ for(var I=0；我记录。样式表。长度；I){ var sheet=document。样式表[I]；if(表。href==链接。href){ clearInterval(加载间隔)；return callback() } } }，10)；link.href=urlhead。append child(link)}；cssAPI.normalize=function (name，normalize){ if(name。substr(名称。长度-4，4)=' .css ')名称=name.substr(0，name。长度-4)；返回normalize(name)}；cssAPI.load=function (cssId，req，load，config) { (useImportLoad？导入LoAd : LinkLoAd()。请求。图尔(CSSid ' .css ')、load)}；返回CSSAPI })；现在好了浏览器打开index.html发现没有把我们需要额外加在的加在进来，这个是为是么呢？好了，这里的话记得要在index.html的头下脚本类型=' JavaScript/text ' src=' http : config。js /脚本后面调用require.js中的方法需要，也就是加上这一句

脚本类型='javascript/text '需要['color']/script//标识调用配置中的颜色模块再次访问index.html好了完美出现我们想要的了。

如图：

注意

index.html中引入的顺序不能打乱

脚本类型=' text/JAVAScript ' src=' http : config。js /脚本脚本类型=' text/JAVAScript ' src=' http : require。js /脚本脚本类型=' text/JavaScript '需要([' color '])；/scriptrequire.config()接受一个配置对象，这个对象除了有前面说过的小路属性之外，还有一个夹铁属性，专门用来配置不兼容的模块。具体来说，每个模块要定义(1)出口值（输出的变量名),表明这个模块外部调用时的名称；(2)部门数组，表明该模块的依赖性。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。