requireJS的基本使用

一、總結

一句話總結：

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

?

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

|||-begin

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

|||-end

1、網站加載js時會停止其它資源加載，并停止頁面渲染（就是我們常說的白屏現象）

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

3、假如文件有依賴關系，就是使用B.js需要先加載A.js，那我們還要小心翼翼的去引入js，不過這么多文件，鬼理得清依賴關系啊

?

?

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

模塊化開發：比如requireJS

?

3、js模塊化 開發規范 分類？

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

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

?

4、什么是requireJS？

1、RequireJS是一個【JavaScript文件或者模塊的加載器】。它可以提高JavaScript文件的加載速度，避免不必要的堵塞。

2、requireJS采用【異步方式加載模塊】，可以簡單理解為【加載js文件的一個工具】

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

?

5、requireJS的作用？

1、實現js的異步加載

2、管理模塊之間的依賴關系，便于代碼的編寫和維護

?

6、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']}} });

?

?

?

二、requireJS的基本使用

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

?

前言

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

?

?

?

雖然代碼的復用度提升了，但是缺點也體現了出來

缺點：

1、網站加載js時會停止其它資源加載，并停止頁面渲染（就是我們常說的白屏現象） 2、加載過多的js文件可能造成瀏覽器假死（瀏覽器一直在加載，不能進行頁面操作） 3、假如文件有依賴關系，就是使用B.js需要先加載A.js，那我們還要小心翼翼的去引入js，不過這么多文件，鬼理得清依賴關系啊 額 。。。容許我懵逼片刻，那怎么辦呢，網站的功能日益強大，js文件越來越多是必然的的事情，于是出現了模塊化開發 模塊化開發 　 001、模塊化分類 目前js模塊化 開發規范 分為兩種 1、服務器端（CommonJS） ?如Node.js 2、客戶端（AMD、CMD） ?如：requireJS 和 seaJS 002、什么是requireJS 1、RequireJS是一個JavaScript文件或者模塊的加載器。它可以提高JavaScript文件的加載速度，避免不必要的堵塞。 2、requireJS采用異步方式加載模塊，可以簡單理解為加載js文件的一個工具 3、requireJS是客戶端模塊化開發的一種規范，用于解決加載過多js文件導致瀏覽器白屏及假死及js文件引入的依賴關系的。 4、requireJS的作用： 1、實現js的異步加載 2、管理模塊之間的依賴關系，便于代碼的編寫和維護 推薦學習地址：http://www.ruanyifeng.com/blog/2012/11/require_js.html 003、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個參數 1、第一個參數是數組,表示依賴的模塊 2、第二個參數是回調函數

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

第一步加載配置文件 第二步加載所需要的模塊 ?

?

　　第七步：如果遇到非AMD規范的模塊

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

?

?

?

轉載于:https://www.cnblogs.com/Renyi-Fan/p/11590199.html

總結

以上是生活随笔為你收集整理的requireJS的基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。