前言
模塊不同于傳統的腳本文件,它良好地定義了一個作用域來避免全局名稱空間污染。它可以顯式地列出其依賴關系,并以函數(定義此模塊的那個函數)參數的形式將這些依賴進行注入,而無需引用全局變量。RequireJS的模塊是模塊模式的一個擴展,其好處是無需全局地引用其他模塊。 RequireJS的模塊語法允許它盡快地加載多個模塊,雖然加載的順序不定,但依賴的順序最終是正確的。同時因為無需創建全局變量,甚至可以做到在同一個頁面上同時加載同一模塊的不同版本。
在定義一個模塊的時候,方法的第一行寫一個“use strict”;這是干什么的?
use strict --嚴格模式,這種模式使得Javascript在更嚴格的條件下運行。
消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為; 消除代碼運行的一些不安全之處,保證代碼運行的安全; 提高編譯器效率,增加運行速度; 為未來新版本的Javascript做好鋪墊。1. 簡單的值對模塊
其實就是把文件名稱作為name參數傳入,若依賴該組件那么返回的就是一個對象!
define({ name: "hehe", age: "18"});2. 簡單的函數模塊
和上面一樣文件名稱作為默認的name,與上面的差異是,可以提前執行返回值外的代碼
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,需要注意!
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()); } });
新聞熱點
疑難解答
圖片精選