javascript插件开发教程
如何⾃⼰开发⼀款js或者jquery插件
引⼦
初学js不久，接触到js插件开发，其实很简单，不像⽹上吹嘘的那么复杂，⼜要掌握js，掌握jquery，其实没有那么复杂，下⾯简单介绍，供学习使⽤。
jquery插件开发模式
jquery插件⼀般有三种开发⽅式：
通过$.extend()来扩展jQuery，不知道为啥这么写，我理解的就是【参数合并，⽤户⾃定义参数与默认参数合并，如果⽤户输⼊参数与默认参数重复，则覆盖默认参数】
通过$.fn 向jQuery添加新的⽅法【$.fn.functioName，调⽤就是$(selector).functionName】
通过$.widget()应⽤jQuery UI的部件⼯⼚⽅式创建
第⼀种$.extend()相对简单，⼀般很少能够独⽴开发复杂插件，第三种是⼀种⾼级的开发模式，本⽂也不
做介绍。第⼆种则是⼀般插件开发⽤到的⽅式，本⽂着重讲讲第⼆种。
插件开发
第⼆种插件开发⽅式⼀般是如下定义
1.⾃定义插件名称
$.fn.pluginName = function() {
//pluginName 为jq调⽤的函数名称
}
2.参数合并
$.extend(dest,src1,);
它的含义是将src1,合并到dest中，返回值为合并后的dest，由此可以看出该⽅法合并后，是修改了dest的结构的。如果想要得到合并的结果却⼜不想修改dest的结构，可以如下使⽤：
如下例：
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果
result={name:"Jerry",age:21,sex:"Boy"}
这样做的⽬的是调⽤的时候⾮常灵活，可以不传参数，使⽤默认参数，也可以传⼊⾃定义参数。
3.书写⾃定义插件核⼼功能
注意：
刚刚介绍的是⾃定义插件，还有⼀种使⽤频繁的插件，就是扩展插件⽅法。还有⼀种称谓叫：对象插件开发，即扩展已有元素的已有属性。实例1：(function($){
$.fn.extend({
width:function(q){
var mm={para1:"para1",para2:"para2"};
var para=$.extend({},mm,q);
alert(para.para1);
$(this).click(function(){
alert("click");
});
}
})
})(jQuery)
$(function(){
var q={para:"123",para2:"456"};
$(".testplugin").width(q);
})
实例：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>testplugin.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="item/js/jquery.min.js"></script>
<!--  <script type="text/javascript" src="item/js/testplugin.js"></script></head> --> <!--      <script type="text/javascript" src="item/js/testReady.js"></script> -->
jquery学习在线教程
<script type="text/javascript">
(function($){
$.fn.testPlugin=function(options){
var defaultpara={para1:"para1",para2:"para2"}
var para=defaultpara=$.extend({},defaultpara,options);
alert(para.para1);
}
})(jQuery)
$(function(){
var options={para1:"123"};
$("testplugin").testPlugin(options);
})
</script>
<body>
This is my HTML page. <br>
<div >
<label title="s" class="testplugin">label</label>
</div>
</body>
</html>
Tags: ，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。