Require,js配置使用心得

首先你們要知道requirejs是幹嗎用的，要解釋，那就用一句話說下：RequireJS是一個JavaScript文件和模塊加載器

接下來咱們開始學會配置使用requireJs，固然在學習使用的過程當中也遇到了不少坑，不論是百度仍是什麼方法最終解決了，因此分享給你們，也方便下次使用時忘掉！

一、首頁看一下我本身建的項目目錄結構，這對接下來配置requireJs有很大的做用

二、下載requireJs及requireJs-text.js，將requirejs引入html文件中

設置async="true"的做用很明顯和jq的ajax中async：true的目的是同樣的，就是一邊加載RequireJs一邊執行它，若是設置爲false的話則會等待ReuireJs徹底加載完成採起執行它的方法，這會有很大可能致使頁面剛開始一片空白，對於一個開發者來講，好像不是很友好。固然若是你script標籤不在head裏而在頁面的最尾部，那你設不設置都是同樣的，由於他最好纔會加載，我並不建議你們這樣作；data-main="scripts/main"的做用是申明RequireJs會去scripts目錄下去找main.js文件，一般main.js是項目目錄以及全局配置文件，這裏也不例外
三、接下來咱們該設置全局配置以及文件路勁了（main.js）

baseUrl    是設置你項目的路徑，在接下來的路勁配置中都會以baseUrl設置的路勁做爲相對路徑去查找，請注意，這是個人文件目錄下，個人require.js和全局配置文件（main.js）都是放在scripts目錄下的

paths   是預加載js文件的配置項，通常狀況都是不用寫後綴名的，固然你的注意你的文件路勁，這裏是個人文件路徑，個人全部本地腳本都放在了js文件夾下，因此就是相對baseUrl的路徑的上一目錄的js目錄下，
你也能夠引入html文件，在引入hrml文件是你的確保你已經有而且引入text.js文件了，固然我把text.js放在了scripts目錄下，因此之間去找同級就能夠了

waitSeconds  設置的數值的做用的在這個時間段內若是沒有加載成功或路徑沒有找到RequireJs會本身認爲加載失敗
四、如今咱們看看如何引入css全局文件以及按需加載響應文件

就像圖片上看到的同樣，必須設置map爲全局（*）配置css的引入js，個人這個js文件顯然是放在baseUrl的同級目錄下的，文件名爲：css.min，這個是引入css必須的文件
加下來你會看到shim選項下有一個Btn數組配置了一堆css路勁，而這個Btn你也會發如今paths選項下我有配置，引入了本身的一個js，在這個js（Setting.js）是我項目必需要使用到的全局js文件，能夠是我本身封裝的方法以及第三方方法之類的，使用它作鍵值名的緣由就是當我執行或者使用這個js文件是，下面數組裏我配置的css文件就會所有引入到頁面，好處很明顯就是能夠用做全局樣式的引入
下面的bootstrap以及swiper的就是按需加載方法的例子，前面的jquery說明bootstrap是要依賴於jquery的，使用css!的方法就是會去相對路徑去找這個css，而你會發現bootstrap的對象名適合上面paths配置項下的bootstrap的配置名是一致的，特別須要注意的是你的文件的路徑，這裏是個人項目目錄所對應的文件路徑。
固然你也可使用這種方法去當個加載一個css樣式，可是這是很是麻煩的

define(["require"], function(require) {
    var cssUrl = require.toUrl("./css/Style.css");
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = cssUrl;
    document.getElementsByTagName("head")[0].appendChild(link);
});

　　五、接下來就是你該如何使用剛纔配置的js以及css了
Requirejs提供的方法很簡單

require( ['jquery','bootstrap','Btn'],function($,bootstrap,Btn) {
    console.log(Btn)
    $('#Nav').html('style'me)
})  

　　你會發現對象的參數都是你剛纔配置文件路徑起的名字，就是jquery,後面函數的參數適合對象裏的參數一一對應的，像jquery使用的是$，那咱們傳$就表明着在方法內咱們已經可使用jquery方法了，Btn是個人全局本地js文件，不作任何操做只須要引進來就好了，這時候咱們在Btn配置的js中也就是Setting.js直接可使用jquery的方法了，也就是啓動了RequireJs，看圖，bootstrap已經能夠用了

並且我Setting.js的方法生效啦

瀏覽器顯示點擊黑色的盒子已經執行的方法

六、接下來就是如何引入以及使用html的模板了
首先你會看到我已經在paths下配置過兩個html頁面了，名字分別爲page1和page2，在這個基礎上配置了text的選項，由於引入html文件是依賴text.js的
用法也很簡單，跟啓動RequireJs同樣的，須要傳參到數組裏，而且在函數裏傳入相應的參數就可使用了
這是text.html和test1.html兩個文件

參數接收傳入直接使用

require( ['jquery','bootstrap','Btn','text!page1','text!page2'],function($,bootstrap,Btn,template,template1) {
    $('#Btn').bind('click',function(){
        $('#Nav').html(template)
    })
    $('#Btn1').bind('click',function(){
        $('#Nav').html(template1)
    })
}) 

　　點擊兩個按鈕能夠分別加載不一樣的html模板到頁面來也是不錯的

嗯，就先說這些，固然還有不少，好比說r.js打包，build.js配置，歡迎留言交流！

 

//想一塊兒學習交流的歡迎來qq羣：565996731（申請註明來自博客園）