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