【Amaple教程】5. 插件
Amaple 拥有很是强大插件功能，这也是它的突出功能之一，Amaple插件通常表现为功能块（函数）或功能块（包含一系列函数和属性的Object对象），它除了支持Amaple规范定义的插件外，还支持全部 AMD (点击了解详情)和 IIFE (点击了解详情)规范的插件，在 rollup 、 webpack 、 browserify 等模块打包工具流行的今天，这也意味着几乎全部的第三方js库均可以与Amaple协同运做，同时也支持旧式的iife格式js库。javascript
定义并安装Amaple规范的插件
在安装Amaple规范的插件前，咱们需定义一个特定格式的pluginDefinition（插件定义对象）供Amaple安装，这个对象必须包含name属性和build函数，分别表示插件名与构建函数，此构建函数返回的值将做为插件实体。而后使用am.install(pluginDefinition)并传入插件安装对象pluginDefinition进行安装：java
// 插件定义对象
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文件中。webpack
载入插件
不管是 Amaple 规范、 amd 和 iife 规范的插件在Amaple中均可以以单独文件的形式存在，对于这些插件咱们须要载入它们才可以使用，咱们可在am.startRouter函数的参数内添加plugin属性指定项目依赖的插件路径信息，这样Amaple将会自动加载这些插件文件，plugin具体配置以下：git
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 插件：github
new am.Module ( {
// 使用插件名直接接收，switch插件将会自动注入到init、mounted函数中
// 其余生命周期函数中也使用此方法注入对应插件实体
init : function ( switch ) { ... },
mounted : function ( switch ) { ... },
// ...
} );
预约义插件
Amaple框架中有util、http、event、promise四个预约义插件，它们能够直接在生命周期函数中接收，而不须要在配置对象plugin属性中显式引入。web
此小节主要介绍四个预约义插件的使用方法，但插件使用在Amaple中并非必须的，因此若是你想更快看完此教程，可先跳过此小节的学习。
# 工具函数插件util
类型：Object
描述：
js工具函数集合segmentfault
对象属性：
type(arg: any)
- 类型：Function
- 描述：判断数据类型，与“typeof”关键字相比，它还能够判断null和Array两个数据类型
-
参数：api
- 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
- 描述：判断一个数组或对象是否为空，检查对象时它只会检查该对象自己的成员属性
-
参数：promise
- object|Array、Object：待判断的数组会对象
- 返回值：空时为true，不空时为false
isPlainObject (object: Object)
- 类型：Function
- 描述：判断一个对象是否为纯粹的Object数据对象
-
参数：
- object|Object：待判断对象
- 返回值：是则返回true，不是则返回false
guid()
- 类型：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插件对象函数：
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. 组件
- 1. 【Amaple教程】4. 组件
- 2. 【Amaple教程】2. 模块
- 3. 【Amaple教程】6. 路由配置
- 4. 【Amaple教程】1. 启动路由
- 5. 【Amaple教程】3. 模板指令与状态数据（state）
- 6. ibator插件教程
- 7. jQuery插件教程
- 8. Blender插件教程
- 9. FCPX插件PROGLITCH for Mac插件教程
- 10. 谷歌浏览器插件开发教程5
- 更多相关文章...
- • Maven 插件 - Maven教程
- • Eclipse 安装插件 - Eclipse 教程
- • Github 简明教程
- • YAML 入门教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。