jQuery插件编写指南:代码格式与示例

发表时间: 2023-12-14 10:11

基于jquery写个自己的插件,这是早期的搜藏陈货发出来分享下,虽然现在基本已经是vue的天下了,vue的数据驱动方式 虚拟dom和 jquery的逻辑大不一样了,但是当年锋利的jquery是绝对的锋利的,切图网做前端切图外包 早期也造过不少的轮子,比如类似wow.js的插件 duang.js ,类似swiper的滑块插件等等,也逐渐成为了历史,不过vue 和jquery并不冲突 ,适合用在不同的场景下,本质上他们不具备对比性的。

如何用jquery自定义一个类?附代码

/*简单使用*/

(function($){

//el操纵对象,option属性值

$.love = function(el,option){

var lo = $(el);

var lo.vars = $.extend({},$.love.default ,option); //合并成新对象,则是新的属性列表

//定义其他属性

……

var method = {};

//私有方法,私有方法之间可互相调用

method={

functionA: function() {…},

functionB: function() {…},

functionC: function() {…},

}

//公有方法(特权方法),供类外调用

this.publicFunction = function(a,b,c){

….

/*调用私有函数*/

method.functionA();

}

}

//可设置默认属性

$.love.default = {

option1:…,

option2:…,

….

}

})(jQuery);
/*类外调用*/

var a = new $.love(“#id”,{title:”name”,age:12,…});

a.publicFunction(a,b,c);

/*相对高级点*/

(function($){

//el操纵对象,option属性值

$.love = function(el,option){

var lo = $(el);

var lo.vars = $.extend({},$.love.default ,option); //合并成新对象,则是新的属性列表

//定义其他属性

……

var method = {};

$.data(el, “love”, lo); //在元素上存放数据,包括lo的所有属性,方法

//私有方法,私有方法之间可互相调用

method={

functionA: function() {…},

functionB: function() {…},

functionC: function() {…},

}

//公有方法(特权方法),供类外调用

lo.pfunctionA = function(){

/*调用私有函数*/

method.functionA();

},

lo.pfunctionB = function(){…},

}

//可设置默认属性

$.love.default = {

option1:…,

option2:…,

….

}

$.fn.love(option){

var $this = $(this);

if( $this.data(‘love’)===undefined){

new $.love(this,option);

}else{

var love = $this.data(‘love’); //直接使用类中的函数等

love.pfunctionA();

}

}

})(jQuery);