RequireJS入門（一）轉

時間 2019-12-08

標籤 requirejs 入門欄目 JavaScript 简体版

原文原文鏈接

RequireJS由James Burke建立，他也是AMD規範的創始人。javascript

RequireJS會讓你以不一樣於往常的方式去寫JavaScript。你將再也不使用script標籤在HTML中引入JS文件，以及不用經過script標籤順序去管理依賴關係。html

固然也不會有阻塞（blocking）的狀況發生。好，以一個簡單示例開始。java

新建一個目錄，結構以下jquery

目錄r1下有index.html、jquery-1.7.2.js、main.js、require.js。require.js和jquery-1.7.2.js去各自官網下載便可。git

index.html以下github

 
        <!doctype html> 
       
        <html> 
       
        <head> 
       
        <title>requirejs入門（一）</title> 
       
        <meta charset= 
        "utf-8" 
        > 
       
        <script data-main= 
        "main"  
        src= 
        "require.js" 
        ></script> 
       
        </head> 
       
        <body> 
       
        </body> 
       
        </html>

使用requirejs很簡單，只須要在head中經過script標籤引入它（實際上除了require.js，其它文件模塊都再也不使用script標籤引入）。web

細心的同窗會發現script標籤上了多了一個自定義屬性：data-main="main"，等號右邊的main指的main.js。固然能夠使用任意的名稱。這個main指主模塊或入口模塊，比如c或java的主函數main。apache

main.js以下api

 
        require.config({ 
       
        paths: { 
       
        jquery:  
        'jquery-1.7.2' 
       
        } 
       
        }); 
       
        require([ 
        'jquery' 
        ],  
        function 
        ($) { 
       
        alert($().jquery); 
       
        });

main.js中就兩個函數調用require.config和require。數組

require.config用來配置一些參數，它將影響到requirejs庫的一些行爲。

require.config的參數是一個JS對象，經常使用的配置有baseUrl，paths等。

這裏配置了paths參數，使用模塊名「jquery」，其實際文件路徑jquery-1.7.2.js（後綴.js能夠省略）。

咱們知道jQuery從1.7後開始支持AMD規範，即若是jQuery做爲一個AMD模塊運行時，它的模塊名是「jquery」。注意「jquery」是固定的，不能寫「jQuery」或其它。

注：若是文件名「jquery-1.7.2.js」改成「jquery.js」就沒必要配置paths參數了。

jQuery中的支持AMD代碼以下

 
        if  
        (  
        typeof  
        define ===  
        "function"  
        && define.amd && define.amd.jQuery ) { 
       
        define(  
        "jquery" 
        , [],  
        function  
        () {  
        return  
        jQuery; } ); 
       
        }

咱們知道jQuery最終向外暴露的是全局的jQuery和 $。以下

 
        // Expose jQuery to the global object 
       
        window.jQuery = window.$ = jQuery;

若是將jQuery應用在模塊化開發時，其實能夠不使用全局的，便可以不暴露出來。須要用到jQuery時使用require函數便可，

這裏require函數的第一個參數是數組，數組中存放的是模塊名（字符串類型），數組中的模塊與回調函數的參數一一對應。這裏的例子則只有一個模塊「jquery」。

把目錄r1放到apache或其它web服務器上，訪問index.html。

網絡請求以下

咱們看到除了require.js外main.js和jquery-1.7.2.js也請求下來了。而它們正是經過requirejs請求的。

頁面上會彈出jQuery的版本

這是一個很簡單的示例，使用requirejs動態加載jquery。使用到了如下知識點

一、data-main屬性

二、require.config方法

三、require函數

感興趣的請繼續閱讀下一篇。

r1.zip

1. RequireJS入門（一）
2. RequireJS入門（三） RequireJS入門（三）
3. RequireJS 入門
4. RequireJS入門（三）
5. RequireJS入門（二）
6. requirejs入門
7. RequireJs整理入門
8. RequireJs入門實例
9. requireJS入門學習
10. requirejs 入門【連接】
更多相關文章...
• Memcached入門教程 - NoSQL教程
• OceanBase數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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

RequireJS入門（一） 轉

RequireJS入門（一）轉