Amaple有非常强大的插件功能,这也是它的突出特点之一。Amaple插件一般表示为功能块(functions)或功能块(Object对象,包含一系列的功能和属性),除了支持Amaple规范定义的插件外,还支持所有AMD(点击查看详细信息)和IIFE(点击查看详细信息)规范插件。在rollup、webpack、browserify等模块打包工具大行其道的今天,这也意味着几乎所有的第三方js库都可以和Amaple一起工作,同时也支持旧的iife格式的js库。定义并安装Amaple规范的插件在安装Amaple规范的插件之前,我们需要定义一个特定格式的pluginDefinition(插件定义对象)供Amaple安装。这个对象必须包含一个name属性和一个build函数,分别代表插件名称和build函数。此构造函数返回的值将是插件实体。然后使用am.install(pluginDefinition)传入插件安装对象pluginDefinition进行安装://插件定义对象constpluginDefinition={name:"switch",//定义插件名称,命名规则同变量name//构建函数,需要返回一个插件实体//无效的返回值(undefined,null,0,false,etc.)会抛出错误//构建函数中的this指向am对象,所以你可以将它用于组件定义或am属性的扩展构建:function(){varstate="OFF";返回{按下:函数(){返回状态===“关闭”?“开关”;}};}};//调用之后会安装插件,此时完成一个名为switch的插件//是一个包含`press`功能的Object对象。am.install(插件定义);在Amaple中,插件也可以像模块、组件文件一样写在独立的js文件中,同时也提供了相应的插件加载机制。比如我们可以将上面的插件定义代码单独放在/plugin/switch.js文件中。加载插件无论是Amaple规范,amd和iife规范的插件都可以以单独文件的形式存在于Amaple中。对于这些插件,我们需要加载它们才能使用。我们可以在am.startRouter函数的参数中添加plugin属性,指定项目依赖的插件路径信息,这样Amaple就会自动加载这些插件文件。插件的具体配置如下:am.startRouter({//...baseURL:{//...//可以为插件文件路径设置base,所有插件文件请求路径都会基于"/plugin"目录,如果不设置,默认为"/"plugin:"/plugin"},//plugin的值是一个数组,通过它来指定项目中所有的插件//以下分别代表加载插件的4种方式plugin:[//①.Pluginpathstring,aseparatefilepluginapplicabletotheamaplespecification//上面定义的switchplugin可以这样加载,加载路径取决于baseURL"siwtch",//②.插件定义对象pluginDefinition,直接传入这个对象后,就会安装插件//相比amaple规范的单独文件插件,不需要调用am.install函数。//这对于webpack等模块化环境非常有用,可以导入任意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的值代替全局值来搜索//url依赖于baseURL,url值以"http://"或"https://"开头,可以是直接加载外网js库{format:"iife",name:"lodash",global:"_",url:"iife/lodash"}]});[注意]虽然插件的加载是异步执行的,但是不用担心,它们会按照插件数组的顺序安装,这对于有依赖的插件非常有用。可以在plugin属性中先加载依赖的插件,这样依赖的插件就可以顺利的获取到了。使用插件加载的插件可以在模块、组件和其他插件中使用。您可以在插件的模块、组件和构建函数的所有生命周期函数中直接通过插件名称接收插件实体对象。这也是极其简单的。如果在模块中使用switch插件:newam.Module({//使用插件名直接接收,switch插件会自动注入到init和mounted函数中//这个方法也用于注入其他生命周期中对应的插件实体functionsinit:function(switch){...},mounted:function(switch){...},//...});Amaple框架中有四个预定义的插件:util、http、event和promisePlugins,它们可以直接在生命周期函数中接收,无需在配置对象的plugin属性中显式引入。本节主要介绍四个预定义插件的使用方法,但是在Amaple中插件的使用并不是必须的,所以如果想更快的完成本教程,可以先跳过本节。#工具函数插件utiltype:Object描述:js工具函数集合对象属性:type(arg:any)类型:Function描述:判断数据类型,相对于"typeof"关键字,它也可以同时判断null和Array数据类型参数:arg|any:待判断的数据类型返回值:传入参数的数据类型foreach(target:ArrayLike|Object,callback:Function)type:Function说明:循环遍历一个对象,使用相同的方法正如array.forEach类似。但是它也可以遍历Node.childNodes、Node.attributes等类数组,当传入的参数遍历不通时会直接返回。参数callback是循环遍历时的回调函数。它接收三个参数:遍历项的值、遍历表和遍历变量本身。当回调函数返回false时,它??会break结束循环。会返回一个false,这在结束多级循环遍历时很有用,开发者可以通过“returnforeach(...)”再次启动上层循环。参数:target|ArrayLike,Object:循环遍历回调的目标变量值|Function:循环遍历时的回调函数,分别接收遍历项、遍历表、遍历变量本身的值。返回false结束循环遍历返回值:无isEmpty(object:Array|Object)类型:函数描述:判断数组或对象是否为空。检查对象时,只会检查对象本身的成员属性。参数:object|Array,Object:待定Array对象返回值:为空为true,不为空为falseisPlainObject(object:Object)类型:功能描述:判断一个对象是否为纯Object数据对象参数:object|Object:判断对象返回值:yesthen返回true,否则返回falseguid()类型:函数描述:获取唯一标识符参数:无返回值:唯一标识符#Ajax插件http类型:Object描述:Ajax网络请求插件-in,其对象函数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:请求头值返回值:无返回头名称返回值:对应的返回头信息getAllResponseHeaders()描述:获取所有返回头信息,可以在请求响应后获取参数:无返回值:所有返回头信息overrideMimeType(mimetype:String)描述:设置mimeType,请求执行设置前有效参数:mimetype|String:mimeType值返回值:Noneabort(statusText:String)说明:触发请求中断回调,支持请求中断前有效参数,请求响应:statusText|String:中止信息,开发者可以通过中断回调中的statusText获取返回值:无http插件对象function:get(url:String,args?:String|Object,callback?:Function,dataType?:String)-type:Function-描述:执行AjaxGET请求,会返回一个Promise对象,以链式调用的方式实现异步回调函数-参数:-url|String:请求url-args?|String,Object:get提交的数据,当this参数以String形式传入,传入"k1=v1&k2=v2"的格式,传入Object时为数据对象-callback?|Function:请求成功的回调函数。It-dataType?|String:设置响应内容的格式,可以是“TEXT/JSON/SCRIPT/JSONP”(大小写可以忽略),默认为“TEXT”-返回值:Promiseobjectpost(url:String,args?:String|Object,callback?:Function,dataType?:String)-类型:Function-描述:执行一个AjaxPOST请求,它会返回一个Promise对象以链式方式实现异步回调函数-参数:-url|String:请求url-args?|String,Object:post提交的数据,该参数传入String时为"k1=v1&k2=v2"格式,传入Object时为数据对象-打回来?|Function:请求成功回调函数,如果传入该参数,则作为回调函数执行。它会收到的参数有响应内容response、响应状态码status、响应状态内容statusText和自定义XHR对象amXHR-dataType?|String:设置响应内容的格式,可以是“TEXT/JSON/SCRIPT/JSONP”(大小写可以忽略),默认为"TEXT"-返回值:Promiseobjectrequest(options:Object)-类型:函数-描述:执行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元素对象。当数据为表单对象时,如果还提供了src参数,则将src参数作为url进行提交。-async?|Boolean:是否进行异步请求,默认为truefalse,每次都会发送请求,默认为true-contentType|String:请求参数编码-dataType?|String:返回的数据类型,TEXT/JSON/SCRIPT/JSONP,不区分大小写,默认为TEXT-username?|字符串:服务器身份验证用户名-密码?|字符串:服务器身份验证密码-mimeType?|字符串:设置mimeType-标头?|对象:extra请求头信息是一个对象-timeout?|Number:请求超时time-beforeSend?|功能:请求发送前的回调,函数参数是amXHR对象,当前配置对象options-success?|功能:回调请求成功后,函数参数为data,statusText,amXHR对象-error?|Function:请求失败后回调,函数参数为amXHR对象,statusText-complete?|Function:请求完成后回调,函数参数为amXHR对象,statusText-abort?|功能:请求中断后回调,函数参数为statusText-返回值:Promise对象#自定义事件插件事件类型:对象说明:自定义事件对象,支持跨模块触发事件objectfunction:on(types:String,listener:Function,once?:Boolean)类型:Function描述:绑定自定义事件,参数类型以空格分隔,一个回调函数可以同时绑定多个事件类型.参数:types|String:自定义事件名称,以空格分隔可以同时给多个事件类型绑定一个监听函数listener|Function:事件回调函数一次?|Boolean:是否只能触发一次,设置为true时,触发回调后会自动解绑返回值:noemit(types:String)类型:函数描述:触发自定义事件。当一个事件有多个回调函数时,多个回调函数被触发后会依次执行。触发多个事件返回值:无remove(types:String,listener:Function)类型:Function描述:解除绑定事件,可以一次解除绑定多种类型的事件参数:types|String:自定义事件名称,以空格分隔打开即可同时解绑多个事件listener|Function:事件回调函数,必须与绑定事件时传入的回调函数相同才能成功解绑返回值:None#异步操作同步插件promise类型:类描述:Promise/A+specification规范实现类,用于同步执行回调函数而不是将回调函数传入执行函数更符合逻辑,并且当需要执行多个回调处理时,函数处理后的回调成员函数用链式结构表示:then(onFulfilled:Function,onRejected?:Function)类型:Function描述:指定成功和失败的回调函数,返回值是一个Promise对象。如果有多个异步回调,可以在这个函数之后继续链式调用,指定后续的异步回调函数参数:onFulfilled|Function:成功时的回调函数onRejected?|Function:失败时的回调函数返回值:Promise对象:Function)类型:函数描述:指定成功回调函数,相当于调用then函数,只有传入才有效成功回调参数:onFulfilled|Function:成功时的回调函数返回值:Promise对象fail(onRejected:Function)type:Function描述:指定失败的回调函数,相当于调用then函数,只传入有效的失败回调参数:onRejected|Function:失败时的回调函数返回值:Promiseobjectalways(callback:Function)Type:函数说明:执行完成后绑定的回调函数,无论执行函数成功与否,都会调用该方法绑定的回调函数参数:callback|Function:执行完成后的回调函数返回值:Promise对象继续学习下一节:【AmapleJS教程】6.路由配置也可以复习上一节:【AmapleJS教程】4.组件
