RequireJS入門(二) 轉

2022-05-18 15:23:34 字數 1807 閱讀 7839

為演示方便這裡僅實現常用的三種選擇器id,classname,attribute。requirejs使用define來定義模組。

新建目錄結構如下

這次新建了乙個子目錄js,把main.js和selctor.js放入其中,require.js仍然和index.html在同一級目錄。

html 如下12

3456

78910

1112

1314

1516

1718

這次把script標籤放到了div的後面,因為要用選擇器去獲取頁面dom元素,而這要等到dom ready後。

因為把main.js放到js目錄中,這裡data-main的值須改為「js/main」。

selector.js 如下12

3456

78910

1112

1314

1516

1718

1920

2122

2324

25define(function()

// 略...

}

returnquery;

});

define的引數為乙個匿名函式,該匿名函式執行後返回query,query為函式型別。query就是選擇器的實現函式。

main.js 如下12

3456

78require.config();

require(['selector'],function(query) );

require.config方法執行配置了baseurl為「js」,baseurl指的模組檔案的根目錄,可以是絕對路徑或相對路徑。這裡用的是相對路徑。相對路徑指引入require.js的頁面為參考點,這裡是index.html。

把目錄r2放到apache或其它web伺服器上,訪問index.html。

網路請求如下

main.js和selector.js都請求下來了。

總結:使用baseurl來配置模組根目錄,baseurl可以是絕對路徑也可以是相對路徑

使用define定義乙個函式型別模組,requirejs的模組可以是js物件,函式或其它任何型別(commonjs/seajs則只能是js物件)

r2.zip

RequireJS入門(三)轉

這篇來寫乙個具有依賴的事件模組event。event提供三個方法bind unbind trigger來管理dom元素事件。event依賴於cache模組,cache模組類似於jquery的 data方法。提供了set get remove等方法用來管理存放在dom元素上的資料。示例實現功能 為頁面...

RequireJS高階(三) 轉

高階的前面兩篇講述了r.js如何通過命令列把所有的模組壓縮為乙個js檔案或把所有的css壓縮為乙個css檔案。其中包括一些壓縮配置引數的使用。但以上兩種方式有幾個問題 1 通過命令手動配置壓縮選項顯得很呆板 2 都僅合併為乙個檔案 對於最後只生成乙個檔案的庫來說,這種方式並無不妥。比如jquery,...

requireJS入門基礎

參考 require.js詳解 1.引用requirejs的html檔案 第7行,使用和約定的屬性data main和src引入require.js模組,所有的require配置在這裡寫在目錄js下的main.js,即require物件會到目錄js下尋找main.js檔案,require物件約定js...