首頁 > web前端 > js教程 > 主體

require.js內引入css使用步奏詳解

php中世界最好的语言
發布: 2018-04-18 11:56:03
原創
1809 人瀏覽過

這次帶給大家require.js內引入css使用步奏詳解,require.js內引入css使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

JavaScript的使用中,require.js能提供非常不錯的使用效果,這次,文章就重點給大家分享下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 = &#39;@import "&#39; + url + &#39;";&#39;;
      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,也就是加上這一句

<script type="javascript/text&#39; >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數組,表示該模組的依賴性。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

WebStorm ES6怎麼使用babel

JS把list轉換成樹狀結構

#

以上是require.js內引入css使用步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!