摘要:參數為循環遍歷時的回調函數,它分別接收遍歷項的值遍歷下表遍歷變量本身三個參數,當回調函數返回時將結束本次循環,而且此時執行結束后也將會返回一個,這在結束多層循環遍歷時很有用,開發者可以通過再次推出上層循環。
Amaple 擁有非常強大插件功能,這也是它的突出功能之一,Amaple插件一般表現為功能塊(函數)或功能塊(包含一系列函數和屬性的Object對象),它除了支持Amaple規范定義的插件外,還支持所有 AMD (點擊了解詳情)和 IIFE (點擊了解詳情)規范的插件,在 rollup 、 webpack 、 browserify 等模塊打包工具流行的今天,這也意味著幾乎所有的第三方js庫都可以與Amaple協同運作,同時也支持舊式的iife格式js庫。
定義并安裝Amaple規范的插件在安裝Amaple規范的插件前,我們需定義一個特定格式的pluginDefinition(插件定義對象)供Amaple安裝,這個對象必須包含name屬性和build函數,分別表示插件名與構建函數,此構建函數返回的值將作為插件實體。然后使用am.install(pluginDefinition)并傳入插件安裝對象pluginDefinition進行安裝:
// 插件定義對象 const pluginDefinition = { name : "switch", // 定義插件名,命名規則與變量名的規則相同 // 構建函數,它要求返回一個插件實體 // 無效返回值(undefined、null、0、false等)將會拋出錯誤 // build函數中的this指向的是am對象,所以你可以使用它進行組件定義或am屬性的擴展 build : function () { var state = "OFF"; return { press: function () { return state === "OFF" ? "ON" : "OFF"; } }; } }; // 調用后插件將會被安裝,此時就完成了一個名為switch的插件 // 它是一個含有`press`函數的Object對象。 am.install (pluginDefinition);
在Amaple中,插件也可以像模塊與組件文件一樣編寫在獨立的js文件中,它也提供了相應的插件載入機制。如我們可將上面的插件定義代碼多帶帶放到/plugin/switch.js文件中。
載入插件無論是 Amaple 規范、 amd 和 iife 規范的插件在Amaple中都可以以多帶帶文件的形式存在,對于這些插件我們需要載入它們才可使用,我們可在am.startRouter函數的參數內添加plugin屬性指定項目依賴的插件路徑信息,這樣Amaple將會自動加載這些插件文件,plugin具體配置如下:
am.startRouter( { // ... baseURL : { // ... // 可為插件文件設置base路徑,所有的插件文件請求路徑都將基于“/plugin”目錄,不設置時默認為“/” plugin: "/plugin" }, // plugin的值為一個數組,通過它來指定項目中依賴的所有插件 // 以下分別表示插件載入的4種方式 plugin: [ // ①.插件路徑字符串,適用于amaple規范的多帶帶文件插件 // 如上面定義的switch插件可使用此方式載入,加載路徑依賴baseURL "siwtch", // ②.插件定義對象pluginDefinition,直接傳入此對象后將會安裝此插件 // 與amaple規范的多帶帶文件插件相比,不需調用am.install函數。 // 這對于webpack等模塊化環境下非常有用,你可以import任意js庫并通過build函數retuen它進行安裝 { name: "switch", build: function () { ... } }, // ③.amd規范js庫,支持amd規范的所有js庫都可以這樣載入并作為amaple的插件使用 // url依賴baseURL,且url值為“http://”、“https://”開頭時可直接載入外網js庫 { format: "amd", name: "anime", url: "amd/animejs" }, // ④.iife規范js庫,iife規范下將會使用global的值作為全局對象名,并在window對象下尋找它,未定義global時會使用name的值代替global值進行尋找 // url依賴baseURL,且url值為“http://”、“https://”開頭時可直接載入外網js庫 { format: "iife", name: "lodash", global: "_", url: "iife/lodash" } ] } );
【注意】雖然插件的載入是異步執行的,但請不必擔心,它們會根據plugin數組按順序進行安裝,這對于擁有依賴的插件是很有用的,你可以在plugin屬性中先載入被依賴的插件,這樣,依賴它們的插件就可以順利獲取到它們了。使用插件
被載入的插件可在模塊、組件以及其他插件中使用,你可以在模塊、組件的所有生命周期函數以及插件的build函數中直接通過插件名接收插件實體對象,這也是極為簡單的,如在一個模塊中使用 switch 插件:
new am.Module ( { // 使用插件名直接接收,switch插件將會自動注入到init、mounted函數中 // 其他生命周期函數中也使用此方法注入對應插件實體 init : function ( switch ) { ... }, mounted : function ( switch ) { ... }, // ... } );預定義插件
Amaple框架中有util、http、event、promise四個預定義插件,它們可以直接在生命周期函數中接收,而不需要在配置對象plugin屬性中顯式引入。
此小節主要介紹四個預定義插件的使用方法,但插件使用在Amaple中并不是必須的,所以如果你想更快看完此教程,可先跳過此小節的學習。# 工具函數插件util 類型:Object 描述:
js工具函數集合
對象屬性:類型:Function
描述:判斷數據類型,與“typeof”關鍵字相比,它還可以判斷null和Array兩個數據類型
參數:
arg|any:需判斷類型的數據
返回值:傳入參數的數據類型
類型:Function
描述:循環遍歷一個對象,使用方法與array.forEach類似。但它還可以遍歷類數組如Node.childNodes、Node.attributes等,且當傳入的參數不可遍歷時將直接返回。參數callback為循環遍歷時的回調函數,它分別接收遍歷項的值、遍歷下表、遍歷變量本身三個參數,當回調函數返回false時將break結束本次循環,而且此時foreach執行結束后也將會返回一個false,這在結束多層循環遍歷時很有用,開發者可以通過“return foreach(...)”再次推出上層循環。
參數:
target|ArrayLike、Object:循環遍歷的目標變量值
callback|Function:循環遍歷時的回調函數,它分別接收遍歷項的值、遍歷下表、遍歷變量本身三個參數,返回false可結束循環遍歷
返回值:無
類型:Function
描述:判斷一個數組或對象是否為空,檢查對象時它只會檢查該對象本身的成員屬性
參數:
object|Array、Object:待判斷的數組會對象
返回值:空時為true,不空時為false
類型:Function
描述:判斷一個對象是否為純粹的Object數據對象
參數:
object|Object:待判斷對象
返回值:是則返回true,不是則返回false
類型:Function
描述:獲取唯一標識
參數:無
返回值:唯一標識
# Ajax插件http 類型:Object 描述:Ajax網絡請求插件,它的對象函數get、post、request都實現了
Promise/A+規范,在定義回調函數上,除了普通的異步回調函數傳參外,還支持使用鏈式調用的方式來實現異步回調函數的調用,例如http.get(...).done(function(result) {...}).fail(function(error){...})或http.get(...).then(function(result){}, function(error){...}),來指定成功與失敗的回調函數,如果在Promise對象上和回調函數傳參上同時指定了回調函數,則會執行傳參回調函數。成功回調函數successHandler將接收的參數為響應內容response、響應狀態碼status,響應狀態內容statusText及自定義XHR對象amXHR,amXHR對象屬性詳細如下:
setRequestHeader(header: String, value: String)
描述:設置請求頭,請求執行前設置有效
參數:
header|String:請求頭名稱
value|String:請求頭值
返回值:無
getResponseHeader(header: String)
描述:獲取返回頭信息,請求響應后可獲取
參數:
header|String:返回頭名稱
返回值:對應的返回頭信息
getAllResponseHeaders()
描述:獲取所有返回頭信息,請求響應后可獲取
參數:無
返回值:所有返回頭信息
overrideMimeType(mimetype: String)
描述:設置mimeType,請求執行前設置有效
參數:
mimetype|String:mimeType值
返回值:無
abort(statusText: String)
描述:觸發請求中斷回調,在支持請求中斷且請求響應前有效
參數:
statusText|String:中斷信息,開發者可在中斷回調中的statusText獲取到
返回值:無
http插件對象函數:- 類型:Function - 描述:執行Ajax GET請求,它將返回一個Promise對象用于以鏈式調用的方式來實現異步回調函數 - 參數: - url|String:請求url - args?|String、Object:get提交的數據,此參數傳入String時以“k1=v1&k2=v2”的格式傳入,傳入Object時為一個數據對象 - callback?|Function:請求成功回調函數,。它 - dataType?|String:設置響應內容的格式,可選為“TEXT/JSON/SCRIPT/JSONP”(可忽略大小寫),默認為“TEXT” - 返回值:Promise對象
- 類型:Function - 描述:執行Ajax POST請求,它將返回一個Promise對象用于以鏈式調用的方式來實現異步回調函數 - 參數: - url|String:請求url - args?|String、Object:post提交的數據,此參數傳入String時以“k1=v1&k2=v2”的格式傳入,傳入Object時為一個數據對象 - callback?|Function:請求成功回調函數,如果傳入此參數則以它為回調函數執行。它將接收的參數為響應內容response、響應狀態碼status,響應狀態內容statusText及自定義XHR對象amXHR - dataType?|String:設置響應內容的格式,可選為“TEXT/JSON/SCRIPT/JSONP”(可忽略大小寫),默認為“TEXT” - 返回值:Promise對象
- 類型:Function - 描述:執行Ajax請求,相比于get、post函數,它可以完成更復雜的請求操作,且此函數可直接在data屬性中傳入帶有上傳文件的form表單元素或FormData對象實現文件上傳操作,當在低版本瀏覽器使用form表單元素上傳時將自動使用隱藏iframe刷新的方式上傳,但在支持FormData對象的瀏覽器中自動使用FormData對象實現文件上傳 - 參數: - options|Object:可選屬性詳情如下: - method?|String:請求類型,GET或POST,大小寫不敏感,默認為GET - url|String: 請求地址 - data?|String:提交的額外參數,可選為格式為k1=v1&k2=v2的字符串、{k1:v1, k2:v2}的數據對象、FormData對象及form表單元素對象,當data為form對象時,如果也提供了src參數則優先使用src參數當做url進行提交 - async?|Boolean:是否異步請求,默認為true - cache?|Boolean:請求緩存,如果為false,則每次都會發送請求,默認為true - contentType|String:請求參數編碼 - dataType?|String:返回的數據類型,TEXT/JSON/SCRIPT/JSONP,大小寫不敏感,默認為TEXT - username?|String:服務器認證用戶名 - password?|String:服務器認證密碼 - mimeType?|String:設置mimeType - headers?|Object:額外的請求頭信息,為一個對象 - timeout?|Number:請求超時時間 - beforeSend?|Function:請求發送前回調,函數參數為amXHR對象、當前配置對象options - success?|Function:請求成功后回調,函數參數為data、statusText、amXHR對象 - error?|Function:請求失敗后回調,函數參數為amXHR對象、statusText - complete?|Function:請求完成后回調,函數參數為amXHR對象、statusText - abort?|Function:請求中斷后回調,函數參數為statusText - 返回值:Promise對象# 自定義事件插件event 類型:Object 描述:
自定義事件對象,支持跨模塊觸發事件
對象函數:類型:Function
描述:綁定自定義事件,參數types以空格分隔開可同時綁定一個回調函數到多個事件類型上
參數:
types|String:自定義事件名稱,使用空格隔開可同時綁定一個監聽函數到多個事件類型上listener|Function:事件回調函數
once?|Boolean:是否只能觸發一次,設置為true時,觸發一次回調后將自動解除綁定
返回值:無
類型:Function
描述:觸發自定義事件,當一個事件有多個回調函數時觸發后將順序執行多個回調函數
參數:
types|String:自定義事件名稱,使用空格隔開可同時觸發多個事件
返回值:無
類型:Function
描述:解綁事件,可一次解綁多個類型的事件
參數:
types|String:自定義事件名稱,使用空格隔開可同時解綁多個事件
listener|Function:事件回調函數,必須與綁定事件時傳入的回調函數相同才可成功解綁
返回值:無
# 異步操作同步化插件promise 類型:Class 描述:Promise/A+規范 規范實現類,用于以同步的方式去執行回調函數,而不用將回調函數傳入執行函數中,更加符合邏輯,且在需要執行多重回調處理時,以鏈式結構來表示函數處理后的回調。
成員函數:類型:Function
描述:指定成功與失敗的回調函數,返回值為Promise對象,如果有多重異步回調則可以在此函數后繼續鏈式調用來指定后續的異步回調函數
參數:
onFulfilled|Function:成功時的回調函數
onRejected?|Function:失敗時的回調函數
返回值:Promise對象
類型:Function
描述:指定成功的回調函數,相當于調用then函數只傳入有效的成功回調
參數:
onFulfilled|Function:成功時的回調函數
返回值:Promise對象
類型:Function
描述:指定失敗的回調函數,相當于調用then函數只傳入有效的失敗回調
參數:
onRejected|Function:失敗時的回調函數
返回值:Promise對象
類型:Function
描述:綁定執行完成的回調函數,無論執行函數成功與失敗都將調用此方法綁定的回調函數
參數:
callback|Function:執行完成的回調函數
返回值:Promise對象
繼續學習下一節:【AmapleJS教程】6. 路由配置
也可回顧上一節:【AmapleJS教程】4. 組件
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92716.html
摘要:體驗優先的單頁框架點此查看倉庫是專為單頁應用而設計的基于頁面模塊化的框架,它可使開發者快速開發單頁應用。使用前置要求此框架的使用者可不需了解構建工具,但必須掌握和的基礎知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優先的JavaScript單頁框架 Amaple (點此查看Github倉...
摘要:體驗優先的單頁框架點此查看倉庫是專為單頁應用而設計的基于頁面模塊化的框架,它可使開發者快速開發單頁應用。使用前置要求此框架的使用者可不需了解構建工具,但必須掌握和的基礎知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優先的JavaScript單頁框架 Amaple (點此查看Github倉...
摘要:體驗優先的單頁框架點此查看倉庫是專為單頁應用而設計的基于頁面模塊化的框架,它可使開發者快速開發單頁應用。使用前置要求此框架的使用者可不需了解構建工具,但必須掌握和的基礎知識。 showImg(https://segmentfault.com/img/bV2wO3?w=792&h=303); Amaple · 體驗優先的JavaScript單頁框架 Amaple (點此查看Github倉...
摘要:參數為循環遍歷時的回調函數,它分別接收遍歷項的值遍歷下表遍歷變量本身三個參數,當回調函數返回時將結束本次循環,而且此時執行結束后也將會返回一個,這在結束多層循環遍歷時很有用,開發者可以通過再次推出上層循環。 Amaple 擁有非常強大插件功能,這也是它的突出功能之一,Amaple插件一般表現為功能塊(函數)或功能塊(包含一系列函數和屬性的Object對象),它除了支持Amaple規范...
閱讀 2135·2021-10-14 09:43
閱讀 2197·2019-08-30 15:55
閱讀 726·2019-08-30 14:23
閱讀 2019·2019-08-30 13:21
閱讀 1235·2019-08-30 12:50
閱讀 2199·2019-08-29 18:46
閱讀 2280·2019-08-29 17:28
閱讀 2359·2019-08-29 17:21