require js define 函數

模塊不一樣於傳統的腳本文件,它良好地定義了一個做用域來避免全局名稱空間污染。它能夠顯式地列出其依賴關係,並以函數(定義此模塊的那個函數)參數的形式將這些依賴進行注入,而無需引用全局變量。RequireJS的模塊是模塊模式的一個擴展,其好處是無需全局地引用其餘模塊。 RequireJS的模塊語法容許它儘快地加載多個模塊,雖然加載的順序不定,但依賴的順序最終是正確的。同時由於無需建立全局變量,甚至能夠作到在同一個頁面上同時加載同一模塊的不一樣版本。javascript

  • 在定義一個模塊的時候,方法的第一行寫一個「use strict」;這是幹什麼的?

use strict --嚴格模式,這種模式使得Javascript在更嚴格的條件下運行。php

  • 消除Javascript語法的一些不合理、不嚴謹之處,減小一些怪異行爲;
  • 消除代碼運行的一些不安全之處,保證代碼運行的安全;
  • 提升編譯器效率,增長運行速度;
  • 爲將來新版本的Javascript作好鋪墊。

1. 簡單的值對模塊

其實就是把文件名稱做爲name參數傳入,若依賴該組件那麼返回的就是一個對象!css

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

2. 簡單的函數模塊

和上面同樣文件名稱做爲默認的name,與上面的差別是,能夠提早執行返回值外的代碼java

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

3. 依賴函數模塊

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; }); });

和上面同樣,關鍵是依賴模塊是以返回值做爲入參的形式傳入,若是加載錯誤或者沒有找到對應的模塊,那麼獲得的入參是Undefiend,須要注意!node

4. 返回函數模塊

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; }); });

和上面同樣,這裏返回的是函數,在依賴模塊中把他做爲函數對象調用便可,其實這是一個簡單的閉包!數組

5. 完整定義

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

這就是完整定義,有名稱,有依賴,有回調,內部還有common的形式引入依賴對象!安全

關於define函數的name和require函數的依賴名稱之間的關係

  • define(name,[] , callback); 這個name能夠省掉,默認是文件名稱;固然也能夠自定義,一旦咱們定義了name,根據源代碼咱們能夠發現define函數內部其實就是把這個name以及依賴模塊、回調函數做爲一個對象存儲在全局的數組當中,也就是 defQueue.push([name,deps,callback]);那麼這個name就是這個組件註冊的的ID!閉包

  • require([name , name2],callback); 系統首先會在全文檢索path中是否對應的路徑,若是沒有天然把他做爲路徑拼接在baseUrl上去異步加載這個js文件,加載時從源代碼中能夠看到 ,var data = getScriptData(evt);返回的 data.id 其實就是name,而後執行contex.completeLoad(node.id),其內部就很清楚了,把define中註冊的name和這裏獲得的name進行比較若是相等就執行。因此道理就是:require 和 define 的 name 必須保證一致!異步

相關文章
相關標籤/搜索