1. 插件模板
  2. 调用插件 Call
  3. 回调函数 Callbacks

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));

调用插件 Call

调用一个插件非常简单,只需用插件的名称添加数据组件,它就会自动启动。

<div data-component="myplugin"></div>
或者手动调用
<div id="my-element"></div>

<script>
    $('#my-element').myplugin();
</script>

回调函数 Callbacks

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>