RequireJS按需加載樣式文件

時間 2019-11-09

原文原文鏈接

樣式模塊化的好處

RequireJS被設計用來加載JavaScript模塊的，但是你們有沒有聯想到其實樣式文件能夠進行模塊化處理，那麼問題來了，RequireJS能不能像加載腳本文件同樣來加載樣式文件呢？php

雖然RequireJS自己沒有實現這個功能，但官網推薦了一些經常使用的插件供咱們使用，官網插件插件地址爲：http://requirejs.org/docs/plugins.html，同時在github上也有社區大量貢獻的插件：https://github.com/jrburke/requirejs/wiki/Pluginscss

固然除了引用第三方插件外，咱們也能夠動手本身寫一個相似插件，不過我在這裏要推薦一個很不錯的樣式模塊加載器require-css，其官網地址爲：https://github.com/guybedford/require-css。html

那麼咱們再來談談，樣式模塊話的好處吧，和腳本模塊化同樣，樣式模塊化也能夠作到按需加載，樣式依賴，不過對我來講最大的好處是將腳本的管理放權到前端管理，爲何這麼說呢？
之前咱們添加樣式文件都是經過link標籤引入的，而被引入的文件基本上都是jsp、php等後臺文件，這樣對與後臺不太熟悉的人來講，若是樣式文件發生改變，都要麻煩後臺開發人員。可是最懂樣式的莫過於前端開發人員了。前端

require-css的使用介紹

下面咱們經過一個簡單的例子，來介紹下require-css的用法，首先下載require-css，去到上面給出的官網地址，在頁面的右下角點擊Download ZIP按鈕，下載完成後解壓，將css.js拷貝複製到項目中去。jquery

這個簡單示例的目錄以下所示：
git

假設咱們的目的是，經過加載util模塊時，頁面先加載其依賴的樣式文件1.css。這個需求咱們常常遇到，好比咱們使用JqueryUI時，在加載其腳本模塊時，在頁面咱們也會添加上link標籤引入其相關的UI樣式文件。github

首先咱們在project.html中引入RequireJS和指定配置文件（main.js）的位置。期代碼以下所示：web

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>RequireJS簡單示例</title>
</head>
<body>
    <p id="test">如何處理依賴問題</p>
    <script src="scripts/lib/jquery-1.11.0.min.js"></script>
    <script src="scripts/require.js" data-main="scripts/main"></script>
</body>
</html>

咱們進入到main.js配置文件。main.js應該是頁面的入口文件，在這個入口文件中，指定了入口文件須要加載的模塊，同事也設置了RequireJS某些具體參數。其代碼以下所示：數組

/*入口腳本*/
require.config({
    baseUrl: "scripts/",
    paths: {
        "util": "helper/util"
    },
    waitSeconds: 15,
    map: {
        '*': {
            'css': 'lib/css'
        }
    },
    shim : {
        'util': ['css!../style/1.css']
    }
});

require(["util"], function(util) {
    // todo
});

其中咱們要特別注意map和shim的配置，"map"告訴RequireJS在任何模塊以前，都先載入這個模塊，這樣別的模塊依賴於css!../style/1.css這樣的模塊都知道怎麼處理了，shim那時幹什麼用的呢？這這個示例中，他表示util這個模塊在加載以前須要先加載1.css這個樣式文件。固然咱們也能夠在Util模塊裏直接設置他的依賴，下面將會解釋。瀏覽器

下面咱們來看看util模塊的代碼，代碼以下所示：

define(function(){
    //alert("Hello RequireJS!!");
    console.log($("#test").text());
});

這個模塊很簡單，就是經過jQuery獲取頁面id爲test的值。而且在瀏覽器的控制檯輸出來。這裏你可能感受有點奇怪。爲何你使用了jQuery可是在依賴數組中且沒有設置呢？正確的說，咱們應該這樣寫：

define(['jquery'],function(){
    //alert("Hello RequireJS!!");
    console.log($("#test").text());
});

我這樣作的目的是，用RequireJS打包時，不要將jquery打包進去，這樣就能夠減小文件的大小了。還有一個上面提出的問題，加入我不用shim這個配置時，能夠向依賴JQuery同樣，將樣式文件寫到define的依賴數組中去。其代碼以下：

define(['css!../style/1.css'],function(){
    //alert("Hello RequireJS!!");
    console.log($("#test").text());
});

不過你應該一眼就能看出來，那種寫法比較好吧，我比較推薦，將依賴寫到shim配置中去。

一切配置就緒，在瀏覽器中打開project.html頁面，運行結果如圖所示：

幫助文檔

http://tech.techweb.com.cn/thread-622052-1-1.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。