Mikit有很好的可扩展性和灵活性,在不涉及核心代码情况下使用插件可以扩展现有的功能,使它们更具交互性,或者创建全新的功能。
下面是一个通用插件的模板,该模板提供了一个在Mikit里用插件可以做什么的总体思路。
(function (Mikit) {
Mikit.Myplugin = function (element, options) {
this.namespace = 'myplugin';
// 默认设置
this.defaults = {
mysetting: true
};
// 父类的构造方法
Mikit.apply(this, arguments);
// 初始化
this.start();
};
// 功能
Mikit.Myplugin.prototype = {
start: function () {
// 插件元素
console.log(this.$element);
// 调用选项
console.log(this.opts.mysetting);
// 调用方法
this.method();
},
method: function () {
// do something...
// 回调函数
this.callback('show');
// 带参数的回调函数
this.callback('show', value1, value2);
}
};
// 继承
Mikit.Myplugin.inherits(Mikit);
// Plugin
Mikit.Plugin.create('Myplugin');
Mikit.Plugin.autoload('Myplugin');
}(Mikit));
调用一个插件非常简单,只需用插件的名称添加数据组件,它就会自动启动。
<div data-component="myplugin"></div>或者手动调用
<div id="my-element"></div>
<script>
$('#my-element').myplugin();
</script>
Mikit插件可以响应事件回调的反应。当需要插件来响应某个动作或事件时,只需使用回调函数即可。
<div id="my-element" data-component="myplugin"></div>
<script>
$('#myplugin').on('show.myplugin', function() {
// do something...
});
</script>
所有插件方法和变量都可以在插件中找到:
<script>
$('#myplugin').on('show.myplugin', function () {
// plugin element
console.log(this.$element);
// call plugin method
this.method();
});
</script>