插件的开发
概观
插件提供了一种实现不属于单个路由视图的公共逻辑的机制,例如导航菜单处理。
每个插件也都由插件配置和一个插件控制器组成。 框架将插件事件发送到相应的插件控制器进行处理。
插件控制器
您需要为每个插件创建一个控制器类,在控制器类中,您应该为要处理的每个插件事件创建一个名称相同的方法。
以下插件实现了当视图变化时自动突出显示当前视图对应的菜单的功能。
HighlightController
define([ "skylarkjs", ],function(skylarkjs){ var spa = skylarkjs.spa, $ = skylark.query; return spa.PluginController.inherit({ klassName: "HighlightController", routing (e) { }, routed (e) { var links = $("a.active"); links.removeClass("active"); links = $("a[href*=\"'" + e.current.path + "'\"]"); links.addClass("active"); links[0].focus(); } }) });
插件配置
所有插件需要在slax-config.json中配置,上述示例中的插件配置如下:
slax-config.json
{ ... "plugins" : { "highlight": { "hookers": "routing routed", "controller": { "type": "scripts/plugins/highlight/HighlightController" } } } ... }
插件事件
插件事件如下 :
preparing
当runtime引用plugin模块时触发,用于异步处理,比如获取后台数据。 事件对象具有以下属性:
- plugin
Plugin实例 - result
异步执行结果,一般为promise
starting
当应用程序启动时触发。
事件对象具有以下属性:
- spa
应用程序实例
started
应用程序启动后触发。
事件对象具有以下属性:
- spa
应用程序实例
routing
应用程序当前视图发生改变时触发。
事件对象具有以下属性:
- current
当前视图的路径信息 - previous
前面视图的路径信息
context data example:
{ path : "/chapters/2", params : { id : "2" } }
routed
应用程序当前视图发生改变后触发。
事件对象具有以下属性:
- current
当前视图的路径信息 - previous
前面视图的路径信息
CLI命令
sjs 命令
skylark.js sdk提供了以下命令
add plugins
使用以下命令添加一个或多个插件。
<plugins> 是添加插件的名称和挂钩事件的定义,单个插件格式为<name>:<events>,多条插件与“,”分开
sjs routes add <slaxPrjRoot> <routes>
example:
sjs plugins add . highlight:routing+routed
delete plugins
使用以下命令删除一个或多个插件。
* sjs plugins delete <slaxPrjRoot> <plugins>
<plugins>是要删除的插件的名字列表,多个插件与“,”分开
list plugins
使用以下命令列出现有的插件。
* sjs plugins list <slaxPrjRoot>
npm run commands
当使用sjs create命令创建slax项目时,上述sjs命令被包装到包脚本中,您可以使用npm run来执行这些脚本,不需要指定项目路径。
- npm run plugin-add – <plugins>
- npm run plugin-delete – <plugins>
- npm run plugin-list