【Amaple教程】5. 插件

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框架中有utilhttpeventpromise四个预定义插件,它们能够直接在性命周期函数中吸收,而不须要在设置对象plugin属性中显式引入。

此小节重要引见四个预定义插件的运用要领,但插件运用在Amaple中并非必需的,所以假如你想更快看完此教程,可先跳过此小节的进修。

# 东西函数插件util

范例:Object

形貌:

js东西函数鸠合

对象属性:

type(arg: any)
  • 范例:Function
  • 形貌:推断数据范例,与“typeof”关键字比拟,它还能够推断null和Array两个数据范例
  • 参数:

    • arg|any:需推断范例的数据
  • 返回值:传入参数的数据范例
foreach(target: ArrayLike|Object, callback: Function)
  • 范例:Function
  • 形貌:轮回遍历一个对象,运用要领与array.forEach相似。但它还能够遍历类数组如Node.childNodes、Node.attributes等,且当传入的参数不可遍用时将直接返回。参数callback为轮回遍用时的回调函数,它离别吸收遍历项的值、遍历下表、遍历变量自身三个参数,当回调函数返回false时将break完毕本次轮回,而且此时foreach实行完毕后也将会返回一个false,这在完毕多层轮回遍用时很有用,开发者能够经由过程“return foreach(…)”再次推出上层轮回。
  • 参数:

    • target|ArrayLike、Object:轮回遍历的目的变量值
    • callback|Function:轮回遍用时的回调函数,它离别吸收遍历项的值、遍历下表、遍历变量自身三个参数,返回false可完毕轮回遍历
  • 返回值:无
isEmpty(object: Array|Object)
  • 范例:Function
  • 形貌:推断一个数组或对象是不是为空,搜检对象时它只会搜检该对象自身的成员属性
  • 参数:

    • object|Array、Object:待推断的数组会对象
  • 返回值:空时为true,不空时为false
isPlainObject (object: Object)
  • 范例:Function
  • 形貌:推断一个对象是不是为地道的Object数据对象
  • 参数:

    • object|Object:待推断对象
  • 返回值:是则返回true,不是则返回false
guid()
  • 范例:Function
  • 形貌:猎取唯一标识
  • 参数:无
  • 返回值:唯一标识

# Ajax插件http

范例:Object

形貌:

Ajax收集要求插件,它的对象函数getpostrequest都完成了
Promise/A+范例,在定义回调函数上,除了一般的异步回调函数传参外,还支撑运用链式挪用的体式格局来完成异步回调函数的挪用,比方http.get(...).done(function(result) {...}).fail(function(error){...})http.get(...).then(function(result){}, function(error){...}),来指定胜利与失利的回调函数,假如在Promise对象上和回调函数传参上同时指定了回调函数,则会实行传参回调函数。胜利回调函数successHandler将吸收的参数为相应内容response、相应状况码status,相应状况内容statusText及自定义XHR对象amXHRamXHR对象属性细致以下:

  • 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插件对象函数:

get(url: String, args?: String|Object, callback?: Function, dataType?: String)
- 范例: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对象
post(url: String, args?: String|Object, callback?: Function, dataType?: String)
- 范例: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对象
request(options: Object)
- 范例: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

形貌:

自定义事宜对象,支撑跨模块触发事宜

对象函数:

on(types: String, listener: Function, once?: Boolean)
  • 范例:Function
  • 形貌:绑定自定义事宜,参数types以空格分离隔可同时绑定一个回调函数到多个事宜范例上
  • 参数:

    • types|String:自定义事宜称号,运用空格离隔可同时绑定一个监听函数到多个事宜范例上listener|Function:事宜回调函数
    • once?|Boolean:是不是只能触发一次,设置为true时,触发一次回调后将自动消除绑定
  • 返回值:无
emit(types: String)
  • 范例:Function
  • 形貌:触发自定义事宜,当一个事宜有多个回调函数时触发后将递次实行多个回调函数
  • 参数:

    • types|String:自定义事宜称号,运用空格离隔可同时触发多个事宜
  • 返回值:无
remove(types: String, listener: Function)
  • 范例:Function
  • 形貌:解绑事宜,可一次解绑多个范例的事宜
  • 参数:

    • types|String:自定义事宜称号,运用空格离隔可同时解绑多个事宜
    • listener|Function:事宜回调函数,必需与绑定事宜时传入的回调函数雷同才可胜利解绑
  • 返回值:无

# 异步操纵同步化插件promise

范例:Class

形貌:

Promise/A+范例 范例完成类,用于以同步的体式格局去实行回调函数,而不必将回调函数传入实行函数中,越发相符逻辑,且在须要实行多重回调处置惩罚时,以链式构造来示意函数处置惩罚后的回调。

成员函数:

then(onFulfilled: Function, onRejected?: Function)
  • 范例:Function
  • 形貌:指定胜利与失利的回调函数,返回值为Promise对象,假如有多重异步回调则能够在此函数后继承链式挪用来指定后续的异步回调函数
  • 参数:

    • onFulfilled|Function:胜利时的回调函数
    • onRejected?|Function:失利时的回调函数
  • 返回值:Promise对象
done(onFulfilled: Function)
  • 范例:Function
  • 形貌:指定胜利的回调函数,相当于挪用then函数只传入有用的胜利回调
  • 参数:

    • onFulfilled|Function:胜利时的回调函数
  • 返回值:Promise对象
fail(onRejected: Function)
  • 范例:Function
  • 形貌:指定失利的回调函数,相当于挪用then函数只传入有用的失利回调
  • 参数:

    • onRejected|Function:失利时的回调函数
  • 返回值:Promise对象
always(callback: Function)
  • 范例:Function
  • 形貌:绑定实行完成的回调函数,不管实行函数胜利与失利都将挪用此要领绑定的回调函数
  • 参数:

    • callback|Function:实行完成的回调函数
  • 返回值:Promise对象

继承进修下一节:【AmapleJS教程】6. 路由设置
也可回忆上一节:【AmapleJS教程】4. 组件

    原文作者:JOU_amjs
    原文地址: https://segmentfault.com/a/1190000012966591
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞