今天就跟大家聊聊有關(guān)怎么在require.js中對路徑進行配置，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司服務(wù)項目包括萬州網(wǎng)站建設(shè)、萬州網(wǎng)站制作、萬州網(wǎng)頁制作以及萬州網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，萬州網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到萬州省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

通常一般的前端加載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文件多而大的時候，網(wǎng)頁下載就會出現(xiàn)超時，導致網(wǎng)站響應(yīng)超時，直接500，所以一個神奇的

js框架(js工具包)就出現(xiàn)了:require.js。

require.js主要解決兩個問題：

1、實現(xiàn)js的異步加載,避免js太多加載響應(yīng)時間太多導致網(wǎng)站超時，

2、管理模塊之間的依賴性,便于編寫與維護。

好了步入今天的正題，寫一個require.js用法的案例，供大家參考一下：

假設(shè)我們的項目有一個這樣的資源目錄：

第一步在index.html中引入已經(jīng)下載好的require.js

然后我們新建一個config.js來寫相應(yīng)的加在配置:

然后打開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應(yīng)該用模塊的依賴性 也就是deps

deps:['css!libs/css/color.min'] 這里會優(yōu)先加在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
}
);

現(xiàn)在好了瀏覽器打開index.html發(fā)現(xiàn)沒有把我們需要額外加在的加在進來，這個是為是么呢？好了，這里的話記得要在index.html的head下<script type="javascript/text" src="config.js"></script>后面調(diào)用require.js中的方法require，也就是加上這一句

<script type="javascript/text' >require['color']</script>//標識調(diào)用配置中的color模塊

再次訪問index.html好了完美出現(xiàn)我們想要的了。

如圖：

 

 注意

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值（輸出的變量名），表明這個模塊外部調(diào)用時的名稱；（2）deps數(shù)組，表明該模塊的依賴性。

看完上述內(nèi)容，你們對怎么在require.js中對路徑進行配置有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章名稱：怎么在require.js中對路徑進行配置
轉(zhuǎn)載來源：http://chinadenli.net/article36/ppcesg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網(wǎng)站制作、網(wǎng)頁設(shè)計公司、外貿(mào)建站、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)