您好,登錄后才能下訂單哦!
requirejs是干啥的啊?
曾經(jīng),我們將一些js組件放到不同的文件,然后通過script標(biāo)簽引入,如果幾個組件有依賴,那么要小心了,你必須將被依賴的放到前面,否則的話會出現(xiàn)啥啥啥is undefined或者啥啥啥is not a function之類的錯誤。比如一個jquery的插件顯然是依賴jquery核心庫的,所以jquery核心庫文件必須先引入。項(xiàng)目小組件少依賴簡單還好,要是項(xiàng)目大組件多依賴復(fù)雜就糟糕了。咋辦?用requirejs啊😜!
只要按照requirejs規(guī)范寫,他會從一個根開始檢查依賴,根據(jù)這些依賴關(guān)系自動的幫助我們插入script標(biāo)簽,很棒,對不對?這樣依賴我們不就再也不用糾結(jié)哪個標(biāo)簽應(yīng)該放在前,哪個該放在后了嗎?👏👏👏
requirejs咋用?。?/strong>
請記住使用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ù)為一個配置對象,配置項(xiàng)及含義如下:
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)容,大熊不做介紹了,為啥呢?因?yàn)榇笮芤膊恢腊?。要是你覺得大熊寫的東西對你有所幫助,不妨點(diǎn)個關(guān)注或者推薦!
以上這篇教你5分鐘學(xué)會用requirejs(必看篇)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。