require.js入門指南(三)

時間 2019-12-01

標籤 require.js require 入門指南欄目 JavaScript 简体版

原文原文鏈接

下面咱們來講說main.js.html

前面沒有用到,由於例子比較簡單.當咱們的js文件夾中包含多個文件時,每次require都要寫 (路徑名/文件名) 這樣的require()參數,很麻煩.並且,直接把js代碼寫在頁面中,也是很差的.jquery

咱們就能夠用main.js設置參數,簡化操做,並把頁面須要的js代碼寫在其中.web

如今咱們在js文件夾下新建一個文件夾,命名爲lib,並把jquery.js移動至這個目錄下.這個文件夾就用來存放全部的庫文件,也方便維護和管理.canvas

目錄結構變成了下面這樣子:ruby

若是咱們不使用main.js,那麼index.html想引用jquery,要像下面這樣寫:app

<!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <script src="js/require.js"></script>
            <title>requireJS</title>
            <script>
            require(['js/lib/jquery'],function(jquery){
                alert($().jquery);
            })
            </script>
        </head>
            <body>

            </body>
    </html>

運行結果如圖: ide

若是有多個文件須要引入的話,寫起來比較長,不方便.requirejs

這時候咱們就能夠在main.js裏面設置路徑,下面是main.js的代碼ui

require.config({
    baseUrl:'./js',
    paths:{
        jquery:'./lib/jquery',
    }
});

這裏須要解釋一下:spa

baseUrl :通常指的是main.js相對與index.html的路徑 ,我這裏就是./js
paths: 鍵名就是模塊的名字,或者叫ID,值就是這個模塊相對與baseUrl的路徑加上模塊文件的名稱(不加.js後綴).

下面是引入index.html頁面中的方法:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="js/require.js" data-main="js/main"></script>
    <title>requireJS</title>
　　<script>
        require(['jquery'],function(jq){
            alert($().jquery);
        });
    </script>
</head>
<body>

</body>
</html>

說明:

咱們並無像引入其它JS那樣用script標籤把main.js引入.
這是requireJS指定的方法,能夠查看文檔.
在data-main後面引入main.js文件.格式一樣是相對與當前html頁面的路徑 / 入口文件名(不加後綴,這裏是main).

這時候requirejs的文件路徑就配置好了.可是若是咱們在頁面中使用的話,會出現如下問題:

咱們剛剛在main.js中配置了jquery.js的paths,難道出了什麼問題?

實際上是由於路徑是在main.js配置的,只對main.js中的模塊生效. 而咱們的代碼也不該該寫在html頁面中,而是寫在main.js中.

這樣咱們只須要在頁面中引入main.js,main.js中再對須要的模塊進行請求,模塊都加載完畢後,執行main.js中的callback,也就是第二個參數中的代碼.

如此就實現了js文件的統籌管理,按需加載.

代碼以下:

main.js中的代碼以下:

require.config({
    baseUrl:'js',
    paths:{
        jquery:'lib/jquery',
    }
});
require(['jquery'],function(jq){
            alert($().jquery);
        });

運行效果以下:

相關標籤/搜索

每日一句

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