requirejs載入jquery_WEB前端開發使用requirejs 引入腳本為什麼頁面首次載入會出現其他依賴jquery的文件先於jquery載入

1. 如何使用requirejs載入html

在前端模塊化的時候，不僅僅是js需要進行模塊化管理，html有時候也需要模塊化管理。這里就介紹下如何通過requirejs，實現html代碼的模塊化開發。
如何使用requirejs載入html
Reuqirejs有一個text的插件，它可以讀取指定文件的內容，讀取到的內容就是文本。
如何下載text插件
第一種方法，可以通過npm下載：
npm install requirejs/text

第二種方法，也可以直接去官方github上面直接下載。
直接拷貝內容到text.js中即可。
如何安裝text插件
在requirejs的main.js中配置text插件的依賴即可，跟jquery差不多，只要保證能通過正常的載入方式載入到它就行。
requirejs.config({
baseUrl: './',
paths: {
'text':path+'/require/text',
...
},
shim: {
...
}
});

也可以直接放在baseUrl裡面。
如何使用text
在目標模塊中，按照下面的語法即可：
define(function(require){
var html = require("text!html/test.html");
console.log(html);
});

或者
define(["text!html/test.html"],function(html){
console.log(html);
});

如何進行html的模塊化開發？
看過上面你已經會使用text了，但是仍然不知道怎麼組織前端代碼。
舉個栗子：
博客園的網站頁面會根據上方的導航跳轉到不同的頁面。如果是在單頁面中，很容易想到原始的做法是，導航的按鈕對應不同的div，點擊那個按鈕，就顯示與之對應的div；其他的div則隱藏掉。
那麼，前端的代碼可能會這樣：
<html>
<body>
<nav>
導航按鈕1、導航按鈕2、導航按鈕3
</nav>

<div style="display:block">按鈕1對應的頁面</div>
<div style="display:none">按鈕2對應的頁面</div>
<div style="display:none">按鈕3對應的頁面</div>

</body>
</html>

這樣的代碼會很雜亂...而且前端Html會很長...不利於維護。
那麼有了reuqirejs的text插件以後，就可以這樣了：
<html>
<body>
<nav>
導航按鈕1、導航按鈕2、導航按鈕3
</nav>

<div id="target"></div>
</body>
</html>

然後在對應的模塊中：
$('#target').html(require("text!目標按鈕對應的頁面.html"));

這樣就隨性多了吧！前端代碼也可以跟著模塊一起有效的管理了！
不過需要注意的是：這種方式會導致Jquery綁定的事件失效——所以一定要在html()方法後面，重新綁定下事件。

2. requirejs是什麼

requireJS 是用javaScript編寫的JS框架，主要功能是可以按不同的先後依賴關系對 JavaScript 等文件的進行載入工作，可簡單理解為JS文件的載入器，它非常適合在瀏覽器中使用，它可以確保所依賴的JS文件載入完成之後再載入當前的JS文件，這在大量使用JS文件的項目中可確保各個JS文件的先後載入順序，確保避免了以前因某些原因某個文件載入慢而導致其它載入快的文件需要依賴其某些功能而出現某函數或某變數找不到的問題，這點非常有用，也是 requireJS 的主要價值所在吧；

3. requirejs模塊化編程怎麼理解

一、Javascript模塊化編程

目前，通行的Javascript模塊規范共有兩種：CommonJS和AMD。

1、commonjs

2009年，美國程序員Ryan Dahl創造了node.js項目，將javascript語言用於伺服器端編程，這標志」Javascript模塊化編程」正式誕生。

在瀏覽器環境下，沒有模塊也不是特別大的問題，畢竟網頁程序的復雜性有限；但是在伺服器端，一定要有模塊，與操作系統和其他應用程序互動，否則根本沒法編程。

node.js的模塊系統，就是參照CommonJS規范實現的。在CommonJS中，有一個全局性方法require()，用於載入模塊。

假定有一個數學模塊math.js，就可以像下面這樣載入。

var math = require('math');

然後，就可以調用模塊提供的方法：

var math = require('math');

math.add(2,3); // 5

因為這個系列主要針對瀏覽器編程，不涉及node.js，所以對CommonJS就不多做介紹了。我們在這里只要知道，require()用於載入模塊就行了。

2、AMD

AMD是」Asynchronous Mole Definition」的縮寫，意思就是」非同步模塊定義」。它採用非同步方式載入模塊，模塊的載入不影響它後面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到載入完成之後，這個回調函數才會運行。

模塊定義
define(id?, dependencies?, factory);
其中：

id: 模塊標識，可以省略。
dependencies: 所依賴的模塊，可以省略。
factory: 模塊的實現，或者一個JavaScript對象。

模塊載入

AMD也採用require()語句載入模塊，但是不同於CommonJS，它要求兩個參數：
require([mole], callback);

第一個參數[mole]，是一個數組，裡面的成員就是要載入的模塊；第二個參數callback，則是載入成功之後的回調函數。如果將前面的代碼改寫成AMD形式，就是下面這樣：

require(['math'], function (math) {
math.add(2, 3);
});

math.add()與math模塊載入不是同步的，瀏覽器不會發生假死。所以很顯然，AMD比較適合瀏覽器環境。

目前，主要有兩個Javascript庫實現了AMD規范：require.js和curl.js。本系列的第三部分，將通過介紹require.js，進一步講解AMD的用法，以及如何將模塊化編程投入實戰。

二、requirejs模塊化編程

require.js載入的模塊，採用AMD(非同步模塊定義規范) 規范。也就是說，模塊必須按照AMD的規定來寫。

require.js的兩個重要的特點：

1、實現js文件的非同步載入，避免網頁失去響應

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

載入requirejs：

<script src="js/require.js" data-main="js/main"></script>

data-main屬性的作用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js載入。由於require.js默認的文件後綴名是js，所以可以把main.js簡寫成main。

main.js常見實例：

require.config({
paths: {
moleA: '',
moleB:'',
moleC:''
}
});

require(['moleA', 'moleB', 'moleC'], function (moleA, moleB, moleC){
// some code here

});

1、require.config

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應用在模塊化開發時，其實可以不使用全局的，即可以不暴露出來。需要用到jQuery時使用require函數即可。

2、require()函數

require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，上例就是['moleA', 'moleB',
'moleC']，即主模塊依賴這三個模塊；第二個參數是一個回調函數，當前面指定的模塊都載入成功後，它將被調用。載入的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊。

4. WEB前端開發使用requirejs 引入腳本為什麼頁面首次載入會出現其他依賴jquery的文件先於jquery載入

async 屬性表明這個文件需要非同步載入
data-main屬性的作用是，指定網頁程序的主模塊。data-main 下的文件會第一專個被require.js載入。由於require.js默認屬的文件後綴名是js，所以可以把config.js簡寫成config。
在項目里依賴於jquery進行開發，先在require.config里配置好jquery路徑。jquery提供了require的支持，像下面這樣就可以引用jquery模塊了;

5. jquery layer插件 ,拓展模塊layer.ext.js沒正確載入不能調用layer.prompt方法。到底要怎麼正確載入啊

jquery layer插件,拓展模塊layer.ext.js正確載入需要進行全局配置。

解決方法如下：

layer.config(options)- 初始化全局配置

這是一個可以重要也可以不重要的方法，重要的是，它的權利真的很大，尤其是在模塊化載入layer時，你會發現你必須要用到它。它不僅可以配置一些諸如路徑、載入的模塊，甚至還可以決定整個彈層的默認參數。而說它不重要，是因為多數情況下，你會發現，你似乎不是那麼十分需要它。但你真的需要認識一下這位伙計。

如果您是採用seajs或者requirejs載入layer，你需要執行該方法來完成初始化的配置。

如果你是採用<script src="?a.js&layer.js">這種合並的方式引入layer，那麼您需要在script標簽上加一個自定義屬性merge="true"。

layer.ready(path, callback)- 初始化就緒

由於我們的layer內置了輕量級載入器，所以你根本不需要單獨引入css等文件。但是載入總是需要過程的。當你在頁面一打開就要執行彈層時，layer.ready()會是一個不錯的幫手。它也可以做一些layer.config可以做的事，比如指向layer.js所在目錄。但是如果你已經通過layer.config配置了path，你在使用layer.ready時，是不需要path的

6. requirejs定義模塊，需要用jquery插件，怎麼引入依賴

你require哪個就載入哪個。比如b頁面只 require了 update.js和 jquery.js，那B就只載入這2個。

導航:首頁 > 編程語言 > requirejs載入jquery

requirejs載入jquery

與requirejs載入jquery相關的資料

友情鏈接