模拟jquery插件的格式

最新推荐文章于 2021-08-03 10:58:49 发布

胖鹅68

最新推荐文章于 2021-08-03 10:58:49 发布

阅读量449

点赞数

本文链接：https://blog.csdn.net/hbiao68/article/details/17112847

版权

现在打算给公司写一个公共组件，常用的工具很多都是jquery,很多时候一些插件特效也是基于jquery写的，因此工作中难免会遇到要拓展别人写的插件。
下面我简单的描述一下插件的格式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
//模拟一个小的插件，方便大家学习
(function($){
	$.fn.huangbiao=function(userSetting){
	//利用jquery的extend方法来拓展插件的配置参数，这个应该暴露给使用用户
		settings = jQuery.extend($.fn.huangbiao.defaultSetting,userSetting);
		
		function init(){
			alert("在我这里进行初始化");
			myFunction(this);
		}
		
		function myFunction(obj){
			alert("我是开发者自己封装的函数");
			showSetting();
			privateFunc();
		}
		
		function showSetting(){
			alert(this.settings.name);
		}
		
		this.unbind('click').click(init);
		
		return this;
	}
	//下面这个是闭包的私有函数
	function privateFunc(){
		alert("i am private function!");
	}
	//暴露给用户使用的函数
	$.fn.huangbiao.openFunc=function(obj){
		alert("test");
	}
	/*
		定义暴露给用户的默认值
		这个一定要放在$.fn.huangbiao对象后面，否则脚本会报错的
	*/
	$.fn.huangbiao.defaultSetting={
		name:"huangbiao",
		sex:"boy",
		age:24
	};
})($);

function useUndefault(){
	//使用自己配置的参数
	$("#undefault").huangbiao({name:"liumei",sex:"girl",age:24});
}

function useUndefault2(){
alert($.fn.huangbiao.defaultSetting.name);
	$.fn.huangbiao.defaultSetting.name="hanmeimei";
	alert($.fn.huangbiao.defaultSetting.name);
	//使用自己配置的参数
	$("#undefault2").huangbiao();
}

function useDefault(){
	//使用默认的配置参数
	$("#default").huangbiao();
}

function openFunction(){
	$("#default").huangbiao.openFunc();
}
</script>
<title>无标题文档</title>
</head>
<body>
<input type="button" value="useUndefault" id="undefault" οnclick="useUndefault();"><br>
<input type="button" value="useUndefault2" id="undefault2" οnclick="useUndefault2();"><br>
<input type="button" value="useDefault" id="default" οnclick="useDefault();"><br>
<input type="button" value="使用提供给用户的函数" id="openFuncId" οnclick="openFunction();"><br>
</body>
</html>

另外下面提供一个关于jquery的文档，希望能帮助到你！