教你5分鐘學(xué)會用requirejs(必看篇)
requirejs是干啥的?。?/strong>
曾經(jīng)，我們將一些js組件放到不同的文件，然后通過script標(biāo)簽引入，如果幾個組件有依賴，那么要小心了，你必須將被依賴的放到前面，否則的話會出現(xiàn)啥啥啥is undefined或者啥啥啥is not a function之類的錯誤。比如一個jquery的插件顯然是依賴jquery核心庫的，所以jquery核心庫文件必須先引入。項目小組件少依賴簡單還好，要是項目大組件多依賴復(fù)雜就糟糕了。咋辦？用requirejs啊😜！
只要按照requirejs規(guī)范寫，他會從一個根開始檢查依賴，根據(jù)這些依賴關(guān)系自動的幫助我們插入script標(biāo)簽，很棒，對不對？這樣依賴我們不就再也不用糾結(jié)哪個標(biāo)簽應(yīng)該放在前，哪個該放在后了嗎？👏👏👏
requirejs咋用啊？
請記住使用requirejs的口訣，兩函數(shù)一配置一屬性
data-main屬性
requirejs需要一個根來作為搜索依賴的開始，data-main用來指定這個根。
<script src="scripts/require.js" data-main="scripts/app.js"></script>
這里就指定了根是app.js,只有直接或者間接與app.js有依賴關(guān)系的模塊才會被插入到html中。
require.config() 配置
通過這個函數(shù)可以對requirejs進(jìn)行靈活的配置，其參數(shù)為一個配置對象，配置項及含義如下：
baseUrl——用于加載模塊的根路徑。
paths——用于映射不存在根路徑下面的模塊路徑。
shims——配置在腳本/模塊外面并沒有使用RequireJS的函數(shù)依賴并且初始化函數(shù)。假設(shè)underscore并沒有使用 RequireJS定義，但是你還是想通過RequireJS來使用它，那么你就需要在配置中把它定義為一個shim。
deps——加載依賴關(guān)系數(shù)組
require.config({
//默認(rèn)情況下從這個文件開始拉去取資源
baseUrl:'scripts/app',
//如果你的依賴模塊以pb頭，會從scripts/pb加載模塊。
paths:{
pb:'../pb'
},
// load backbone as a shim，所謂就是將沒有采用requirejs方式定義
//模塊的東西轉(zhuǎn)變?yōu)閞equirejs模塊
shim:{
'backbone':{
deps:['underscore'],
exports:'Backbone'
}
}
});
define()函數(shù)
該函數(shù)用于定義模塊。形式如下。
//logger.js
define(["a"], function(a) {
'use strict';
function info() {
console.log("我是私有函數(shù)");
}
return {
name:"一個屬性",
test:function(a){
console.log(a+"你好！");
a.f();
info();
}
}
});
define函數(shù)就受兩個參數(shù)。
* 第一個是一個字符串?dāng)?shù)組，表示你定義的模塊依賴的模塊，這里依賴模塊a;
* 第二個參數(shù)是一個函數(shù)，參數(shù)是注入前面依賴的模塊，順序同第一參數(shù)順序。在函數(shù)中可做邏輯處理，通過return一個對象暴露模塊的屬性和方法，不在return中的可以認(rèn)為是私有方法和私有屬性。
require()函數(shù)
該函數(shù)用于調(diào)用定義好的模塊，可以是用define函數(shù)定義的，也可以是一個shim。形式如下：
//app.js
require(['logger'], function (logger) {
logger.test("大熊");
console.log(logger.name);
});
//輸出結(jié)果：
//大熊你好！
//不確定（取決于a模塊的f方法）
//我是私有函數(shù)
//一個屬性
實(shí)戰(zhàn)練習(xí)一下
結(jié)構(gòu)
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="js/require.js" data-main="app.js"></script> </body> </html>
app.js
require.config({
//By default load any module IDs from js/
baseUrl: 'js',
//except, if the module ID starts with "pb"
paths: {
pb: '../pb'
},
shim: {
'world': {
deps:['animalWorld'],
// use the global 'Backbone' as the module name.
exports: 'world'
}
}
});
require(['cat','dog','world'], function (cat,dog,world) {
world.world();
cat.say();
dog.say();
});
animal.js
define([], function() {
'use strict';
function _showName(name){
console.log(name);
}
return {
say(words){
console.log(words);
},
showName(name){ //練習(xí)私有方法
_showName(name);
}
}
});
cat.js
define([
'pb/animal'
], function(animal) {
'use strict';
return {
say(){
animal.say("喵喵");
animal.showName("貓");
}
}
});
dog.js
define([
'pb/animal'
], function(animal) {
'use strict';
return {
say(){
animal.say("汪汪");
animal.showName("狗");
}
}
});
animalWorld.js
window.animal = function() {
console.log("這里是動物世界！");
}
world.js
define([], function() {
'use strict';
return {
world(){
animal();
}
}
});
輸出結(jié)果
輸出結(jié)果
解釋一下
需要解釋嗎？自行體會吧！這里再貼個加載順序的圖，你想想看是不是應(yīng)該是這樣的。
這里的標(biāo)簽順序正好是我想象中的反過來。為什么會這樣呢？我猜測是，加載順序依然時被依賴的要先加載的，我們知道只要指定了script的src屬性就會加載對應(yīng)的js，跟標(biāo)簽順序無必然關(guān)系。這里不知道是不是對的，誰知道請賜教。
小結(jié)一下
requirejs的基本用法比較簡單，但是功能強(qiáng)大，讓我們能夠非常輕松的處理各種依賴問題。有人云requirejs是遵循的一個叫AMD的規(guī)范，也有遵循CMD規(guī)范的seajs模塊管理庫，還有用于服務(wù)端的commonjs模塊管理工具，現(xiàn)在es6已經(jīng)原生支持模塊管理了，關(guān)于這些內(nèi)容，大熊不做介紹了，為啥呢？因為大熊也不知道啊。要是你覺得大熊寫的東西對你有所幫助，不妨點(diǎn)個關(guān)注或者推薦！
以上這篇教你5分鐘學(xué)會用requirejs(必看篇)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
- 一篇文章掌握RequireJS常用知識
- RequireJS入門一之實(shí)現(xiàn)第一個例子
- RequireJS多頁面應(yīng)用實(shí)例分析
- 在Html中使用Requirejs進(jìn)行模塊化開發(fā)實(shí)例詳解
- RequireJS使用注意細(xì)節(jié)
- 使用requirejs模塊化開發(fā)多頁面一個入口js的使用方式
- requirejs + vue 項目搭建詳解
- 在JavaScript應(yīng)用中使用RequireJS來實(shí)現(xiàn)延遲加載
- 詳解RequireJS按需加載樣式文件
- 使用RequireJS庫加載JavaScript模塊的實(shí)例教程
- RequireJS用法簡單示例
相關(guān)文章
基于JavaScript 實(shí)現(xiàn)拖放功能
本文通過實(shí)例代碼給大家介紹了JavaScript 實(shí)現(xiàn)拖放功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
js傳參數(shù)受特殊字符影響錯誤，如果不做處理，會產(chǎn)品傳參錯誤，encodeURI 方法返回一個編碼的URI，可以有效解決此問題，感興趣的朋友可以參考下2013-10-10
下面小編就為大家?guī)硪黄猨s在ie下打開對話窗口的方法小結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
uniapp的webview實(shí)現(xiàn)左滑返回上一個頁面操作方法
uniapp默認(rèn)左滑是關(guān)閉整個webview,而不是關(guān)閉當(dāng)前頁,本文給大家介紹uniapp的webview實(shí)現(xiàn)左滑返回上一個頁面操作方法,感興趣的朋友一起看看吧2023-12-12
JavaScript類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的方法實(shí)例分析
這篇文章主要介紹了JavaScript類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的方法,結(jié)合實(shí)例形式分析了javascript類數(shù)組對象的功能,以及類數(shù)組對象轉(zhuǎn)換為數(shù)組對象的相關(guān)方法與實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07
深入理解關(guān)于javascript中apply()和call()方法的區(qū)別
下面小編就為大家?guī)硪黄钊肜斫怅P(guān)于javascript中apply()和call()方法的區(qū)別。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
下面小編就為大家?guī)硪黄猨s停止冒泡和阻止瀏覽器默認(rèn)行為的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-05-05
這篇文章主要為大家詳細(xì)介紹了原生JS運(yùn)動實(shí)現(xiàn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
BootStrap實(shí)現(xiàn)文件上傳并帶有進(jìn)度條效果
這篇文章主要介紹了BootStrap實(shí)現(xiàn)文件上傳并帶有進(jìn)度條效果，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-09-09
本文主要分享了原生js實(shí)現(xiàn)打字動畫游戲的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02