jquery插件注册器

快速将一个构造函数注册成jquery插件

安装

commonJs

npm install --save jquery-register

var jqueryRegister = require('jquery-register');

window

var jqueryRegister = window.jqueryRegister;

简单例子

    // 定义插件构造函数
    function Hello(){

    }
    Hello.defaultOptions = {
        // el 是必须的，用来指定插件绑定的元素
        el:'',
        name:''
    }
    Hello.prototype.init = function(options){
        var self = this;
        $.extend(self, Hello.defaultOptions, options);

        $(self.el).text('hello ' + self.name);
    }

    // 注册为jquery插件
    window.JQRegister.registerFromConstructor('hello', Hello);


    // 初始化插件
   $('#foo').hello({name:'小娜'}); 

方法调用的例子

    // 定义插件构造函数
    function Hello(){

    }
    Hello.defaultOptions = {
        // el 是必须的，用来指定插件绑定的元素
        el:'',
        name:''
    }
    Hello.prototype.init = function(options){
        var self = this;
        $.extend(self, Hello.defaultOptions, options);

        $(self.el).text('hello ' + self.name);
    }

    Hello.prototype.sayHi = function(){
        var self = this;
        alert('Hi ' + self.name);
    }

    2
    Hello.prototype.getName = function(cb){
        var self = this;
        cb&&cb(self.name);
    }

    // 注册为jquery插件
    window.jqueryRegister.registerFromConstructor('hello', Hello);


    /* 使用插件 */

    // 初始化插件
   $('#foo').hello({name:'小娜'}); 

   // 调用方法
   $('#foo').hello().sayHi();

   // 获取name属性，用回调函数来接受
   $('#foo').hello().getName(function(name){
        alert('get '+name);
   });

事件监听的例子

    // 定义插件构造函数
    function Hello() {

    }
    Hello.defaultOptions = {
        // el 是必须的，用来指定插件绑定的元素
        el: '',
        name: ''
    }
    Hello.prototype.init = function(options) {
        var self = this;

        $.extend(self, Hello.defaultOptions, options);

        var $el = $(self.el);

        $el.text('hello ' + self.name);

        // 触发一个事件
        setTimeout(function(){
            $el.trigger('hello.init');
        },1000);

    }

    // 注册为jquery插件
    window.jqueryRegister.registerFromConstructor('hello', Hello);


    /* 使用插件 */
    // 初始化插件
    $('#foo')
        .hello({
            name: '小娜'
        });
    $('#foo')
        .on('hello.init', function(){
            alert('init it');
        });

将Vue组件注册为jquery插件

    // 写一个 vue 组件的配置
    var Bay = {
        template:'<h1>Bay {{name}}</h1>',
        props: ['name'],
        replace: false,
        methods: {
            sayBay: function() {
                console.log('Bay ' + this.name);
                setTimeout(() => {
                    $(this.$el).trigger('bay.bay');
                }, 1000);
            }
        }
    }

    // 注册为jquery插件
    window.jqueryRegister.registerFromVue('bay', Bay, Vue);

    // 初始化插件
    $('#bay').bay({
        name:'小娜'
    });