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轉換成樹狀結構