requirejs是干啥的啊？
曾經，我們將一些js組件放到不同的文件，然后通過script標簽引入，如果幾個組件有依賴，那么要小心了，你必須將被依賴的放到前面，否則的話會出現啥啥啥is undefined或者啥啥啥is not a function之類的錯誤。比如一個jquery的插件顯然是依賴jquery核心庫的，所以jquery核心庫文件必須先引入。項目小組件少依賴簡單還好，要是項目大組件多依賴復雜就糟糕了。咋辦？用requirejs啊😜！
只要按照requirejs規范寫，他會從一個根開始檢查依賴，根據這些依賴關系自動的幫助我們插入script標簽，很棒，對不對？這樣依賴我們不就再也不用糾結哪個標簽應該放在前，哪個該放在后了嗎？👏👏👏
requirejs咋用啊？
請記住使用requirejs的口訣，兩函數一配置一屬性
data-main屬性
requirejs需要一個根來作為搜索依賴的開始，data-main用來指定這個根。
<script src="scripts/require.js" data-main="scripts/app.js"></script>
這里就指定了根是app.js,只有直接或者間接與app.js有依賴關系的模塊才會被插入到html中。
require.config() 配置
通過這個函數可以對requirejs進行靈活的配置，其參數為一個配置對象，配置項及含義如下：
baseUrl――用于加載模塊的根路徑。
paths――用于映射不存在根路徑下面的模塊路徑。
shims――配置在腳本/模塊外面并沒有使用RequireJS的函數依賴并且初始化函數。假設underscore并沒有使用 RequireJS定義，但是你還是想通過RequireJS來使用它，那么你就需要在配置中把它定義為一個shim。
deps――加載依賴關系數組
require.config({ //默認情況下從這個文件開始拉去取資源 baseUrl:'scripts/app', //如果你的依賴模塊以pb頭，會從scripts/pb加載模塊。 paths:{ pb:'../pb' }, // load backbone as a shim，所謂就是將沒有采用requirejs方式定義 //模塊的東西轉變為requirejs模塊 shim:{ 'backbone':{ deps:['underscore'], exports:'Backbone' } }});define()函數
該函數用于定義模塊。形式如下。
//logger.js define(["a"], function(a) { 'use strict'; function info() { console.log("我是私有函數"); } return { name:"一個屬性", test:function(a){ console.log(a+"你好！"); a.f(); info(); } }});define函數就受兩個參數。
* 第一個是一個字符串數組，表示你定義的模塊依賴的模塊，這里依賴模塊a;
* 第二個參數是一個函數，參數是注入前面依賴的模塊，順序同第一參數順序。在函數中可做邏輯處理，通過return一個對象暴露模塊的屬性和方法，不在return中的可以認為是私有方法和私有屬性。
require()函數
該函數用于調用定義好的模塊，可以是用define函數定義的，也可以是一個shim。形式如下：
//app.jsrequire(['logger'], function (logger) {logger.test("大熊");console.log(logger.name);});//輸出結果：//大熊你好！//不確定（取決于a模塊的f方法）//我是私有函數//一個屬性實戰練習一下
結構
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){ //練習私有方法 _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.jsdefine([], function() { 'use strict'; return {world(){ animal();} }});輸出結果
輸出結果
解釋一下
需要解釋嗎？自行體會吧！這里再貼個加載順序的圖，你想想看是不是應該是這樣的。
這里的標簽順序正好是我想象中的反過來。為什么會這樣呢？我猜測是，加載順序依然時被依賴的要先加載的，我們知道只要指定了script的src屬性就會加載對應的js，跟標簽順序無必然關系。這里不知道是不是對的，誰知道請賜教。
小結一下
requirejs的基本用法比較簡單，但是功能強大，讓我們能夠非常輕松的處理各種依賴問題。有人云requirejs是遵循的一個叫AMD的規范，也有遵循CMD規范的seajs模塊管理庫，還有用于服務端的commonjs模塊管理工具，現在es6已經原生支持模塊管理了，關于這些內容，大熊不做介紹了，為啥呢？因為大熊也不知道啊。要是你覺得大熊寫的東西對你有所幫助，不妨點個關注或者推薦！
以上這篇教你5分鐘學會用requirejs(必看篇)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
