Skip to content

Latest commit

 

History

History
111 lines (67 loc) · 2.84 KB

plugin_building_a_plugin_CN.md

File metadata and controls

111 lines (67 loc) · 2.84 KB

插件:编写插件

3 步即可编写一个 vConsole 插件:

  • 实例化 vConsole 插件
  • 绑定事件到插件
  • 将插件添加到 vConsole

1. 实例化插件

插件原型挂载在 VConsole.VConsolePlugin 中:

VConsole.VConsolePlugin(id, name)
  • id (必填) 字符串,插件的 id,必须保证唯一,不能与其他插件冲突。
  • name (选填) 字符串,展示为 tab 面板的名字。

所以这一步只需将插件 new 出来即可:

var myPlugin = new VConsole.VConsolePlugin('my_plugin', 'My Plugin');

2. 绑定插件事件

在初始化插件、后续运行时,vConsole 会对插件触发一些事件(event)。插件须通过这些事件来完成自定义功能。

使用 .on() 方法来绑定一个事件:

on(eventName, callback)
  • eventName (必填) 字符串,事件的名字。
  • callback (必填) 回调函数,事件被触发时执行。

例子:

myPlugin.on('init', function() {
	console.log('My plugin init');
});

关于每个事件的具体功效,请查阅Event 事件列表

在本教程中,我们准备编写一个既有 tab 面板,又有 tool 按钮(位于面板底部)的插件。

添加新 tab 面板,需要绑定 renderTab 事件:

myPlugin.on('renderTab', function(callback) {
	var html = '<div>Click the tool button below!</div>';
	callback(html);
});

插件初始化过程中,就会触发 renderTab 事件。在这里我们简单地回传了一个 HTML 字符串给 callback,然后这段 HTML 就会被选染成新 tab 面板的主体部分。这个新 tab 的名字就是刚才实例化时的 name

此外,若不绑定 renderTab,那么 vConsole 就不会添加新 tab。

接下来要添加一个底部的 tool 按钮,需要绑定 addTool 事件:

myPlugin.on('addTool', function(callback) {
	var button = {
		name: 'Reload',
		onClick: function(event) {
			location.reload();
		}
	};
	callback([button]);
});

同样地,addTool 会在插件初始化过程中触发,且在 renderTab 之后。回调函数 callback 的参数接收一个 array 数组,数组元素是用于配置按钮的 object 对象。本例中,点击这个按钮会重新加载当前网页。

3. 添加到 vConsole

最后一步,就是将写好的插件添加到 vConsole 中:

vConsole.addPlugin(pluginObject)

pluginObject (必填) 必须为 VConsolePlugin 实例化的对象。

例子:

vConsole.addPlugin(myPlugin);

在添加到 vConsole 之前,请确保已经绑定完所有需要用到的事件。一些初始化相关的事件只会在插件被添加时触发一次,并不会在其他时机被触发。

返回索引