前言

模塊不同于傳統(tǒng)的腳本文件，它良好地定義了一個(gè)作用域來避免全局名稱空間污染。它可以顯式地列出其依賴關(guān)系，并以函數(shù)(定義此模塊的那個(gè)函數(shù))參數(shù)的形式將這些依賴進(jìn)行注入，而無需引用全局變量。RequireJS的模塊是模塊模式的一個(gè)擴(kuò)展，其好處是無需全局地引用其他模塊。 RequireJS的模塊語法允許它盡快地加載多個(gè)模塊，雖然加載的順序不定，但依賴的順序最終是正確的。同時(shí)因?yàn)闊o需創(chuàng)建全局變量，甚至可以做到在同一個(gè)頁面上同時(shí)加載同一模塊的不同版本。

在定義一個(gè)模塊的時(shí)候，方法的第一行寫一個(gè)“use strict”;這是干什么的？

use strict --嚴(yán)格模式，這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行。

• 消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;
• 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；
• 提高編譯器效率，增加運(yùn)行速度；
• 為未來新版本的Javascript做好鋪墊。

1. 簡單的值對模塊

其實(shí)就是把文件名稱作為name參數(shù)傳入，若依賴該組件那么返回的就是一個(gè)對象！

define({
 name: "hehe",
 age: "18"
});

2. 簡單的函數(shù)模塊

和上面一樣文件名稱作為默認(rèn)的name，與上面的差異是，可以提前執(zhí)行返回值外的代碼

define(function() {
 return {
 name: "hehe",
 age: "18"
 };
});

3. 依賴函數(shù)模塊

define([
 'angular',
 'jsUtil',
 'modules/meet/modules',
 'modules/meet/services/Meet',
 'modules/meet/services/MeetRemoteService'
],function(require) {
 'use strict';

 var module = angular.module('meet.services');

 module.factory('MeetService', function(Meet, MeetRemoteService) {
 var service = {
  name: 'hehe',
  age: '18'
 };
 return service;
 });
});

和上面一樣，關(guān)鍵是依賴模塊是以返回值作為入?yún)⒌男问絺魅?，如果加載錯(cuò)誤或者沒有找到對應(yīng)的模塊，那么得到的入?yún)⑹荱ndefiend，需要注意！

4. 返回函數(shù)模塊

define([
 'angular',
 'jsUtil',
 'modules/meet/modules',
 'modules/meet/services/Meet',
 'modules/meet/services/MeetRemoteService'
],function(require) {
 'use strict';

 var module = angular.module('meet.services');

 module.factory('MeetService', function(Meet, MeetRemoteService) {
 var service = {};
 service.getWeekOfMeet = function(weekFlag, date) {

  return MeetRemoteService.get(weekFlag, date).then(function(data) {
  data.content = Meet.sortMeet(data.content);
  return data;
  });
 }
 return service;
 });
});

和上面一樣，這里返回的是函數(shù)，在依賴模塊中把他作為函數(shù)對象調(diào)用即可，其實(shí)這是一個(gè)簡單的閉包！

5. 完整定義

define('sample3' ,['sample','sample1'],function (sample,sample1) {
 var sample4 = require('sample4');
 return function(){
 alert(sample.name+':'+sample.sayhell());
 } 
});

這就是完整定義，有名稱，有依賴，有回調(diào)，內(nèi)部還有common的形式引入依賴對象！

關(guān)于define函數(shù)的name和require函數(shù)的依賴名稱之間的關(guān)系

define(name，[] , callback); 這個(gè)name可以省掉，默認(rèn)是文件名稱；當(dāng)然也可以自定義，一旦我們定義了name，根據(jù)源代碼我們可以發(fā)現(xiàn)define函數(shù)內(nèi)部其實(shí)就是把這個(gè)name以及依賴模塊、回調(diào)函數(shù)作為一個(gè)對象存儲在全局的數(shù)組當(dāng)中，也就是 defQueue.push([name,deps,callback])；那么這個(gè)name就是這個(gè)組件注冊的的ID！

require（[name , name2],callback）; 系統(tǒng)首先會在全文檢索path中是否對應(yīng)的路徑，如果沒有自然把他作為路徑拼接在baseUrl上去異步加載這個(gè)js文件，加載時(shí)從源代碼中可以看到 ,var data = getScriptData(evt)；返回的 data.id 其實(shí)就是name，然后執(zhí)行contex.completeLoad(node.id) ，其內(nèi)部就很清楚了，把define中注冊的name和這里得到的name進(jìn)行比較如果相等就執(zhí)行。所以道理就是：require 和 define 的 name 必須保證一致！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論