RequireJS的基本用法

時間 2019-11-08

標籤 requirejs 基本用法欄目 JavaScript 简体版

原文原文鏈接

RequireJS 是一個JavaScript模塊加載器。它很是適合在瀏覽器中使用。使用RequireJS加載模塊化腳本將提升代碼的加載速度和質量。javascript

兼容性html

優勢java

實現js文件的異步加載，避免網頁失去響應jquery

管理模塊之間的依賴性，便於代碼的編寫和維護數組

快速上手瀏覽器

1、引入require.jsapp

2、require.config是用來配置模塊加載位置異步

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require.config({
        paths : {
          "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"],
          "a" : "js/a"       
        }
      });
 
      require(["jquery", "a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
     body
  </body>
</html>

原文來自：關於RequireJS的簡單介紹即便用方法 http://www.jb51.net/article/95191.htm模塊化

Require.js的基本用法詳解 http://www.jb51.net/article/117676.htm函數

RequireJS多頁面應用實例分析

requireJS API的三個主要函數：define（建立模塊），require（加載模塊），config（配置）

一、對模塊的路徑等進行配置

使用require.config()方法，能夠對模塊的加載行爲進行自定義。在多頁面應用中，能夠將配置寫在共用的文件中，如本例中的common.js文件，而後各個頁面加載當前配置後，在回調函數中再加載各自須要的模塊。

common.js代碼爲：

require.config({
baseUrl: '/scripts/lib',
shim:{
zepto: {
exports: '$'
},
backbone: {
deps: ['underscore', 'zepto'],
exports: 'Backbone'
},
'zepto.animate': ['zepto']
}
});

支持的配置項：

baseUrl ：

　　全部模塊的查找根路徑。注意：當加載的js文件(以.js結尾、以」/」開頭、含有協議)，不會使用baseUrl；

paths :

　　path映射那些不直接放置於baseUrl下的模塊名。設置path時起始位置是相對於baseUrl的，除非該path設置以"/"開頭或含有URL協議；

　　注意：在paths中定義的路徑不能含有.js後綴，由於路徑解析機制會自動添加上.js後綴；並且加載路徑能夠設置多個，如從CDN加載失敗，則加載本地js文件；

shim:

　　爲那些沒有使用define()來聲明依賴關係的模塊進行配置；

　　其中須要注意兩個參數：

　　　　（1）exports值（輸出的變量名），暴露方法接口

　　　　（2）deps數組，代表該模塊的依賴性

二、模塊的加載

page1.js代碼以下：

require(['./common'], function (common) {
require(['sayPage1'], function (sayPage1) {
sayPage1.hello();
});
});

三、模塊的定義

sayPage1.js中的代碼：

define(['jquery'], function($) {
function sayHi(){
$('body').append('<h1>Hello page1!</h1>');
}
return {
hello: sayHi
}
});

define函數也接受兩個參數。第一個參數爲所依賴模塊組成的數組，第二個參數是一個回調函數。

原文來自：RequireJS多頁面應用實例分析 http://www.jb51.net/article/87612.htm

requireJS使用指南 http://www.jb51.net/article/83116.htm

相關標籤/搜索

每日一句

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