最早的時候,所有Javascript程式碼都寫在一個檔案裡面,只要載入這一個檔案就夠了。後來,程式碼越來越多,一個檔案不夠了,必須分成多個檔案,依次載入。下面的網頁程式碼,相信很多人都見過。 這段程式碼依次載入多個js檔案。這樣的寫法有很大的缺點。首先,載入的時候,瀏覽器會停止網頁渲染,載入檔案越多,網頁失去響應的時間就會越長;其次,由於js檔案之間存在依賴關係,因此必須嚴格保證載入順序(比如上例的1.js要在2.js的前面),依賴性最大的模組一定要放到最後載入,當依賴關係很複雜的時候,程式碼的編寫和維護都會變得困難。require.js的誕生,就是為了解決這兩個問題: (1)實現js檔案的非同步載入,避免網頁失去響應; (2)管理模組之間的依賴性,便於程式碼的編寫和維護。二、require.js的載入使用require.js的第一步,是先去官方網站下載最新版本。下載後,假定把它放在js子目錄下面,就可以載入了。 有人可能會想到,載入這個檔案,也可能造成網頁失去響應。解決辦法有兩個,一個是把它放在網頁底部載入,另一個是寫成下面這樣: async屬性表明這個檔案需要非同步載入,避免網頁失去響應。IE不支援這個屬性,只支援defer,所以把defer也寫上。載入require.js以後,下一步就要載入我們自己的程式碼了。假定我們自己的程式碼檔案是main.js,也放在js目錄下面。那麼,只需要寫成下面這樣就行了: data-main屬性的作用是,指定網頁程式的主模組。在上例中,就是js目錄下面的main.js,這個檔案會第一個被require.js載入。由於require.js預設的檔案字尾名是js,所以可以把main.js簡寫成main。
最早的時候,所有Javascript程式碼都寫在一個檔案裡面,只要載入這一個檔案就夠了。後來,程式碼越來越多,一個檔案不夠了,必須分成多個檔案,依次載入。下面的網頁程式碼,相信很多人都見過。 這段程式碼依次載入多個js檔案。這樣的寫法有很大的缺點。首先,載入的時候,瀏覽器會停止網頁渲染,載入檔案越多,網頁失去響應的時間就會越長;其次,由於js檔案之間存在依賴關係,因此必須嚴格保證載入順序(比如上例的1.js要在2.js的前面),依賴性最大的模組一定要放到最後載入,當依賴關係很複雜的時候,程式碼的編寫和維護都會變得困難。require.js的誕生,就是為了解決這兩個問題: (1)實現js檔案的非同步載入,避免網頁失去響應; (2)管理模組之間的依賴性,便於程式碼的編寫和維護。二、require.js的載入使用require.js的第一步,是先去官方網站下載最新版本。下載後,假定把它放在js子目錄下面,就可以載入了。 有人可能會想到,載入這個檔案,也可能造成網頁失去響應。解決辦法有兩個,一個是把它放在網頁底部載入,另一個是寫成下面這樣: async屬性表明這個檔案需要非同步載入,避免網頁失去響應。IE不支援這個屬性,只支援defer,所以把defer也寫上。載入require.js以後,下一步就要載入我們自己的程式碼了。假定我們自己的程式碼檔案是main.js,也放在js目錄下面。那麼,只需要寫成下面這樣就行了: data-main屬性的作用是,指定網頁程式的主模組。在上例中,就是js目錄下面的main.js,這個檔案會第一個被require.js載入。由於require.js預設的檔案字尾名是js,所以可以把main.js簡寫成main。