【Amaple教程】5. 插件

andot 發(fā)布于2019-08-01 18:27 / 2599人閱讀

摘要：參數(shù)為循環(huán)遍歷時(shí)的回調(diào)函數(shù)，它分別接收遍歷項(xiàng)的值遍歷下表遍歷變量本身三個(gè)參數(shù)，當(dāng)回調(diào)函數(shù)返回時(shí)將結(jié)束本次循環(huán)，而且此時(shí)執(zhí)行結(jié)束后也將會(huì)返回一個(gè)，這在結(jié)束多層循環(huán)遍歷時(shí)很有用，開(kāi)發(fā)者可以通過(guò)再次推出上層循環(huán)。

Amaple 擁有非常強(qiáng)大插件功能，這也是它的突出功能之一，Amaple插件一般表現(xiàn)為功能塊（函數(shù)）或功能塊（包含一系列函數(shù)和屬性的Object對(duì)象），它除了支持Amaple規(guī)范定義的插件外，還支持所有 AMD (點(diǎn)擊了解詳情)和 IIFE (點(diǎn)擊了解詳情)規(guī)范的插件，在 rollup 、 webpack 、 browserify 等模塊打包工具流行的今天，這也意味著幾乎所有的第三方j(luò)s庫(kù)都可以與Amaple協(xié)同運(yùn)作，同時(shí)也支持舊式的iife格式j(luò)s庫(kù)。

定義并安裝Amaple規(guī)范的插件

在安裝Amaple規(guī)范的插件前，我們需定義一個(gè)特定格式的pluginDefinition（插件定義對(duì)象）供Amaple安裝，這個(gè)對(duì)象必須包含name屬性和build函數(shù)，分別表示插件名與構(gòu)建函數(shù)，此構(gòu)建函數(shù)返回的值將作為插件實(shí)體。然后使用am.install(pluginDefinition)并傳入插件安裝對(duì)象pluginDefinition進(jìn)行安裝：

// 插件定義對(duì)象
const pluginDefinition = {
    name : "switch",   // 定義插件名，命名規(guī)則與變量名的規(guī)則相同

    // 構(gòu)建函數(shù)，它要求返回一個(gè)插件實(shí)體
    // 無(wú)效返回值（undefined、null、0、false等）將會(huì)拋出錯(cuò)誤
    // build函數(shù)中的this指向的是am對(duì)象，所以你可以使用它進(jìn)行組件定義或am屬性的擴(kuò)展
    build : function () {
        var state = "OFF";

        return {
            press: function () {
                 return state === "OFF" ? "ON" : "OFF";
            }
        };
    }
};

// 調(diào)用后插件將會(huì)被安裝，此時(shí)就完成了一個(gè)名為switch的插件
// 它是一個(gè)含有`press`函數(shù)的Object對(duì)象。
am.install (pluginDefinition);

在A(yíng)maple中，插件也可以像模塊與組件文件一樣編寫(xiě)在獨(dú)立的js文件中，它也提供了相應(yīng)的插件載入機(jī)制。如我們可將上面的插件定義代碼多帶帶放到/plugin/switch.js文件中。

載入插件

無(wú)論是 Amaple 規(guī)范、 amd 和 iife 規(guī)范的插件在A(yíng)maple中都可以以多帶帶文件的形式存在，對(duì)于這些插件我們需要載入它們才可使用，我們可在am.startRouter函數(shù)的參數(shù)內(nèi)添加plugin屬性指定項(xiàng)目依賴(lài)的插件路徑信息，這樣Amaple將會(huì)自動(dòng)加載這些插件文件，plugin具體配置如下：

am.startRouter( {
    // ...
    baseURL : {
        // ...

        // 可為插件文件設(shè)置base路徑，所有的插件文件請(qǐng)求路徑都將基于“/plugin”目錄，不設(shè)置時(shí)默認(rèn)為“/”
        plugin: "/plugin"
    },

    // plugin的值為一個(gè)數(shù)組，通過(guò)它來(lái)指定項(xiàng)目中依賴(lài)的所有插件
    // 以下分別表示插件載入的4種方式
    plugin: [

        // ①.插件路徑字符串，適用于amaple規(guī)范的多帶帶文件插件
        //   如上面定義的switch插件可使用此方式載入，加載路徑依賴(lài)baseURL
        "siwtch",

        // ②.插件定義對(duì)象pluginDefinition，直接傳入此對(duì)象后將會(huì)安裝此插件
        //    與amaple規(guī)范的多帶帶文件插件相比，不需調(diào)用am.install函數(shù)。
        //    這對(duì)于webpack等模塊化環(huán)境下非常有用，你可以import任意js庫(kù)并通過(guò)build函數(shù)retuen它進(jìn)行安裝
        { name: "switch", build: function () { ... } },

        // ③.amd規(guī)范js庫(kù)，支持amd規(guī)范的所有js庫(kù)都可以這樣載入并作為amaple的插件使用
        //    url依賴(lài)baseURL，且url值為“http://”、“https://”開(kāi)頭時(shí)可直接載入外網(wǎng)js庫(kù)
        { format: "amd", name: "anime", url: "amd/animejs" },

        // ④.iife規(guī)范js庫(kù)，iife規(guī)范下將會(huì)使用global的值作為全局對(duì)象名，并在window對(duì)象下尋找它，未定義global時(shí)會(huì)使用name的值代替global值進(jìn)行尋找
        //    url依賴(lài)baseURL，且url值為“http://”、“https://”開(kāi)頭時(shí)可直接載入外網(wǎng)js庫(kù)
        { format: "iife", name: "lodash", global: "_", url: "iife/lodash" }
    ]
} );

【注意】雖然插件的載入是異步執(zhí)行的，但請(qǐng)不必?fù)?dān)心，它們會(huì)根據(jù)plugin數(shù)組按順序進(jìn)行安裝，這對(duì)于擁有依賴(lài)的插件是很有用的，你可以在plugin屬性中先載入被依賴(lài)的插件，這樣，依賴(lài)它們的插件就可以順利獲取到它們了。

使用插件

被載入的插件可在模塊、組件以及其他插件中使用，你可以在模塊、組件的所有生命周期函數(shù)以及插件的build函數(shù)中直接通過(guò)插件名接收插件實(shí)體對(duì)象，這也是極為簡(jiǎn)單的，如在一個(gè)模塊中使用 switch 插件：

new am.Module ( {

    // 使用插件名直接接收，switch插件將會(huì)自動(dòng)注入到init、mounted函數(shù)中
    // 其他生命周期函數(shù)中也使用此方法注入對(duì)應(yīng)插件實(shí)體
    init : function ( switch ) { ... },
    mounted : function ( switch ) { ... },
    // ...
} );

預(yù)定義插件

Amaple框架中有util、http、event、promise四個(gè)預(yù)定義插件，它們可以直接在生命周期函數(shù)中接收，而不需要在配置對(duì)象plugin屬性中顯式引入。

此小節(jié)主要介紹四個(gè)預(yù)定義插件的使用方法，但插件使用在A(yíng)maple中并不是必須的，所以如果你想更快看完此教程，可先跳過(guò)此小節(jié)的學(xué)習(xí)。

# 工具函數(shù)插件util 類(lèi)型：Object 描述：

js工具函數(shù)集合

對(duì)象屬性：

type(arg: any)

類(lèi)型：Function

描述：判斷數(shù)據(jù)類(lèi)型，與“typeof”關(guān)鍵字相比，它還可以判斷null和Array兩個(gè)數(shù)據(jù)類(lèi)型

參數(shù)：

arg|any：需判斷類(lèi)型的數(shù)據(jù)

返回值：傳入?yún)?shù)的數(shù)據(jù)類(lèi)型

foreach(target: ArrayLike|Object, callback: Function)

類(lèi)型：Function

描述：循環(huán)遍歷一個(gè)對(duì)象，使用方法與array.forEach類(lèi)似。但它還可以遍歷類(lèi)數(shù)組如Node.childNodes、Node.attributes等，且當(dāng)傳入的參數(shù)不可遍歷時(shí)將直接返回。參數(shù)callback為循環(huán)遍歷時(shí)的回調(diào)函數(shù)，它分別接收遍歷項(xiàng)的值、遍歷下表、遍歷變量本身三個(gè)參數(shù)，當(dāng)回調(diào)函數(shù)返回false時(shí)將break結(jié)束本次循環(huán)，而且此時(shí)foreach執(zhí)行結(jié)束后也將會(huì)返回一個(gè)false，這在結(jié)束多層循環(huán)遍歷時(shí)很有用，開(kāi)發(fā)者可以通過(guò)“return foreach(...)”再次推出上層循環(huán)。

參數(shù)：

target|ArrayLike、Object：循環(huán)遍歷的目標(biāo)變量值

callback|Function：循環(huán)遍歷時(shí)的回調(diào)函數(shù)，它分別接收遍歷項(xiàng)的值、遍歷下表、遍歷變量本身三個(gè)參數(shù)，返回false可結(jié)束循環(huán)遍歷

返回值：無(wú)

isEmpty(object: Array|Object)

類(lèi)型：Function

描述：判斷一個(gè)數(shù)組或?qū)ο笫欠駷榭眨瑱z查對(duì)象時(shí)它只會(huì)檢查該對(duì)象本身的成員屬性

參數(shù)：

object|Array、Object：待判斷的數(shù)組會(huì)對(duì)象

返回值：空時(shí)為true，不空時(shí)為false

isPlainObject (object: Object)

類(lèi)型：Function

描述：判斷一個(gè)對(duì)象是否為純粹的Object數(shù)據(jù)對(duì)象

參數(shù)：

object|Object：待判斷對(duì)象

返回值：是則返回true，不是則返回false

guid()

類(lèi)型：Function

描述：獲取唯一標(biāo)識(shí)

參數(shù)：無(wú)

返回值：唯一標(biāo)識(shí)

# Ajax插件http 類(lèi)型：Object 描述：

Ajax網(wǎng)絡(luò)請(qǐng)求插件，它的對(duì)象函數(shù)get、post、request都實(shí)現(xiàn)了
Promise/A+規(guī)范，在定義回調(diào)函數(shù)上，除了普通的異步回調(diào)函數(shù)傳參外，還支持使用鏈?zhǔn)秸{(diào)用的方式來(lái)實(shí)現(xiàn)異步回調(diào)函數(shù)的調(diào)用，例如http.get(...).done(function(result) {...}).fail(function(error){...})或http.get(...).then(function(result){}, function(error){...})，來(lái)指定成功與失敗的回調(diào)函數(shù)，如果在Promise對(duì)象上和回調(diào)函數(shù)傳參上同時(shí)指定了回調(diào)函數(shù)，則會(huì)執(zhí)行傳參回調(diào)函數(shù)。成功回調(diào)函數(shù)successHandler將接收的參數(shù)為響應(yīng)內(nèi)容response、響應(yīng)狀態(tài)碼status，響應(yīng)狀態(tài)內(nèi)容statusText及自定義XHR對(duì)象amXHR，amXHR對(duì)象屬性詳細(xì)如下：

setRequestHeader(header: String, value: String)

描述：設(shè)置請(qǐng)求頭，請(qǐng)求執(zhí)行前設(shè)置有效

參數(shù)：

header|String：請(qǐng)求頭名稱(chēng)

value|String：請(qǐng)求頭值

返回值：無(wú)

getResponseHeader(header: String)

描述：獲取返回頭信息，請(qǐng)求響應(yīng)后可獲取

參數(shù)：

header|String：返回頭名稱(chēng)

返回值：對(duì)應(yīng)的返回頭信息

getAllResponseHeaders()

描述：獲取所有返回頭信息，請(qǐng)求響應(yīng)后可獲取

參數(shù)：無(wú)

返回值：所有返回頭信息

overrideMimeType(mimetype: String)

描述：設(shè)置mimeType，請(qǐng)求執(zhí)行前設(shè)置有效

參數(shù)：

mimetype|String：mimeType值

返回值：無(wú)

abort(statusText: String)

描述：觸發(fā)請(qǐng)求中斷回調(diào)，在支持請(qǐng)求中斷且請(qǐng)求響應(yīng)前有效

參數(shù)：

statusText|String：中斷信息，開(kāi)發(fā)者可在中斷回調(diào)中的statusText獲取到

返回值：無(wú)

http插件對(duì)象函數(shù)：

get(url: String, args?: String|Object, callback?: Function, dataType?: String)

- 類(lèi)型：Function
- 描述：執(zhí)行Ajax GET請(qǐng)求，它將返回一個(gè)Promise對(duì)象用于以鏈?zhǔn)秸{(diào)用的方式來(lái)實(shí)現(xiàn)異步回調(diào)函數(shù)
- 參數(shù)：
    - url|String：請(qǐng)求url
    - args?|String、Object：get提交的數(shù)據(jù)，此參數(shù)傳入String時(shí)以“k1=v1&k2=v2”的格式傳入，傳入Object時(shí)為一個(gè)數(shù)據(jù)對(duì)象
    - callback?|Function：請(qǐng)求成功回調(diào)函數(shù)，。它
    - dataType?|String：設(shè)置響應(yīng)內(nèi)容的格式，可選為“TEXT/JSON/SCRIPT/JSONP”（可忽略大小寫(xiě)），默認(rèn)為“TEXT”
- 返回值：Promise對(duì)象

post(url: String, args?: String|Object, callback?: Function, dataType?: String)

- 類(lèi)型：Function

- 描述：執(zhí)行Ajax POST請(qǐng)求，它將返回一個(gè)Promise對(duì)象用于以鏈?zhǔn)秸{(diào)用的方式來(lái)實(shí)現(xiàn)異步回調(diào)函數(shù)
- 參數(shù)：
    - url|String：請(qǐng)求url
    - args?|String、Object：post提交的數(shù)據(jù)，此參數(shù)傳入String時(shí)以“k1=v1&k2=v2”的格式傳入，傳入Object時(shí)為一個(gè)數(shù)據(jù)對(duì)象
    - callback?|Function：請(qǐng)求成功回調(diào)函數(shù)，如果傳入此參數(shù)則以它為回調(diào)函數(shù)執(zhí)行。它將接收的參數(shù)為響應(yīng)內(nèi)容response、響應(yīng)狀態(tài)碼status，響應(yīng)狀態(tài)內(nèi)容statusText及自定義XHR對(duì)象amXHR
    - dataType?|String：設(shè)置響應(yīng)內(nèi)容的格式，可選為“TEXT/JSON/SCRIPT/JSONP”（可忽略大小寫(xiě)），默認(rèn)為“TEXT”
- 返回值：Promise對(duì)象

request(options: Object)

- 類(lèi)型：Function
- 描述：執(zhí)行Ajax請(qǐng)求，相比于get、post函數(shù)，它可以完成更復(fù)雜的請(qǐng)求操作，且此函數(shù)可直接在data屬性中傳入帶有上傳文件的form表單元素或FormData對(duì)象實(shí)現(xiàn)文件上傳操作，當(dāng)在低版本瀏覽器使用form表單元素上傳時(shí)將自動(dòng)使用隱藏iframe刷新的方式上傳，但在支持FormData對(duì)象的瀏覽器中自動(dòng)使用FormData對(duì)象實(shí)現(xiàn)文件上傳
- 參數(shù)：
    - options|Object：可選屬性詳情如下：
        - method?|String：請(qǐng)求類(lèi)型，GET或POST，大小寫(xiě)不敏感，默認(rèn)為GET
        - url|String： 請(qǐng)求地址
        - data?|String：提交的額外參數(shù)，可選為格式為k1=v1&k2=v2的字符串、{k1:v1, k2:v2}的數(shù)據(jù)對(duì)象、FormData對(duì)象及form表單元素對(duì)象，當(dāng)data為form對(duì)象時(shí)，如果也提供了src參數(shù)則優(yōu)先使用src參數(shù)當(dāng)做url進(jìn)行提交
        - async?|Boolean：是否異步請(qǐng)求，默認(rèn)為true
        - cache?|Boolean：請(qǐng)求緩存，如果為false，則每次都會(huì)發(fā)送請(qǐng)求，默認(rèn)為true
        - contentType|String：請(qǐng)求參數(shù)編碼
        - dataType?|String：返回的數(shù)據(jù)類(lèi)型，TEXT/JSON/SCRIPT/JSONP，大小寫(xiě)不敏感，默認(rèn)為T(mén)EXT
        - username?|String：服務(wù)器認(rèn)證用戶(hù)名
        - password?|String：服務(wù)器認(rèn)證密碼
        - mimeType?|String：設(shè)置mimeType
        - headers?|Object：額外的請(qǐng)求頭信息，為一個(gè)對(duì)象
        - timeout?|Number：請(qǐng)求超時(shí)時(shí)間
        - beforeSend?|Function：請(qǐng)求發(fā)送前回調(diào)，函數(shù)參數(shù)為amXHR對(duì)象、當(dāng)前配置對(duì)象options
        - success?|Function：請(qǐng)求成功后回調(diào)，函數(shù)參數(shù)為data、statusText、amXHR對(duì)象
        - error?|Function：請(qǐng)求失敗后回調(diào)，函數(shù)參數(shù)為amXHR對(duì)象、statusText
        - complete?|Function：請(qǐng)求完成后回調(diào)，函數(shù)參數(shù)為amXHR對(duì)象、statusText
        - abort?|Function：請(qǐng)求中斷后回調(diào)，函數(shù)參數(shù)為statusText
- 返回值：Promise對(duì)象

# 自定義事件插件event 類(lèi)型：Object 描述：

自定義事件對(duì)象，支持跨模塊觸發(fā)事件

對(duì)象函數(shù)：

on(types: String, listener: Function, once?: Boolean)

類(lèi)型：Function

描述：綁定自定義事件，參數(shù)types以空格分隔開(kāi)可同時(shí)綁定一個(gè)回調(diào)函數(shù)到多個(gè)事件類(lèi)型上

參數(shù)：

types|String：自定義事件名稱(chēng)，使用空格隔開(kāi)可同時(shí)綁定一個(gè)監(jiān)聽(tīng)函數(shù)到多個(gè)事件類(lèi)型上listener|Function：事件回調(diào)函數(shù)

once?|Boolean：是否只能觸發(fā)一次，設(shè)置為true時(shí)，觸發(fā)一次回調(diào)后將自動(dòng)解除綁定

返回值：無(wú)

emit(types: String)

類(lèi)型：Function

描述：觸發(fā)自定義事件，當(dāng)一個(gè)事件有多個(gè)回調(diào)函數(shù)時(shí)觸發(fā)后將順序執(zhí)行多個(gè)回調(diào)函數(shù)

參數(shù)：

types|String：自定義事件名稱(chēng)，使用空格隔開(kāi)可同時(shí)觸發(fā)多個(gè)事件

返回值：無(wú)

remove(types: String, listener: Function)

類(lèi)型：Function

描述：解綁事件，可一次解綁多個(gè)類(lèi)型的事件

參數(shù)：

types|String：自定義事件名稱(chēng)，使用空格隔開(kāi)可同時(shí)解綁多個(gè)事件

listener|Function：事件回調(diào)函數(shù)，必須與綁定事件時(shí)傳入的回調(diào)函數(shù)相同才可成功解綁

返回值：無(wú)

# 異步操作同步化插件promise 類(lèi)型：Class 描述：

Promise/A+規(guī)范 規(guī)范實(shí)現(xiàn)類(lèi)，用于以同步的方式去執(zhí)行回調(diào)函數(shù)，而不用將回調(diào)函數(shù)傳入執(zhí)行函數(shù)中，更加符合邏輯，且在需要執(zhí)行多重回調(diào)處理時(shí)，以鏈?zhǔn)浇Y(jié)構(gòu)來(lái)表示函數(shù)處理后的回調(diào)。

成員函數(shù)：

then(onFulfilled: Function, onRejected?: Function)

類(lèi)型：Function

描述：指定成功與失敗的回調(diào)函數(shù)，返回值為Promise對(duì)象，如果有多重異步回調(diào)則可以在此函數(shù)后繼續(xù)鏈?zhǔn)秸{(diào)用來(lái)指定后續(xù)的異步回調(diào)函數(shù)

參數(shù)：

onFulfilled|Function：成功時(shí)的回調(diào)函數(shù)

onRejected?|Function：失敗時(shí)的回調(diào)函數(shù)

返回值：Promise對(duì)象

done(onFulfilled: Function)

類(lèi)型：Function

描述：指定成功的回調(diào)函數(shù)，相當(dāng)于調(diào)用then函數(shù)只傳入有效的成功回調(diào)

參數(shù)：

onFulfilled|Function：成功時(shí)的回調(diào)函數(shù)

返回值：Promise對(duì)象

fail(onRejected: Function)

類(lèi)型：Function

描述：指定失敗的回調(diào)函數(shù)，相當(dāng)于調(diào)用then函數(shù)只傳入有效的失敗回調(diào)

參數(shù)：

onRejected|Function：失敗時(shí)的回調(diào)函數(shù)

返回值：Promise對(duì)象

always(callback: Function)

類(lèi)型：Function

描述：綁定執(zhí)行完成的回調(diào)函數(shù)，無(wú)論執(zhí)行函數(shù)成功與失敗都將調(diào)用此方法綁定的回調(diào)函數(shù)

參數(shù)：

callback|Function：執(zhí)行完成的回調(diào)函數(shù)

返回值：Promise對(duì)象

繼續(xù)學(xué)習(xí)下一節(jié)：【AmapleJS教程】6. 路由配置
也可回顧上一節(jié)：【AmapleJS教程】4. 組件

GPU云服務(wù)器云服務(wù)器 html:5 插件 Amaple jquery_html5插件插件工具

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/51743.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

andot

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

＜LeetCode天梯＞Day025 刪除鏈表的倒數(shù)第N個(gè)節(jié)點(diǎn)（雙指針） | 初級(jí)算法 | Pyth

閱讀 1958·2021-11-16 11:45
機(jī)器學(xué)習(xí)數(shù)學(xué)基礎(chǔ)之線(xiàn)代篇——線(xiàn)性代數(shù)python手冊(cè)（建議收藏）

閱讀 3668·2021-09-06 15:02
你可能不知道的css騷操作 — 表單驗(yàn)證

閱讀 2013·2019-08-30 15:44
CSS的一些單位

閱讀 2283·2019-08-30 11:21
構(gòu)建靜態(tài)頁(yè)面之 [ 布局 ]

閱讀 1845·2019-08-29 16:31
網(wǎng)站SEO優(yōu)化

閱讀 3422·2019-08-29 13:55
vue

閱讀 1895·2019-08-29 12:15
CSS學(xué)習(xí)筆記(十) 界面組件之表單

閱讀 3251·2019-08-28 18:05

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【Amaple教程】5. 插件

type(arg: any)

foreach(target: ArrayLike|Object, callback: Function)

isEmpty(object: Array|Object)

isPlainObject (object: Object)

guid()

get(url: String, args?: String|Object, callback?: Function, dataType?: String)

post(url: String, args?: String|Object, callback?: Function, dataType?: String)

request(options: Object)

on(types: String, listener: Function, once?: Boolean)

emit(types: String)

remove(types: String, listener: Function)

then(onFulfilled: Function, onRejected?: Function)

done(onFulfilled: Function)

fail(onRejected: Function)

always(callback: Function)

相關(guān)文章

Amaple.js框架詳細(xì)介紹

Amaple.js框架詳細(xì)介紹

Amaple.js框架詳細(xì)介紹

發(fā)表評(píng)論

0條評(píng)論

andot

男|高級(jí)講師

TA的文章

＜LeetCode天梯＞Day025 刪除鏈表的倒數(shù)第N個(gè)節(jié)點(diǎn)（雙指針） | 初級(jí)算法 | Pyth

機(jī)器學(xué)習(xí)數(shù)學(xué)基礎(chǔ)之線(xiàn)代篇——線(xiàn)性代數(shù)python手冊(cè)（建議收藏）

你可能不知道的css騷操作 — 表單驗(yàn)證

CSS的一些單位

構(gòu)建靜態(tài)頁(yè)面之 [ 布局 ]

網(wǎng)站SEO優(yōu)化

vue

CSS學(xué)習(xí)筆記(十) 界面組件之表單

最新活動(dòng)