javascript模塊化之require.js

時間 2019-11-14

標籤 javascript 模塊化 require.js require 欄目 JavaScript 简体版

原文原文鏈接

require.js是一款很流行的模塊加載器，它能夠模塊化你的js代碼，提升你的開發效率和代碼質量；使用它開發可以很好的處理模塊之間的依賴性，方便維護；異步加載js文件，避免頁面加載時因爲要順序加載包括js文件，出現不響應等很差的用戶體驗！html

require.js入門jquery

1.從官網下載最新版本；數組

2.將文件引入到頁面中，假設項目目錄以下：異步

在index.html中引入require.js.參考寫法:模塊化

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>requirejs test</title>
 5         <meta charset="utf-8">
 6         <script data-main="./js/main" src="./js/require.js"></script>
 7     </head>
 8     <body>
 9          
10     </body>
11 </html>

data-main屬性的做用是指定入口文件，main.js只是一個示例，能夠隨意指定文件名，此時main.js會首先被加載。函數

3.main.js如何寫？requirejs

1 require.config({
2     paths: {
3        jquery:'./jquery'
4     }
5 });
6  
7 require(['jquery'], function($) {
8     console.log($);
9 });

require.config用於配置一些參數，如基礎路徑baseUrl，路徑path，圖中所示爲配置jquery的文件路徑；ui

require函數接收兩個參數，第一個參數爲數組，即引入依賴模塊，第二個參數爲回調函數，在所引入的依賴模塊加載完成後執行；spa

依次加載所需模塊管理好依賴性；模塊的加載爲異步加載，解決了阻塞問題。code

注意：require引入模塊需知足AMD規範，即模塊語法爲：

define(['依賴的模塊'],function(a){
　　var b = a.saf;
　　return b;
})

若文件沒有依賴於其餘模塊可直接寫爲：

define(function(){
    var num = 1+5;
    return num;
})

requirejs也能夠加載一些不符合AMD規範的文件，加載這樣的文件時，需作一些配置

在require.config裏配置shim項，寫好需引入文件的文件名稱，導出接口，依賴文件便可。

參考博文：www.requirejs.org，http://www.ruanyifeng.com/blog/2012/11/require_js.html

相關標籤/搜索

每日一句

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