JQuery 函数的封装

289 阅读1分钟

方法1:

//定义
var fun={
	init:function(){
	    this.event();
	},
	event:function(){
	    //opt
	}
}
//引用
$(function(){
	fun.init();
})

方法2:

定义:每一个构造函数都有一个属性叫做原型(prototype),可以为类声明通用的变量和函数(或者说添加变量和函数);

//构造函数ABC
function ABC(p1,p2,p3){
	this.p1=p1;
	this.p2=p2;
	this.p3=p3;
}
//添加属性
ABC.prototype.p4;
ABC.prototype.p5='';
ABC.prototype.p6=1;
//添加方法
ABC.prototype.p7=function(){
	//opt
}
ABC.prototype.p8=function(para){
	//opt
}
//实例化,创建一个对象变量
var abc=new ABC(a1,a2,a3);
//实例化后,变量abc可以调用ABC所有的属性和方法
abc.p4='p4';
abc.p7();
abc.p8(p);

总结:
prototype的用法:可往里面增加属性和方法,步骤如下:
①构造一个函数ABC;
②通过prototype为ABC声明变量和函数;
③实例化,赋值给一个变量abc;
④调用:通过abc去调用那些定义的属性和方法;

方法3:

理解:var a = a || {};
//这种语法一般在初始化的时候使用
意思就是:假如a未定义或者null的时候,就赋值一个空对象;


var _sm = _sm || {};
//定义方法,声明方法
//头部方法
_sm.header=function(){
	//opt
	//方法
	$("XXX").on("click",function(){});
	//函数
	function fun(){}
}
//页面方法
_sm.index=function(){
	//配置插件参数
	var slickSnack=$("XXX").slick({})
	//方法
	//函数
}
//目录操作方法
_sm.category=function(){
	var myCategory = {
		num:0,
		prev:function(){},
		next:function(){},
		goto:function(){}
	}
}
//地图方法
_sm.map=function(){
	//定义函数
	var searchFun=function(para){}
	//等价于
	function searchFun(para){}
}
//视频方法
_sm.vedio=function(){
	
}
//尾部方法
_sm.footer=function(){
	
}
//分享方法
_sm.share()=function(){
	
}
//初始化方法
_sm.init=function(){
	_sm.header();
	_sm.footer();
	_sm.share();
}

//调用方法
_sm.init();


开发插件:

(function(jQuery){
	jQuery.extend({
		fun1:function(p){
			//opt
		},
		fun2:function(){
			//opt
		},
		//........
	});	
})(jQuery);

理解jquery的$.extend()、$.fn和$.fn.extend()