require.js

require.js實踐基礎

前面說了那麼多，最後才說到require.js的最佳實踐。

1）使用 define() 定義符合require規範的模塊；

2）使用require.config() 配置模塊ID和它對應的js模塊所在文件路徑；require.config()是將define()定義的模塊和require()依賴的模塊鏈接起來；

3）使用require()指定其所依賴的模塊，在回調中實現頁面上須要的功能，固然define()函數也須要指定其所依賴的模塊；

     require()和define()函數其實十分類似，都指定依賴的模塊，都有回調函數；

4）使用r.js合併優化。這裏最重要。合併優化涉及到一個取捨問題，好比前面的 jquery.min.js 是否應該被合併進去呢？由於jquery.min.js是一個通用的js庫文件，那麼其實幾乎每個頁面都須要改文件，那麼其實咱們只是在第一次訪問該網站時，須要下載一次jquery.min.js文件，其後使用的都是緩存中的，status都是304；可是若是咱們每一個頁面都將 jquery.min.js 合併進該頁面的惟一的 js 文件，那麼jquery.min.js就會被每一個頁面所下載，由於每一個頁面都合併了它。我的是以爲不該該將jquery.min.js這樣的通用庫合併進去的，而是應該放入cnd中，這樣既不會受到瀏覽器訪問同一個域名時，併發數量的限制，也能夠使其可以被緩存。可是 304 好像也是須要發送一次http/https請求的？因此如何取捨呢？CSS文件bootstrap.min.css也遇到類似的取捨問題。

我的傾向於不合並jquery.min.js和bootstrap.min.css等相似的基礎文件。因此最佳require.js的實踐就是，每一個頁面只引入一個js文件，該js文件不合並jquery.min.js文件以及相似的js文件，合併其它全部依賴的js文件。每一個頁面除了bootstrap.min.css相似的基礎文件須要的<link >以外，還引入一個合併其它全部須要的css文件的<link>標籤。

7. 關於壓縮

關於壓縮，上面說到了使用 r.js 進行壓縮是指去掉空格，空行，將長變量名換成短的等等；壓縮還有另一層壓縮：配置tomcat或者nginx/apache等web服務器，也是能夠配置對CSS/JS/HTML等進行壓縮的，通常瀏覽器都支持(能解壓)服務器端進行的gzip壓縮。

2.require.js的加載

2、require.js的加載

使用require.js的第一步，是先去官方網站下載最新版本。

下載後，假定把它放在js子目錄下面，就能夠加載了。

　　<script src="js/require.js"></script>

有人可能會想到，加載這個文件，也可能形成網頁失去響應。解決辦法有兩個，一個是把它放在網頁底部加載，另外一個是寫成下面這樣：

　　<script src="js/require.js" defer async="true" ></script>

async屬性代表這個文件須要異步加載，避免網頁失去響應。IE不支持這個屬性，只支持defer，因此把defer也寫上。

加載require.js之後，下一步就要加載咱們本身的代碼了。假定咱們本身的代碼文件是main.js，也放在js目錄下面。那麼，只須要寫成下面這樣就好了：

　　<script src="js/require.js" data-main="js/main"></script>

data-main屬性的做用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。因爲require.js默認的文件後綴名是js，因此能夠把main.js簡寫成main。

 

3.加載非規範的模塊

不符合amd規範的函數庫

舉例來講，underscore和backbone這兩個庫，都沒有采用amd規範編寫。若是加載的話，須要先定義他們的特徵。

require.config({ //shim專門用來配置不兼容的模塊 shim:{ 'underscore':{ exports:'_' }, 'backbone':{ deps:['underscore','jquery'], exports:'Backbone' } } })