require.js引入css文件,require.js内引入css使用步奏详解

这次给大家带来require.js内引入css使用步奏详解，require.js内引入css使用的注意事项有哪些，下面就是实战案例，一起来看一下。

在JavaScript的使用中，require.js能提供非常不错的使用效果，这次，文章就重点给大家分享下require.js配置路径以及引入css的操作心得，希望对大家有所帮助。

前端开发在近一两年发展的非常快，JavaScript作为主流的开发语言得到了前所未有的热捧。大量的前端框架出现了，这些框架都在尝试着解决一 些前端开发中的共性问题，但是实现又不尽相同。通常一般的前端加载js文件都是这样 :

但是当一个项目特别大的时候 引入的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.jsdefine(

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下后面调用require.js中的方法require，也就是加上这一句

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义(1)exports值(输出的变量名)，表明这个模块外部调用时的名称；(2)deps数组，表明该模块的依赖性。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

WebStorm ES6怎么使用babel

JS把list转换成树状结构