requireJS的基本使用

requireJS的基本使用

1、總結

一句話總結：

requireJS是js端模塊化開發，主要是實現js的異步加載，和管理模塊之間的依賴關係，便於代碼的編寫和維護

 

一、頁面加載的js文件過多的缺點是什麼？

|||-begin

爲了提升代碼的複用度，開發人員會按照功能把大量的js代碼分紅若干文件，這樣在多個頁面就可使用同一個文件了

|||-end

一、網站加載js時會中止其它資源加載，並中止頁面渲染（就是咱們常說的白屏現象）

二、加載過多的js文件可能形成瀏覽器假死（瀏覽器一直在加載，不能進行頁面操做）

三、假如文件有依賴關係，就是使用B.js須要先加載A.js，那咱們還要當心翼翼的去引入js，不過這麼多文件，鬼理得清依賴關係啊

 

 

二、網站的功能日益強大，js文件愈來愈可能是必然的的事情，如何解決？

模塊化開發：好比requireJS

 

三、js模塊化 開發規範 分類？

一、服務器端（CommonJS）：如Node.js

二、客戶端（AMD、CMD）：如requireJS 和 seaJS

 

四、什麼是requireJS？

一、RequireJS是一個【JavaScript文件或者模塊的加載器】。它能夠提升JavaScript文件的加載速度，避免沒必要要的堵塞。

二、requireJS採用【異步方式加載模塊】，能夠簡單理解爲【加載js文件的一個工具】

三、requireJS是客戶端模塊化開發的一種規範，用於解決加載過多js文件致使瀏覽器白屏及假死及js文件引入的依賴關係的。

 

五、requireJS的做用？

一、實現js的異步加載

二、管理模塊之間的依賴關係，便於代碼的編寫和維護

 

六、require.config方法中的baseUrl、paths、shim分別表明什麼？

屬性1：baseUrl:指定統一的路徑

屬性2：paths:每一個模塊的路徑

屬性3：shim:定義非AMD

require.config({
    baseUrl: '../resource/app',
    paths: {
        'hd': 'hd',
        'css': '../lib/css.min',
        'jquery': '../lib/jquery.min',
        'angular': '../lib/angular.min',
        'bootstrap': '../lib/bootstrap.min',
    },
    shim: {
        'hd': {
            // exports: 'modal',
            init: function () {
                return {
                    modal: modal,
                    success: success,
                }
            }
        },
        //houdunren.com
        'bootstrap': {
            'deps': ['jquery', 'css!../css/bootstrap.min.css', 'css!../css/font-awesome.min.css']
        }
    }
});

 

 

 

2、requireJS的基本使用

參考或轉自：【模塊化開發】------requireJS的基本使用------【凡塵】
http://www.mamicode.com/info-detail-2285125.html

 

前言

爲了提升代碼的複用度，開發人員會按照功能把大量的js代碼分紅若干文件，這樣在多個頁面就可使用同一個文件了。，下面是某個網站的js引用狀況

 

 

 

雖然代碼的複用度提高了，可是缺點也體現了出來

缺點：

 　一、網站加載js時會中止其它資源加載，並中止頁面渲染（就是咱們常說的白屏現象）

     二、加載過多的js文件可能形成瀏覽器假死（瀏覽器一直在加載，不能進行頁面操做）

     三、假如文件有依賴關係，就是使用B.js須要先加載A.js，那咱們還要當心翼翼的去引入js，不過這麼多文件，鬼理得清依賴關係啊

 

 

額 。。。允許我懵逼片刻，那怎麼辦呢，網站的功能日益強大，js文件愈來愈可能是必然的的事情，因而出現了模塊化開發

 

 

 

模塊化開發

　

00一、模塊化分類

 

目前js模塊化 開發規範 分爲兩種

     一、服務器端（CommonJS）  如Node.js

 

     二、客戶端（AMD、CMD）  如：requireJS 和 seaJS

 

 

 

00二、什麼是requireJS

　　一、RequireJS是一個JavaScript文件或者模塊的加載器。它能夠提升JavaScript文件的加載速度，避免沒必要要的堵塞。

 

　　二、requireJS採用異步方式加載模塊，能夠簡單理解爲加載js文件的一個工具

 

　　三、requireJS是客戶端模塊化開發的一種規範，用於解決加載過多js文件致使瀏覽器白屏及假死及js文件引入的依賴關係的。

 

　　四、requireJS的做用：

     　　一、實現js的異步加載

     　　二、管理模塊之間的依賴關係，便於代碼的編寫和維護

 

　　推薦學習地址： http://www.ruanyifeng.com/blog/2012/11/require_js.html

 

00三、require的基本使用

 

　　第一步：加載requirejs

　　

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

　

   　第二步：異步加載require.js

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

//async屬性代表這個文件須要異步加載， IE不支持該屬性，只支持defer因此把defer也寫上

　　

　　第三步：加載入口文件

<script src="require.js" data-main="js/index" defer async="true"/><script>

data-main：用於加載入口文件（當require加載完畢後，須要引進主模塊js文件）

　　

　　第四步：使用require.config方法配置各個模塊所加載的路徑

require.config方法:

　　參數是一個對象:對象中有3個屬性
　　　　　　屬性1：baseUrl:指定統一的路徑

　　　　　　屬性2：paths:每一個模塊的路徑
　　　　　　
　　　　　　屬性3：shim:定義非AMD

require.config({
     //指定根路徑js文件夾
     baseUrl:"js",
     //每一個文件路徑
     paths:{
           "jquery":"lib/jquery-1.11.3",
           "layer":"plug/layer",
           "swiper":"plug/swiper.min",
           "banner":"list/banner",
           "alert":"list/alert"
     },
     //非AMD文件的模塊
     shim:{
          
     }
})

　　第五步：AMD規範定義模塊

AMD規範：

     由於require是採用AMD規範，由於必需要按照AMD的規定來編寫。也就是全部的模塊必須採用define()函數來定義

define函數有2個參數：

          第一個參數是須要依賴的模塊，若是不依賴就不用書寫 必須是一個數組

 

          第二參數是書寫的模塊內容

//如下定義了一個swiper的輪播圖
define(["jquery","swiper"],function(){
     function init(){
           new Swiper (‘.swiper-container‘, {
         direction: ‘horizontal‘,
         loop: true,
         autoplay : 3000,
           speed:300,


         pagination: ‘.swiper-pagination‘,
         // 若是須要前進後退按鈕
         nextButton: ‘.swiper-button-next‘,
         prevButton: ‘.swiper-button-prev‘,


       })
     }
     return {
           init:init
     }
})

　　第六步：入口的核心文件

require:接受2個參數

     一、第一個參數是數組,表示依賴的模塊

     二、第二個參數是回調函數

require(["config"],function(){
     require(["jquery","layer","swiper","banner","alert"],function($,layer,swiper,banner,alert){
           banner.init()
           alert.init()
     })
})

第一步加載配置文件

 

第二步加載所須要的模塊

 

　　第七步：若是遇到非AMD規範的模塊

shim:{
    模塊名:{　　　　　　deps:[""],//所依賴的模塊　　　　　　exports:模塊名//導出模塊的名稱　　　　}
}