详解require.js配置路径的用法和css的引入
前端开发在近一两年发展的非常快,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用法的案例,供大家参考一下:
假设我们的项目有一个这样的资源目录:
第一步在index.html中引入已经下载好的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 } );
现在好了浏览器打开index.html发现没有把我们需要额外加在的加在进来,这个是为是么呢?好了,这里的话记得要在index.html的head下<script type="javascript/text" src="config.js"></script>后面调用require.js中的方法require,也就是加上这一句
<script type="javascript/text' >require['color']</script>//标识调用配置中的color模块
再次访问index.html好了完美出现我们想要的了。
如图:
注意
index.html中引入的顺序不能打乱
<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数组,表明该模块的依赖性。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 曾伏虎:迎接变革浪潮 掘金互联网数据时代
下一篇: 手牵手开心的去美食一条街
推荐阅读
-
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
-
详解require.js配置路径的用法和css的引入
-
详解在vue-cli3.0中自定css、js和图片的打包路径
-
详解css3中的伪类before和after常见用法
-
Unity 2019.3中为Sprite新引入的“Secondary Texture”中比较特殊的“Normal Map”和“Mask Texture”的用法详解
-
id、name、class在html和css中的区别用法详解
-
zend framework 模板引入public路径下的css、js等文件路径问题和模板上生成url的方法
-
require.js的路径配置和css的引入方法详解
-
id、name、class在html和css中的区别用法详解
-
zend framework 模板引入public路径下的css、js等文件路径问题和模板上生成url的方法