1.1.1 • Published 8 years ago
jquery-register v1.1.1
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:'小娜'
});