【Amaple教程】5. 插件

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

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

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

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

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

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

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

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

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

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

載入插件

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

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

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

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

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

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

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

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

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

使用插件

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

new am.Module ( {

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

預(yù)定義插件

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

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

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

js工具函數(shù)集合

對象屬性：

type(arg: any)

類型：Function

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

參數(shù)：

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

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

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

類型：Function

描述：循環(huán)遍歷一個(gè)對象，使用方法與array.forEach類似。但它還可以遍歷類數(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é)束后也將會返回一個(gè)false，這在結(jié)束多層循環(huán)遍歷時(shí)很有用，開發(fā)者可以通過“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)遍歷

返回值：無

isEmpty(object: Array|Object)

類型：Function

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

參數(shù)：

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

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

isPlainObject (object: Object)

類型：Function

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

參數(shù)：

object|Object：待判斷對象

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

guid()

類型：Function

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

參數(shù)：無

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

# Ajax插件http 類型：Object 描述：

Ajax網(wǎng)絡(luò)請求插件，它的對象函數(shù)get、post、request都實(shí)現(xiàn)了
Promise/A+規(guī)范，在定義回調(diào)函數(shù)上，除了普通的異步回調(diào)函數(shù)傳參外，還支持使用鏈?zhǔn)秸{(diào)用的方式來實(shí)現(xiàn)異步回調(diào)函數(shù)的調(diào)用，例如http.get(...).done(function(result) {...}).fail(function(error){...})或http.get(...).then(function(result){}, function(error){...})，來指定成功與失敗的回調(diào)函數(shù)，如果在Promise對象上和回調(diào)函數(shù)傳參上同時(shí)指定了回調(diào)函數(shù)，則會執(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對象amXHR，amXHR對象屬性詳細(xì)如下：

setRequestHeader(header: String, value: String)

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

參數(shù)：

header|String：請求頭名稱

value|String：請求頭值

返回值：無

getResponseHeader(header: String)

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

參數(shù)：

header|String：返回頭名稱

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

getAllResponseHeaders()

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

參數(shù)：無

返回值：所有返回頭信息

overrideMimeType(mimetype: String)

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

參數(shù)：

mimetype|String：mimeType值

返回值：無

abort(statusText: String)

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

參數(shù)：

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

返回值：無

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

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

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

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

- 類型：Function

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

request(options: Object)

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

# 自定義事件插件event 類型：Object 描述：

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

對象函數(shù)：

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

類型：Function

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

參數(shù)：

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

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

返回值：無

emit(types: String)

類型：Function

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

參數(shù)：

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

返回值：無

remove(types: String, listener: Function)

類型：Function

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

參數(shù)：

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

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

返回值：無

# 異步操作同步化插件promise 類型：Class 描述：

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

成員函數(shù)：

then(onFulfilled: Function, onRejected?: Function)

類型：Function

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

參數(shù)：

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

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

返回值：Promise對象

done(onFulfilled: Function)

類型：Function

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

參數(shù)：

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

返回值：Promise對象

fail(onRejected: Function)

類型：Function

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

參數(shù)：

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

返回值：Promise對象

always(callback: Function)

類型：Function

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

參數(shù)：

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

返回值：Promise對象

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51743.html

發(fā)表評論

登陸后可評論

0條評論

andot

男|高級講師

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

TA的文章

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

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

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

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yō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ā)表評論

0條評論

andot

男|高級講師

TA的文章

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

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

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

CSS的一些單位

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

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

vue

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

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yō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)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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