為演示方便這裡僅實現常用的三種選擇器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
()
// 略...
}
return
query;
});
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...